🧠 useCallback — не всегда оптимизация, иногда вред

Многие считают useCallback must-have для всех функций в компонентах. Но это антипаттерн, если применять его без понимания.

📉 Когда useCallback не нужен:
- Функция не передаётся в пропсы дочерним компонентам;
- Нет реального выигрыша от мемоизации (см. профилировщик);
- Компонент и так редко рендерится.

📌 Плохо:

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

  return <button onClick={handleClick}>Click</button>;
};

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

  return <button onClick={handleClick}>Click</button>;
};

Frontend разработчик

🧠 useCallback — не всегда оптимизация, иногда вред

Многие считают useCallback must-have для всех функций в компонентах. Но это антипаттерн, если применять его без понимания.

📉 Когда useCallback не нужен:
- Функция не передаётся в пропсы дочерним компонентам;
- Нет реального выигрыша от мемоизации (см. профилировщик);
- Компонент и так редко рендерится.

📌 Плохо:

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

  return <button onClick={handleClick}>Click</button>;
};

✅ Хорошо:

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

  return <button onClick={handleClick}>Click</button>;
};

🚀 useCallback создаёт объект в памяти и усложняет читаемость. Используй его, только если действительно экономит ресурсы или предотвращает лишние ререндеры.

👉 @frontend_1

hottg.com/frontend_1/3956

1.8K viewsApr 18 at 08:42