Будет ли рендериться дочерний компонент при наборе текста в input и по какой причине?

Почему происходит повторный рендер дочернего компонента?

Когда пользователь вводит текст в input, обработчик события onChange обновляет состояние родительского компонента с помощью setState (например, через useState). Изменение состояния запускает повторный рендер родителя, и React по умолчанию рекурсивно перерисовывает все его дочерние компоненты, даже если их пропсы не изменились. Это стандартное поведение React для обеспечения актуальности UI.

Пример кода

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

function Child() {
  console.log('Child re-rendered');
  return <div>Static content</div>;
}

В этом примере при каждом наборе текста в консоли будет появляться сообщение 'Child re-rendered', что подтверждает повторный рендер дочернего компонента.

Как это применяется на практике?

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

Вывод

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