Оптимизация и мемоизация на стыке родительского и дочернего компонентов в React (или аналогичных фреймворках) направлена на минимизацию лишних рендеров и вычислений.

Основные подходы:

React.memo для дочернего компонента — предотвращает повторный рендер, если пропсы не изменились по поверхностному сравнению.
useMemo и useCallback в родительском компоненте — мемоизируют вычисления и функции, которые передаются в дочерний, чтобы не создавать новые объекты/функции при каждом рендере.
Передача примитивных значений или мемоизированных объектов — если передавать каждый раз новый объект или функцию, React.memo не сработает, так как сравнение пропсов будет ложным.

Пример:

const Child = React.memo(({ onClick, data }) => {
  console.log('Child render');
  return <button onClick={onClick}>{data.label}</button>;
});

function Parent() {
  const [count, setCount] = React.useState(0);

  // useCallback мемоизирует функцию, чтобы ссылка не менялась
  const handleClick = React.useCallback(() => {
    setCount(c => c + 1);
  }, []);

  // useMemo мемоизирует объект data
  const data = React.useMemo(() => ({ label: `Count: ${count}` }), [count]);

  return <Child onClick={handleClick} data={data} />;
}

Таким образом, Child не будет перерендериваться без необходимости, так как пропсы не меняют ссылки без реальной причины.

Важно: мемоизация — это инструмент, который помогает оптимизировать, но не всегда нужен. Нужно профилировать приложение, чтобы понять, где она действительно полезна.

Расскажи о вариантах оптимизации и мемоизации на стыке родительского и дочернего компонентов