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

function MyComponent({ onClick }) {
  const handleClick = () => {
    console.log('clicked');
  };

  return <ChildComponent onClick={handleClick} />;
}

Здесь handleClick создаётся заново при каждом рендере, из-за чего ChildComponent получает новый проп onClick и перерендеривается.

Как исправить:

Использовать useCallback для мемоизации функций:

import React, { useCallback } from 'react';

function MyComponent({ onClick }) {
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);

  return <ChildComponent onClick={handleClick} />;
}

Аналогично, для объектов использовать useMemo.
Также можно обернуть дочерний компонент в React.memo, чтобы предотвратить лишние рендеры, если пропсы не изменились.

Таким образом, мемоизация предотвращает создание новых ссылок на функции и объекты, что уменьшает количество ненужных перерендеров.

Приведите пример плохого функционального компонента, который вызывает лишние перерендеры, и объясните как это исправить.