Merge pull request #3570 from BSd3v/fix-react-state-parent-render-2

Fixes components to remount when passed from a parent object

Author: T4rk1n

dash/dash-renderer/src/actions/constants.js

@@ -10,7 +10,8 @@ const actionList = {
     ON_ERROR: 1,
     SET_HOOKS: 1,
     INSERT_COMPONENT: 1,
-    REMOVE_COMPONENT: 1
+    REMOVE_COMPONENT: 1,
+    RESET_COMPONENT_STATE: 1
 };
 
 export const getAction = action => {

dash/dash-renderer/src/actions/index.js

@@ -22,6 +22,9 @@ export const insertComponent = createAction(getAction('INSERT_COMPONENT'));
 export const removeComponent = createAction(getAction('REMOVE_COMPONENT'));
 
 export const onPropChange = createAction(getAction('ON_PROP_CHANGE'));
+export const resetComponentState = createAction(
+    getAction('RESET_COMPONENT_STATE')
+);
 
 export function updateProps(payload) {
     return (dispatch, getState) => {

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

@@ -49,6 +49,17 @@ const layoutHashes = (state = {}, action) => {
             },
             state
         );
+    } else if (action.type === 'RESET_COMPONENT_STATE') {
+        const {itempath} = action.payload;
+        if (itempath) {
+            const prefixStr = stringifyPath(itempath);
+            // Remove all hashes for keys starting with prefixStr
+            return Object.fromEntries(
+                Object.entries(state).filter(
+                    ([key]) => !key.startsWith(prefixStr)
+                )
+            );
+        }
     }
     return state;
 };

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

@@ -1,4 +1,10 @@
-import React, {useCallback, MutableRefObject, useRef, useMemo} from 'react';
+import React, {
+    useCallback,
+    MutableRefObject,
+    useRef,
+    useMemo,
+    useEffect
+} from 'react';
 import {
     path,
     concat,
@@ -21,7 +27,12 @@ import {useSelector, useDispatch, batch} from 'react-redux';
 import ComponentErrorBoundary from '../components/error/ComponentErrorBoundary.react';
 import {DashLayoutPath, UpdatePropsPayload} from '../types/component';
 import {DashConfig} from '../config';
-import {notifyObservers, onError, updateProps} from '../actions';
+import {
+    notifyObservers,
+    onError,
+    updateProps,
+    resetComponentState
+} from '../actions';
 import {getWatchedKeys, stringifyId} from '../actions/dependencies';
 import {
     createElement,
@@ -65,6 +76,7 @@ function DashWrapper({
     const dispatch = useDispatch();
     const memoizedKeys: MutableRefObject<MemoizedKeysType> = useRef({});
     const newRender = useRef(false);
+    const freshRenders = useRef(0);
     const renderedPath = useRef<DashLayoutPath>(componentPath);
     let renderComponent: any = null;
     let renderComponentProps: any = null;
@@ -85,6 +97,7 @@ function DashWrapper({
         if (_newRender) {
             newRender.current = true;
             renderH = 0;
+            freshRenders.current += 1;
             if (renderH in memoizedKeys.current) {
                 delete memoizedKeys.current[renderH];
             }
@@ -432,6 +445,16 @@ function DashWrapper({
         return props;
     };
 
+    useEffect(() => {
+        if (_newRender) {
+            dispatch(
+                resetComponentState({
+                    itempath: componentPath
+                })
+            );
+        }
+    }, [_newRender]);
+
     const hydrateFunc = () => {
         if (newRender.current) {
             renderComponent = _passedComponent;
@@ -498,6 +521,7 @@ function DashWrapper({
             }
             error={_dashprivate_error}
             dispatch={dispatch}
+            key={freshRenders.current}
         >
             <DashContextProvider componentPath={componentPath}>
                 {React.isValidElement(hydrated) ? hydrated : <div />}

tests/integration/renderer/test_redraw.py

@@ -29,6 +29,11 @@ def on_click(_):
 
     dash_duo.wait_for_text_to_equal("#counter", "1")
     dash_duo.find_element("#redraw").click()
-    dash_duo.wait_for_text_to_equal("#counter", "2")
+    # dash_duo.wait_for_text_to_equal("#counter", "2")
+    # time.sleep(1)
+    # dash_duo.wait_for_text_to_equal("#counter", "2")
+
+    ## the above was changed due to a mechanism change that generates a new React component, thus resetting the counter
+    dash_duo.wait_for_text_to_equal("#counter", "1")
     time.sleep(1)
-    dash_duo.wait_for_text_to_equal("#counter", "2")
+    dash_duo.wait_for_text_to_equal("#counter", "1")