Adjusting memoization on the `DashWrapper` to be utilized #3248

BSd3v · 2025-03-26T13:25:29Z

This is a PR to test the adjustment of memoization on the DashWrapper

you can see info here: #3243

BSd3v · 2025-03-26T14:48:57Z

The initial test failed due to not being able to redraw components if the parent is adjusted.

The current test for this hash is startsWith I have updated it to render the first descendent of the updatedPath, however, this will not work if the desired outcome is to render and adjustment to every upstream component.

If the above is the desired outcome, I recommend having devs add a new prop to components that want to redraw on upstream adjustments and using that to switch to the older function which uses startsWith without any limit. Applying this to all descendants does not seem efficient.

Heck, even adding it as a prop that Dash adds would work.

…`children` has been altered

…e dash layout

BSd3v · 2025-03-27T16:22:01Z

There was an issue with the useSelector in Dash 3, whenever a parent element was adjusted, it would cause all children to rerender. The higher up the tree, the more components had to rerender.

In this PR, we adjusted the reducer to trigger a layout adjustment only if the direct descendants are effected, ie, children prop was adjusted. The useSelector is now much narrow, only listening to adjustments on the specific component.

A couple of other things that were minor

fixed the issue where c was undefined and thus c.props never resolved
fixed the issue where setProps was triggered from a component and the component was no longer in the dash layout.

… to update `children`

…w children and generate hashes for them

adjusted the components as props test to work with redrawing

…ender or the target prop being adjusted vs having to crawl with the reducer the layouthash now has the props that triggered the change as well as the number of updates

BSd3v · 2025-03-29T05:33:55Z

Another thing on the last comment, I adjusted the way the memoizing works, it only holds onto the last rendered time. This helps with rerenders.

…render, there is no hash or the component prop is in the changedProps. There was an issue if the component props had changed from the children, it would think that the parents props had changed and needed to re-render.

…nt can subscribe to based upon its prop definitions

BSd3v · 2025-03-31T13:53:17Z

I added renderType as an optional prop for developers. It allows the developer to be able to know what triggered the render.

i.e. when using an api component and setProps was triggered, the base component often doesnt need to rerender. To avoid this, the dev can check for props.renderType !== 'internal' to not rerender. 😄

# Conflicts: # CHANGELOG.md

…ibe, they need to place on the component: `namespace.component.dashRenderType = true`

T4rk1n

Nice job, just a few minor comments.

T4rk1n · 2025-03-31T19:01:05Z

dash/dash-renderer/src/wrapper/DashWrapper.tsx

        selectDashProps(componentPath),
        selectDashPropsEqualityFn
    );

+    /* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
+    // @ts-ignore
+    const newlyRendered = useMemo(() => {


Can we put as newlyRendered: any instead of the ts-ignore?

I'll check with the @ts-ignore the unused vars needs to be ignored.

Still errors out in the build.

Oh, I don't think useMemo is right in this case, should be useEffect.

useEffect is not sync, while useMemo is sync. For the current to be used within the same sync it has to be useMemo.

Went with useMemo without variable declaration

dash/dash-renderer/src/reducers/reducer.js

dash/dash-renderer/src/wrapper/DashWrapper.tsx

T4rk1n · 2025-03-31T20:21:53Z

dash/dash-renderer/src/wrapper/DashWrapper.tsx

@@ -41,24 +46,61 @@ type DashWrapperProps = {
     */
    componentPath: DashLayoutPath;
    _dashprivate_error?: any;
+    _passedComponent?: any;
+    _newRender?: any;


Maybe add a comment describing those new props.

dash/dash-renderer/src/actions/callbacks.ts

dash/dash-renderer/src/observers/executedCallbacks.ts

dash/dash-renderer/src/utils/clientsideFunctions.ts

T4rk1n

💃

Adjusting memoization on the DashWrapper to be utilized

393e870

BSd3v requested review from T4rk1n, ndrezn, gvwilson and emilykl as code owners March 26, 2025 13:25

adjusting hash for renders

3c2898d

ndrezn linked an issue Mar 26, 2025 that may be closed by this pull request

Prop tests in Debug=True slow when manipulating lots of children #3243

Closed

BSd3v added 3 commits March 27, 2025 11:45

simplifying and using the reducer to trigger adjustments only if the …

25c20de

…`children` has been altered

making json stringify simpler to keep from circular references

dc2e2bd

testing internal setProps to make sure the component is still in th…

adbb030

…e dash layout

BSd3v added 8 commits March 27, 2025 12:49

