Как сделать дочерний компонент более оптимизированным, чтобы он не рендерился при наборе текста в input?

Проблема лишних ререндеров

В React при изменении состояния родительского компонента (например, при вводе текста в input) все его дочерние компоненты по умолчанию перерендериваются. Это может привести к проблемам производительности, особенно если дочерний компонент выполняет тяжелые вычисления или содержит сложную вложенность.

Решение с React.memo

React.memo — это компонент высшего порядка (HOC), который запоминает результат рендеринга. Он сравнивает новые пропсы с предыдущими с помощью поверхностного сравнения. Если пропсы не изменились, React.memo пропускает ререндер и использует закешированный результат.

import React, { useState, useCallback } from 'react';

const ExpensiveChild = React.memo(({ onClick }) => {
  console.log('Child rendered');
  return Click me;
});

function Parent() {
  const [text, setText] = useState('');
  
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

  return (
    
       setText(e.target.value)} />
      
    
  );
}

Важность useCallback

Если передавать функцию напрямую (без useCallback), при каждом рендере родителя будет создаваться новая ссылка на функцию. React.memo увидит изменение пропса onClick и выполнит ререндер, несмотря на обертку. useCallback гарантирует, что ссылка на функцию останется той же, если зависимости не изменились.

Вывод

Используйте React.memo для дочерних компонентов, которые не должны реагировать на изменения состояния родителя, и комбинируйте его с useCallback для функций-пропсов. Это стандартный подход для оптимизации производительности React-приложений, особенно при работе с формами, списками или анимациями.