Wann greifst du zu useMemo statt useCallback, und wann lässt du beides weg?

useMemo cacht einen berechneten Wert zwischen Renders, useCallback cacht eine Funktionsreferenz. Es ist derselbe Mechanismus, denn useCallback(fn, deps) ist useMemo(() => fn, deps). Greif dazu, wenn ein Wert wirklich teuer zu berechnen ist oder wenn eine Referenz Dependency eines Effects oder Prop einer memoisierten Child-Komponente ist. Bei billigen Werten lass beides weg, denn die Buchführung ist nicht umsonst.

Das ist dasselbe Werkzeug mit zwei Hüten. useMemo cacht einen Wert, useCallback eine Funktion, und intern ist useCallback nur useMemo, das diese Funktion zurückgibt. Ich greife aus genau zwei Gründen dazu. Erstens: Die Berechnung ist wirklich teuer, etwa ein paar tausend Zeilen sortieren und gruppieren. Zweitens: Die Identität des Dings zählt, weil es Dependency eines Effects oder Prop einer in React.memo verpackten Komponente ist. Trifft keins von beidem zu, lasse ich es, denn jeder Memo-Aufruf kostet trotzdem einen Vergleich und etwas Speicher und macht den Code beim Lesen lauter. Was ich zuerst mache, ist den React Profiler aufmachen und schauen, ob das Re-Render überhaupt etwas kostet. Meistens ist der echte Fix kein Memo, sondern State näher an die Stelle zu ziehen, wo er benutzt wird, damit der halbe Baum aufhört zu rendern. Und in neueren Projekten mit aktiviertem React Compiler fällt ein Großteil dieser manuellen Memoization weg, worüber ich froh bin, der Code liest sich ohne sie besser.