Обновлять дочерний SubElement только при чётных значениях счётчика

Условие

Необходимо обеспечить перерисовку компонента SubElement исключительно тогда, когда переданное свойство count имеет чётное значение. При этом менять список пропсов нельзя.

import React, { useState } from "react";

const ParentElement = () => {
    const [counter, setCounter] = useState(0);
    const increase = () => setCounter(prev => prev + 1);
    
    return (
        <>
            Parent: {counter} <br />
            <SubElement clicker={increase} count={counter} />
        </>
    );
};

const SubElement = ({ clicker, count }) => {
    return (
        <>
            Sub: {count} <br />
            <button onClick={clicker}>Increment</button>
        </>
    );
};

Ответ

Для учебного сценария оберните SubElement в memo с пропуском нечётного count и стабилизируйте clicker через useCallback. Набор props при этом не меняется.

// В ParentElement:
const increase = React.useCallback(() => setCounter(value => value + 1), []);

const SubElement = React.memo(function SubElement({ clicker, count }) {
  return <>Sub: {count}<br /><button onClick={clicker}>Increment</button></>;
}, (previous, next) => next.count % 2 !== 0 && previous.clicker === next.clicker);

На нечётном значении ребёнок намеренно показывает предыдущее чётное. Сравнение callback важно для защиты от устаревшего замыкания. Memo — оптимизация, не строгий запрет вызова: собственный state, context и dev-проверки могут вызвать рендер.

Источник: react.dev.