¿Cuándo recurrirías a useMemo frente a useCallback, y cuándo te saltarías los dos?

useMemo cachea un valor calculado entre renders; useCallback cachea una referencia a una función. Son el mismo mecanismo, ya que useCallback(fn, deps) es useMemo(() => fn, deps). Úsalos cuando un valor sea de verdad caro de calcular, o cuando una referencia sea dependencia de un efecto o una prop hacia un hijo memoizado. Sáltatelos con valores baratos, porque llevar esa contabilidad no es gratis.

Son la misma herramienta con dos disfraces. useMemo cachea un valor, useCallback cachea una función, y por debajo useCallback no es más que useMemo devolviendo esa función. Solo recurro a cualquiera de los dos por dos motivos. Uno, que el cálculo sea de verdad caro, como ordenar y agrupar unos cuantos miles de filas. Dos, que la identidad importe, porque es dependencia de un efecto o una prop que entra en un componente envuelto en React.memo. Si no se cumple ninguno, lo dejo estar, porque cada llamada a memo sigue costando una comparación y algo de memoria, y ensucia la lectura del código. Lo primero que hago en realidad es abrir el React Profiler y ver si ese re-render cuesta algo. La mayoría de las veces el arreglo real no es un memo, es mover el estado más cerca de donde se usa para que medio árbol deje de renderizarse. Y en proyectos nuevos con el React Compiler activado, buena parte de esa memoización manual desaparece, cosa que agradezco; el código se lee mejor sin ella.