From ae98219045a8645da083ddf31a0bd26805988602 Mon Sep 17 00:00:00 2001 From: Vitali Zaidman Date: Fri, 12 Apr 2019 20:52:38 +0300 Subject: [PATCH] memoize renderedWrappedComponent separately to prevent this step from being performed when redundant (#1234) --- src/components/connectAdvanced.js | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/src/components/connectAdvanced.js b/src/components/connectAdvanced.js index 0678a8007..c1f98f1b2 100644 --- a/src/components/connectAdvanced.js +++ b/src/components/connectAdvanced.js @@ -375,14 +375,14 @@ export default function connectAdvanced( // Now that all that's done, we can finally try to actually render the child component. // We memoize the elements for the rendered child component as an optimization. + const renderedWrappedComponent = useMemo( + () => , + [forwardedRef, WrappedComponent, actualChildProps] + ) + // If React sees the exact same element reference as last time, it bails out of re-rendering // that child, same as if it was wrapped in React.memo() or returned false from shouldComponentUpdate. const renderedChild = useMemo(() => { - // Render the actual child component - const renderedWrappedComponent = ( - - ) - if (shouldHandleStateChanges) { // If this component is subscribed to store updates, we need to pass its own // subscription instance down to our descendants. That means rendering the same @@ -395,13 +395,7 @@ export default function connectAdvanced( } return renderedWrappedComponent - }, [ - ContextToUse, - WrappedComponent, - actualChildProps, - forwardedRef, - overriddenContextValue - ]) + }, [ContextToUse, renderedWrappedComponent, overriddenContextValue]) return renderedChild }