Primeiro meça, depois corrija a causa real — não espalhe useMemo por toda parte na tentativa.
Use o React DevTools Profiler (ative "Highlight updates when components render"). Ele mostra quais componentes foram re-renderizados e por quê (props mudaram, state mudou, pai foi renderizado, context mudou).
1. Novos props de objeto/array/função a cada renderização burlam React.memo:
// ❌ new function + new object every render
<Child onClick={() => go()} style={{ color: "red" }} />
// ✅ stabilize them
const onClick = useCallback(() => go(), []);
const style = useMemo(() => ({ color: "red" }), []);
<Child onClick={onClick} style={style} />
2. Valor de context recriado a cada renderização → todos os consumidores re-renderizam. Memoize o value ou divida contextos.
3. State colocado muito alto. Abaixar o state para que menos componentes dependam dele é frequentemente a maior vitória:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Trabalho custoso na renderização → envolva em useMemo.
Re-renderes são geralmente baratos — React é rápido. A maioria das "otimizações" adiciona complexidade sem benefício mensurável. Prefira correções estruturais (colocando state junto, virtualização de lista para milhares de linhas) em vez de espalhar memos. Otimize os hotspots específicos que o profiler revela, e meça novamente para confirmar que a correção realmente ajudou.