> Как оптимизировать React компонент, чтобы Child компонент не перерендеривался при вводе текста? (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Т-Банк

Стек: React

> Пример ответа

Для предотвращения перерендера дочернего компонента при вводе текста в родителе можно использовать несколько подходов:

React.memo - оберните Child в React.memo, чтобы он перерендеривался только при изменении пропсов:

JSX
const Child = React.memo(({ data }) => {
  return <div>{data}</div>;
});

useMemo/useCallback - если в Child передаются функции или объекты, стабилизируйте их:

JSX
const handleClick = useCallback(() => {}, []);
const config = useMemo(() => ({ key: 'value' }), []);

Разделение состояния - вынесите инпут в отдельный компонент, чтобы его состояние не влияло на родителя:

JSX
function Parent() {
  return (
    <>
      <InputField />
      <Child data={someData} />
    </>
  );
}

children prop - передавайте Child как children, если он не зависит от состояния:

JSX
function Parent({ children }) {
  const [text, setText] = useState('');
  return (
    <>
      <input value={text} onChange={e => setText(e.target.value)} />
      {children}
    </>
  );
}

useRef - для простых случаев, когда не нужно перерендеривать родителя:

JSX
const inputRef = useRef(null);
const handleSubmit = () => console.log(inputRef.current.value);

Выбор метода зависит от архитектуры: для стабильных пропсов - React.memo, для сложных форм - разделение компонентов, для производительности - useCallback/useMemo.