fixing issue with set_progress not triggering properly when needing…

b77e7b7

… to update `children`

refactor for dashWrapper made the reducer recursive to get the ne…

5eed5fe

…w children and generate hashes for them

reverting to using memo, but only memoizing on the hash

02bf1c8

adjustments for how children are added when the prop was changed

cbc93b9

adding support for sending hashes to components as props

8ae3b22

adjusted the components as props test to work with redrawing

adjusting children for rerendering

5c505e9

adding changelog entry

3d4ec1d

updated wrapper to pass new props down to the components upon a new r…

c772126

…ender or the target prop being adjusted vs having to crawl with the reducer the layouthash now has the props that triggered the change as well as the number of updates

BSd3v added 9 commits March 29, 2025 01:43

adding ignore for unused var

62ec2ac

swapped hash with actual item and props

197901a

adjustments for lint

e2f89e9

updated patch test to use until instead of assert to allow timing flux

8862956

fixing for lint

3bc85d3

removed the new prop being passed down: rendertype

889b4a5

adding renderType but making it a conditional prop that the compone…

9c8a62a

…nt can subscribe to based upon its prop definitions

adding test component and test for rendertype prop

ef41561

removing unused import

c409895

This was referenced Mar 31, 2025

[BUG] issues with dropdown persistence in dash 3.0 #3250

Closed

Performance regression in dash 3.0 #3245

Closed

[BUG] Dash 3 Components as Props #3234

Closed

dcc.Dropdown width rendering incorrect with Dash 3 rc4 #3214

Closed

gvwilson assigned T4rk1n Mar 31, 2025

gvwilson added P1 needed for current cycle fix fixes something broken community community contribution labels Mar 31, 2025

BSd3v added 2 commits March 31, 2025 10:35

Merge remote-tracking branch 'remote/dev' into performance-adjust

bf00422

# Conflicts: # CHANGELOG.md

adjusting renderType to dashRenderType if the dev wants to subscr…

ce1da9a

…ibe, they need to place on the component: `namespace.component.dashRenderType = true`

T4rk1n reviewed Mar 31, 2025

View reviewed changes

BSd3v added 3 commits March 31, 2025 16:36

replacing Date.now() with new object to force rerender

f0db8c5

adjusting for lint

6588aac

adjustments from feedback

5e1bdf3

T4rk1n reviewed Apr 1, 2025

View reviewed changes

dash/dash-renderer/src/actions/callbacks.ts Outdated Show resolved Hide resolved

dash/dash-renderer/src/observers/executedCallbacks.ts Outdated Show resolved Hide resolved

dash/dash-renderer/src/utils/clientsideFunctions.ts Outdated Show resolved Hide resolved

BSd3v added 6 commits April 1, 2025 10:14

adjusting for state no longer needed in dispatch

96166c8

adjustments based on feedback

3ade208

reverting errant adjustment

6f744f0

additional component -> renderComponent adjustments

04fc346

adjusting for missing variable swaps and removing unused memoizeProps

0dea738

updating change log entry

cde9acf

T4rk1n approved these changes Apr 1, 2025

View reviewed changes

T4rk1n merged commit 8f585b5 into plotly:dev Apr 1, 2025
2 of 3 checks passed

Uh oh!

Adjusting memoization on the DashWrapper to be utilized #3248

Adjusting memoization on the DashWrapper to be utilized #3248

Uh oh!

Conversation

BSd3v commented Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

BSd3v commented Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

BSd3v commented Mar 27, 2025

Uh oh!

BSd3v commented Mar 29, 2025

Uh oh!

BSd3v commented Mar 31, 2025

Uh oh!

T4rk1n left a comment

Choose a reason for hiding this comment

Uh oh!

T4rk1n Mar 31, 2025

Choose a reason for hiding this comment

Uh oh!

BSd3v Mar 31, 2025

Choose a reason for hiding this comment

Uh oh!

BSd3v Mar 31, 2025

Choose a reason for hiding this comment

Uh oh!

T4rk1n Apr 1, 2025

Choose a reason for hiding this comment

Uh oh!

BSd3v Apr 1, 2025

Choose a reason for hiding this comment

Uh oh!

BSd3v Apr 1, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

T4rk1n Mar 31, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

T4rk1n left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Adjusting memoization on the `DashWrapper` to be utilized #3248

Adjusting memoization on the `DashWrapper` to be utilized #3248

BSd3v commented Mar 26, 2025 •

edited

Loading

BSd3v commented Mar 26, 2025 •

edited

Loading