korbit-ai[bot] commented on code in PR #35984:
URL: https://github.com/apache/superset/pull/35984#discussion_r2491168329
##########
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx:
##########
@@ -426,6 +426,9 @@ const DashboardBuilder = () => {
isReport;
const [barTopOffset, setBarTopOffset] = useState(0);
+ const [currentFilterBarWidth, setCurrentFilterBarWidth] = useState(
+ CLOSED_FILTER_BAR_WIDTH,
+ );
Review Comment:
### Unnecessary re-render from state initialization <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
State initialization with a constant value that gets immediately overwritten
in a callback function causes unnecessary re-renders.
###### Why this matters
The component will render once with CLOSED_FILTER_BAR_WIDTH, then
immediately re-render when setCurrentFilterBarWidth is called in the
renderChild callback, causing layout thrashing and performance degradation.
###### Suggested change ∙ *Feature Preview*
Initialize the state with a function that calculates the correct initial
value based on the current filter bar state:
```typescript
const [currentFilterBarWidth, setCurrentFilterBarWidth] = useState(() =>
dashboardFiltersOpen ? OPEN_FILTER_BAR_WIDTH : CLOSED_FILTER_BAR_WIDTH
);
```
This prevents the initial render with an incorrect value and subsequent
correction re-render.
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/1b736ab3-3052-453b-91b7-8d87fc51a192/upvote)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/1b736ab3-3052-453b-91b7-8d87fc51a192?what_not_true=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/1b736ab3-3052-453b-91b7-8d87fc51a192?what_out_of_scope=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/1b736ab3-3052-453b-91b7-8d87fc51a192?what_not_in_standard=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/1b736ab3-3052-453b-91b7-8d87fc51a192)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:82157c30-9fb3-485a-b83a-4d8887860631 -->
[](82157c30-9fb3-485a-b83a-4d8887860631)
##########
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx:
##########
@@ -426,6 +426,9 @@ const DashboardBuilder = () => {
isReport;
const [barTopOffset, setBarTopOffset] = useState(0);
+ const [currentFilterBarWidth, setCurrentFilterBarWidth] = useState(
+ CLOSED_FILTER_BAR_WIDTH,
+ );
Review Comment:
### Initial filter bar width mismatch with actual state <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
The initial state value may cause layout inconsistency during component
initialization when the filter bar is actually open.
###### Why this matters
If the dashboard loads with filters already open (dashboardFiltersOpen =
true), the component will initially render with CLOSED_FILTER_BAR_WIDTH but
then immediately update to the actual open width, causing a visual jump or
layout shift during the initial render.
###### Suggested change ∙ *Feature Preview*
Initialize the state based on the actual filter bar state:
```typescript
const [currentFilterBarWidth, setCurrentFilterBarWidth] = useState(
dashboardFiltersOpen ? OPEN_FILTER_BAR_WIDTH : CLOSED_FILTER_BAR_WIDTH,
);
```
Alternatively, if `dashboardFiltersOpen` is not available during
initialization, consider using a useEffect to set the correct initial width
immediately after mount.
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/a24f2c02-3749-438a-bebf-f6ae7e1c80eb/upvote)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/a24f2c02-3749-438a-bebf-f6ae7e1c80eb?what_not_true=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/a24f2c02-3749-438a-bebf-f6ae7e1c80eb?what_out_of_scope=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/a24f2c02-3749-438a-bebf-f6ae7e1c80eb?what_not_in_standard=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/a24f2c02-3749-438a-bebf-f6ae7e1c80eb)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:df76260c-0fb9-4719-bd55-521402279064 -->
[](df76260c-0fb9-4719-bd55-521402279064)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
