Aus dem Kurs: React Grundkurs

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 24.700 Kurse von Branchenfachleuten.

useMemo bzw. useCallback

useMemo bzw. useCallback – Tutorial zu React.js

Aus dem Kurs: React Grundkurs

useMemo bzw. useCallback

In dieser Lektion lernen wir die Hooks useCallback und useMemo kennen. Ich zeige Ihnen außerdem, wie Sie analog zu shouldComponentUpdate das Update Ihrer Function Component steuern können. Wir bauen dazu unsere Countdown Component etwas um. In Schritt 1 wollen wir zuerst die Funktionslogik auslagern, die hier innerhalb von setTimeout steht. Der triviale Ansatz ist dazu einfach, die Funktion außen zu definieren und innen zu verwenden. Jedes Mal, wenn sich also der Countdown Value ändert, wird die Funktion innerhalb von useEffect aufgerufen und diese greift wiederum auf unsere timeoutFunc zu. Unsere timeoutFunc wird sowieso bei jedem Aufruf neu erzeugt und hat deswegen stets auch die korrekte Referenz. Das permanente neu Erzeugen können wir jedoch auch außerhalb vom eigentlichen useEffect optimieren. Dazu verwenden wir useCallback. useCallback nimmt, wie auch useEffect, eine Funktion entgegen. Im Gegensatz zu useEffect wird diese Funktion hier aber nicht jedes Mal aufgerufen, wenn…

Inhalt