granchild rendering when its prop not change

Question

I'm using react functional component in order to render 3 levels of component. The child is depent on props being passed by the grandparent. in my exanple below,, Child2 is keep rendering even only props.child1 is being updated. is there any way to avoid rendering of Child2 in case props.child2 value never changed? what is the best practice for this kind of scenario?

I'm not using redux, onlu hooks.

 const Prandparent = () => {
return (
    <Parent child1={props.child1}
        child2={props.child2} />
 )

};

const Parent = () => {
        return (
            <div>
                <Child1 reportElasticLog={props.child1} />
                <Child2 reportElasticLog={props.child2} />
            </div>
         );
    };

Thanks,

You can use `React.memo()`, refer to this QA https://stackoverflow.com/a/60388915/11872246 — keikai, Mar 30 '20 at 12:46

score 0 · Answer 1 · answered Mar 30 '20 at 15:01

You need to add React.memo to those components https://reactjs.org/docs/react-api.html#reactmemo

Be careful and add React.memo to the entire subtree of components, following the note from PureComponent (which is similar): https://reactjs.org/docs/react-api.html#reactpurecomponent

Furthermore, React.PureComponent’s shouldComponentUpdate() skips prop 
updates for the whole component subtree. Make sure all the children 
components are also “pure”.

granchild rendering when its prop not change

1 Answers1