Неэффективный useCallback в React‑компоненте

Условие

Устраните ошибку и улучшите процесс рендеринга.

const Button = memo(function Button({handleClick}: {handleClick: React.MouseEventHandler}) {
  console.log('render');
  return <button onClick={handleClick}>Click me</button>
});

export default function App(){
  const [visible, setVisible] = useState(false);

  const toggleVisibility = useCallback(() => {
    setVisible(v => !v);
  }, []);

  return (
    <>
      <Button handleClick={toggleVisibility}/>
      {visible && (<div>lorem ipsum</div>)}
    </>
  );
}

Ответ

В показанном варианте useCallback уже использован корректно: функция стабильна, updater не читает visible из замыкания, Button обёрнут в memo. Явной ошибки оптимизации здесь нет.

При изменении visible рендерится App, но Button получает ту же ссылку handleClick, поэтому memo может пропустить повторный рендер. Добавление visible в зависимости useCallback здесь не требуется: функциональная форма setVisible(v => !v) получает актуальное состояние.

Нужно лишь обеспечить импорты memo, useState, useCallback и корректную TypeScript/JSX-настройку проекта. React.memo — оптимизация, не гарантия точного количества вызовов; Strict Mode в разработке также влияет на наблюдаемые логи. Не следует заменять уже стабильный callback новой inline-обёрткой.