adjusting to only render children components as 'new' if it is a new 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.

Author: BSd3v

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

@@ -365,7 +365,8 @@ function updateComponent(component_id: any, props: any, cb: ICallbackPayload) {
                 props,
                 itempath: componentPath,
                 component,
-                config
+                config,
+                renderType: 'callback'
             })
         );
         dispatch(notifyObservers({id: component_id, props}));

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

@@ -72,7 +72,8 @@ const observer: IStoreObserverDefinition<IStoreState> = {
                     props,
                     source: 'response',
                     component,
-                    config
+                    config,
+                    renderType: 'callback'
                 })
             );
 

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

@@ -30,8 +30,9 @@ export const apiRequests = [
 function adjustHashes(state, action) {
     const actionPath = action.payload.itempath;
     const strPath = stringifyPath(actionPath);
-    const prev = pathOr(0, [strPath, 0], state);
-    state = assoc(strPath, [prev + 1, action.payload.props], state);
+    const prev = pathOr(0, [strPath, 'hash'], state);
+    state = assoc(strPath, {hash: prev + 1,
+    changedProps: action.payload.props, renderType: action.payload.renderType}, state);
     return state;
 }
 

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

@@ -30,7 +30,8 @@ function set_props(
                 props,
                 itempath: componentPath,
                 component,
-                config
+                config,
+                renderType: 'clientsideApi'
             })
         );
         dispatch(notifyObservers({id: idOrPath, props}));

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

@@ -14,11 +14,7 @@ import {
     dissoc,
     assoc,
     mapObjIndexed,
-    type,
-    reduce,
-    difference,
-    intersection,
-    filter
+    type
 } from 'ramda';
 import {useSelector, useDispatch, batch} from 'react-redux';
 
@@ -39,43 +35,6 @@ import {
 import CheckedComponent from './CheckedComponent';
 import {DashContextProvider} from './DashContext';
 
-// Define types for the input objects and the output differences
-type Dictionary = Record<string, any>;
-
-interface Difference {
-    obj1: any;
-    obj2: any;
-}
-
-const findDifferences = (
-    obj1: Dictionary,
-    obj2: Dictionary
-): Record<string, Difference> => {
-    const commonKeys = intersection(keys(obj1), keys(obj2));
-
-    const differingKeys = filter(
-        (key: string) => !equals(obj1[key], obj2[key]),
-        commonKeys
-    ) as string[];
-
-    const keysOnlyInObj2 = difference(keys(obj2), keys(obj1));
-
-    const differences: Record<string, Difference> = reduce(
-        (acc: Record<string, Difference>, key: string) => {
-            acc[key] = {obj1: obj1[key], obj2: obj2[key]};
-            return acc;
-        },
-        {},
-        differingKeys as string[]
-    );
-
-    keysOnlyInObj2.forEach(key => {
-        differences[key] = {obj1: undefined, obj2: obj2[key]};
-    });
-
-    return differences;
-};
-
 type DashWrapperProps = {
     /**
      * Path of the component in the layout.
@@ -113,7 +72,7 @@ function DashWrapper({
 
     // Select both the component and it's props.
     // eslint-disable-next-line prefer-const
-    let [component, componentProps, h, changedProps] = useSelector(
+    let [component, componentProps, h, changedProps, renderType] = useSelector(
         selectDashProps(componentPath),
         selectDashPropsEqualityFn
     );
@@ -135,13 +94,6 @@ function DashWrapper({
     }, [_newRender]);
     /* eslint-enable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
 
-    let propDifferences: any = {};
-    if (memoizedProps.current) {
-        propDifferences = findDifferences(
-            memoizedProps.current,
-            componentProps
-        );
-    }
     memoizedProps.current = componentProps;
 
     const setProps = (newProps: UpdatePropsPayload) => {
@@ -198,7 +150,8 @@ function DashWrapper({
                         props: changedProps,
                         itempath: componentPath,
                         component,
-                        config
+                        config,
+                        renderType: 'internal'
                     })
                 );
             });
@@ -261,6 +214,8 @@ function DashWrapper({
 
     const extraProps = {
         setProps,
+        rendertype: newRender.current ? 'parent' : (
+            changedProps ? renderType : 'parent'),
         ...extras
     };
 
@@ -277,15 +232,11 @@ function DashWrapper({
             const childrenProp: string = childrenProps[i];
             let childNewRender = 0;
             if (
-                childrenProp
-                    .split('.')[0]
-                    .replace('[]', '')
-                    .replace('{}', '') in propDifferences ||
                 childrenProp
                     .split('.')[0]
                     .replace('[]', '')
                     .replace('{}', '') in changedProps ||
-                newRender.current
+                newRender.current || !h
             ) {
                 childNewRender = Date.now();
             }
@@ -498,7 +449,7 @@ function DashWrapper({
             hydratedChildren = wrapChildrenProp(
                 componentProps.children,
                 ['children'],
-                'children' in propDifferences ||
+                    !h ||
                     newRender.current ||
                     'children' in changedProps
                     ? Date.now()

dash/dash-renderer/src/wrapper/selectors.ts

@@ -1,7 +1,7 @@
 import {DashLayoutPath, DashComponent, BaseDashProps} from '../types/component';
 import {getComponentLayout, stringifyPath} from './wrapping';
 
-type SelectDashProps = [DashComponent, BaseDashProps, number, object];
+type SelectDashProps = [DashComponent, BaseDashProps, number, object, string];
 
 export const selectDashProps =
     (componentPath: DashLayoutPath) =>
@@ -15,11 +15,13 @@ export const selectDashProps =
         const hash = state.layoutHashes[strPath];
         let h = 0;
         let changedProps: object = {};
+        let renderType: string = '';
         if (hash) {
-            h = hash[0];
-            changedProps = hash[1];
+            h = hash['hash'];
+            changedProps = hash['changedProps'];
+            renderType = hash['renderType']
         }
-        return [c, c?.props, h, changedProps];
+        return [c, c?.props, h, changedProps, renderType];
     };
 
 export function selectDashPropsEqualityFn(