reverting to using memo, but only memoizing on the hash

Author: BSd3v

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

@@ -1,4 +1,4 @@
-import React, {useMemo, useCallback, memo, useState, useEffect} from 'react';
+import React, {useCallback, memo, useMemo} from 'react';
 import {
     path,
     concat,
@@ -43,19 +43,13 @@ type DashWrapperProps = {
     _dashprivate_error?: any;
 };
 
-// Define the type for your state
-type HydratedState = React.DetailedReactHTMLElement<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  HTMLInputElement
-> | null;
 
 function DashWrapper({
     componentPath,
     _dashprivate_error,
     ...extras
 }: DashWrapperProps) {
     const dispatch = useDispatch();
-    const [hydrated, setHydrated] = useState<HydratedState>(null);
 
     // Get the config for the component as props
     const config: DashConfig = useSelector(selectConfig);
@@ -66,22 +60,6 @@ function DashWrapper({
         selectDashPropsEqualityFn
     );
 
-    const dependenciesStable = useMemo(() => {
-        return JSON.stringify(
-            {
-                h,
-                componentPath,
-                componentProps
-            }
-        )
-    }, [
-        JSON.stringify({
-            componentProps,
-            componentPath,
-            h
-        })
-    ])
-
     const setProps = (newProps: UpdatePropsPayload) => {
         const {id} = componentProps;
         const {_dash_error, ...restProps} = newProps;
@@ -393,44 +371,33 @@ function DashWrapper({
         return props;
     };
 
-    useEffect(() => {
-        let comp;
+    const hydrated = useMemo(() => {
         if (!component) {
-            return
+            return;
         }
+
         const element = Registry.resolve(component);
-        const hydratedProps = setHydratedProps()
+        const hydratedProps = setHydratedProps();
+
         let hydratedChildren: any;
         if (componentProps.children !== undefined) {
-            hydratedChildren = wrapChildrenProp(componentProps.children, [
-                'children'
-            ]);
-        }
-        if (config.props_check) {
-            comp = (
-                <CheckedComponent
-                    element={element}
-                    props={hydratedProps}
-                    component={component}
-                >
-                    {createElement(
-                        element,
-                        hydratedProps,
-                        extraProps,
-                        hydratedChildren
-                    )}
-                </CheckedComponent>
-            );
+            hydratedChildren = wrapChildrenProp(componentProps.children, ['children']);
         }
 
-        comp = createElement(
-            element,
-            hydratedProps,
-            extraProps,
-            hydratedChildren
+        const rendered = config.props_check ? (
+            <CheckedComponent
+                element={element}
+                props={hydratedProps}
+                component={component}
+            >
+                {createElement(element, hydratedProps, extraProps, hydratedChildren)}
+            </CheckedComponent>
+        ) : (
+            createElement(element, hydratedProps, extraProps, hydratedChildren)
         );
-        setHydrated(comp)
-    }, [dependenciesStable]);
+
+        return rendered
+    }, [h]);
 
     if (!component) {
         return null
@@ -448,7 +415,7 @@ function DashWrapper({
             dispatch={dispatch}
         >
             <DashContextProvider componentPath={componentPath}>
-                {hydrated ? hydrated : <></>}
+                {hydrated ? hydrated : <div/>}
             </DashContextProvider>
         </ComponentErrorBoundary>
     );