Skip to content

Commit 8f585b5

Browse files
authored
Merge pull request #3248 from BSd3v/performance-adjust
Adjusting memoization on the `DashWrapper` to be utilized
2 parents 0bd4452 + cde9acf commit 8f585b5

File tree

13 files changed

+553
-331
lines changed

13 files changed

+553
-331
lines changed
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { useState, useEffect } from "react";
2+
import PropTypes from "prop-types";
3+
4+
const RenderType = (props) => {
5+
const onClick = () => {
6+
props.setProps({n_clicks: (props.n_clicks || 0) + 1})
7+
}
8+
9+
return <div id={props.id}>
10+
<span>{props.dashRenderType}</span>
11+
<button onClick={onClick}>Test Internal</button>
12+
</div>;
13+
};
14+
15+
RenderType.propTypes = {
16+
id: PropTypes.string,
17+
dashRenderType: PropTypes.string,
18+
n_clicks: PropTypes.number,
19+
setProps: PropTypes.func
20+
};
21+
22+
RenderType.dashRenderType = true;
23+
export default RenderType;

@plotly/dash-test-components/src/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import MyPersistedComponentNested from './components/MyPersistedComponentNested'
77
import StyledComponent from './components/StyledComponent';
88
import WidthComponent from './components/WidthComponent';
99
import ComponentAsProp from './components/ComponentAsProp';
10+
import RenderType from './components/RenderType';
1011

1112
import DrawCounter from './components/DrawCounter';
1213
import AddPropsComponent from "./components/AddPropsComponent";
@@ -32,4 +33,5 @@ export {
3233
ShapeOrExactKeepOrderComponent,
3334
ArrayOfExactOrShapeWithNodePropAssignNone,
3435
ExternalComponent,
36+
RenderType
3537
};

CHANGELOG.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,17 @@ This project adheres to [Semantic Versioning](https://semver.org/).
66

77
## Changed
88
- [#3113](https://github.com/plotly/dash/pull/3113) Adjusted background polling requests to strip the data from the request, this allows for context to flow as normal. This addresses issue [#3111](https://github.com/plotly/dash/pull/3111)
9+
- [#3248](https://github.com/plotly/dash/pull/3248) Changes to rendering logic:
10+
- if it is first time rendering, render from the parent props
11+
- listens only to updates for that single component, no children listening to parents
12+
- if parents change a prop with components as props, only the prop changed re-renders, this is then forced on all children regardless of whether or not the props changed
913

1014
## Fixed
1115
- [#3251](https://github.com/plotly/dash/pull/3251). Prevented default styles from overriding `className_*` props in `dcc.Upload` component.
1216

17+
## Added
18+
- [#3248](https://github.com/plotly/dash/pull/3248) added new `dashRenderType` to determine why the component layout was changed (`internal`, `callback`, `parent`, `clientsideApi`):
19+
- this can be utilized to keep from rendering components by the component having `dashRenderType` defined as a prop, and the `dashRenderType = true` must be set on the component, eg (`Div.dashRenderType = true`)
1320

1421
## [3.0.1] - 2025-03-24
1522

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -360,7 +360,8 @@ function updateComponent(component_id: any, props: any, cb: ICallbackPayload) {
360360
dispatch(
361361
updateProps({
362362
props,
363-
itempath: componentPath
363+
itempath: componentPath,
364+
renderType: 'callback'
364365
})
365366
);
366367
dispatch(notifyObservers({id: component_id, props}));

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,12 +63,12 @@ const observer: IStoreObserverDefinition<IStoreState> = {
6363
// In case the update contains whole components, see if any of
6464
// those components have props to update to persist user edits.
6565
const {props} = applyPersistence({props: updatedProps}, dispatch);
66-
6766
dispatch(
6867
updateProps({
6968
itempath,
7069
props,
71-
source: 'response'
70+
source: 'response',
71+
renderType: 'callback'
7272
})
7373
);
7474

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

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const apiRequests = [
2727
'loginRequest'
2828
];
2929

30-
function layoutHashes(state = {}, action) {
30+
const layoutHashes = (state = {}, action) => {
3131
if (
3232
includes(action.type, [
3333
'UNDO_PROP_CHANGE',
@@ -37,12 +37,21 @@ function layoutHashes(state = {}, action) {
3737
) {
3838
// Let us compare the paths sums to get updates without triggering
3939
// render on the parent containers.
40-
const strPath = stringifyPath(action.payload.itempath);
41-
const prev = pathOr(0, [strPath], state);
42-
return assoc(strPath, prev + 1, state);
40+
const actionPath = action.payload.itempath;
41+
const strPath = stringifyPath(actionPath);
42+
const prev = pathOr(0, [strPath, 'hash'], state);
43+
state = assoc(
44+
strPath,
45+
{
46+
hash: prev + 1,
47+
changedProps: action.payload.props,
48+
renderType: action.payload.renderType
49+
},
50+
state
51+
);
4352
}
4453
return state;
45-
}
54+
};
4655

4756
function mainReducer() {
4857
const parts = {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,17 @@ function set_props(
1616
for (let y = 0; y < ds.length; y++) {
1717
const {dispatch, getState} = ds[y];
1818
let componentPath;
19+
const {paths} = getState();
1920
if (!Array.isArray(idOrPath)) {
20-
const {paths} = getState();
2121
componentPath = getPath(paths, idOrPath);
2222
} else {
2323
componentPath = idOrPath;
2424
}
2525
dispatch(
2626
updateProps({
2727
props,
28-
itempath: componentPath
28+
itempath: componentPath,
29+
renderType: 'clientsideApi'
2930
})
3031
);
3132
dispatch(notifyObservers({id: idOrPath, props}));

0 commit comments

Comments
 (0)