The Useless UseCallback

9 months ago

The article discusses the overuse and often unnecessary application of `useCallback` and `useMemo` in React for performance optimization.
Memoization is primarily used for two reasons: performance optimization to avoid unnecessary re-renders and to prevent effects from firing too often by maintaining referential stability.
The article highlights scenarios where memoization is pointless, such as when passing callbacks to non-memoized components or React built-in components that don't rely on referential stability.
A common pitfall is using non-primitive props as dependencies in internal hooks, which can break memoization if the props aren't stable, leading to unnecessary re-renders or effect executions.
The article provides a real-life example from the Sentry codebase where nested dependencies break memoization chains, making the initial memoizations useless.
Alternatives to excessive memoization are suggested, including the 'Latest Ref Pattern' and the upcoming React feature `useEffectEvent`, which aims to simplify managing dependencies in effects without manual memoization.
The author advocates for reducing reliance on memoization due to its complexity and fragility, suggesting that future compiler optimizations or React features could handle these cases more effectively.

Hasty Briefsbeta