рендеринг внука, когда его опора не меняется

Question

Я использую функциональный компонент реагирования, чтобы визуализировать 3 уровня компонента. Ребенок зависит от реквизита, переданного прародителем. в моем примере ниже, Child2 продолжает рендеринг, даже когда обновляется только props.child1. Есть ли способ избежать рендеринга Child2 в случае, если значение props.child2 никогда не менялось? Какова наилучшая практика для такого рода сценариев?

Я не использую приставку 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>
         );
    };

Спасибо,

Answer 1

Вам необходимо добавить React.memo к этим компонентам https://reactjs.org/docs/react-api.html#reactmemo

Будьте осторожны и добавьте React.memo ко всему поддереву компонентов, следуя примечанию от PureComponent (которое является аналогично): 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”.