useMemo & useCallback erklärt: zwei React Hooks im Detail

Inhaltsverzeichnis

useMemo (calculateValue, dependencies)
Definition useMemo
Beispiel Code “useMemo”
Ersatz oder Alternativen in React 18
Praxisbeispiel für den Einsatz von “useMemo”
useCallback
Definition useCallback
Beispiel Code “useCallback”
Praxisbeispiel für den Einsatz von “useCallback”
Cloudapp-dev und bevor Sie uns verlassen

React führte die useMemo und useCallback Hooks in React 16.8 ein, das am 6. Februar 2019 veröffentlicht wurde. Im August 2024 sind diese Hooks also fünf Jahre und sechs Monate alt.

Hier ist das GitHub Repo mit dem gesamten Code und darunter der Link zur Beispielwebsite.

Beispielseite für mit integrierter Datenerfassung -> https://nextjs14-kafka-tracking.vercel.app/

useMemo (calculateValue, dependencies)

const cachedValue = useMemo(calculateValue, dependencies)

Definition useMemo

Der useMemo-Hook in React wird verwendet, um die Leistung zu optimieren, indem das Ergebnis einer Funktion in einem Memo gespeichert wird, so dass sie nur neu berechnet wird, wenn sich eine ihrer Abhängigkeiten ändert. Dies ist besonders nützlich für aufwändige Berechnungen, die sonst bei jedem Rendering ausgeführt werden. calculateValue ist eine Funktion, die für Berechnungen innerhalb der Komponente vorgesehen ist.

dependencies ist ein Array mit Werten

Wenn die Komponente erstmals gerendert wird, wird useMemo aufgerufen. Anschließend wird calculateValue immer dann ausgeführt, wenn sich der Wert/die Werte in den Abhängigkeiten ändern. Wenn die Werte in den Abhängigkeiten unverändert bleiben, werden die zwischengespeicherten Daten verwendet, um unnötige Renderings zu vermeiden.

Im Strict Mode ruft React die Berechnungsfunktion zweimal auf, um die Eindeutigkeit der Komponente zu gewährleisten, sodass React-Komponenten bei gleichen Eingaben das gleiche Ergebnis liefern. Dieses Verhalten ist ausschließlich im Entwicklungsmodus aktiv und hat keine Auswirkungen auf die Logik.

Beispiel Code “useMemo”

const calculateValue = (num) => {
  // Some expensive calculation
  return num * 2;
};

function MyComponent({ number }) {
  const memoizedValue = useMemo(() => calculateValue(dependencies), [dependencies]);

  return <div>{memoizedValue}</div>;
}

In diesem Beispiel wird useMemo das Ergebnis von calculateValue nur dann neu berechnen, wenn sich die Abhängigkeiten ändern; andernfalls wird das zuvor zwischengespeicherte Ergebnis zurückgegeben.

Ersatz oder Alternativen in React 18

React 18 bietet keinen direkten Ersatz für useMemo, aber es führt Funktionen wie automatische Stapelverarbeitung und gleichzeitiges Rendern ein, die die Leistung auf andere Weise verbessern können. Dennoch ist useMemo nach wie vor relevant und wird häufig für die Optimierung bestimmter Szenarien verwendet, in denen die Neuberechnung von Werten bei jedem Rendering zu kostspielig wäre.

Die neuen Funktionen in React 18 können dazu beitragen, den Bedarf an Optimierungen wie useMemo in einigen Fällen zu verringern, aber es gibt keine direkte Alternative oder einen Ersatz. useMemo ist weiterhin ein nützliches Werkzeug zur Verwaltung der Leistung.

Praxisbeispiel für den Einsatz von “useMemo”

Nachfolgend finden Sie den Link zu einem früheren Beitrag, in dem ich die useMemo Hooks in einem realen Beispiel zur Erstellung eines benutzerdefinierten Dashboards verwendet habe.

Next.js 14 -Advanced Analytics with Tinybird and integrated Dashboard

ch habe die useMemo-Hooks in allen fünf Dashboard-Komponenten verwendet, um das Datenergebnis zu speichern. Im Beispiel unten von der Funktion useTrend. Wenn sich die [data] „Abhängigkeit“ ändert, wird der useMemo-Hook erneut ausgeführt.

"use client";
import { BarChart } from "@tremor/react";
import Widget from "../Widget";
import useTrend from "@/lib/hooks/use-trend";
import { useMemo } from "react";
import moment from "moment";

export default function TrendWidget() {
  const { data, status, warning } = useTrend();
  const chartData = useMemo(
    () =>
      (data?.data ?? []).map((d) => ({
        Date: moment(d.t).format("HH:mm"),
        "Number of visits": d.visits,
      })),
    [data]
  );

  return (
    <Widget>
      <div className="flex items-center justify-between">
        <Widget.Title>Users in last 30 minutes</Widget.Title>
        <h3 className="text-neutral-64 font-normal text-xl">
          {data?.totalVisits ?? 0}
        </h3>
      </div>
      <Widget.Content
        status={status}
        loaderSize={40}
        noData={!chartData?.length}
        warning={warning?.message}
      >
        <BarChart
          data={chartData}
          index="Date"
          categories={["Number of visits"]}
          colors={["blue"]}
          className="h-32"
          showXAxis={false}
          showYAxis={false}
          showLegend={false}
          showGridLines={false}
        />
      </Widget.Content>
    </Widget>
  );
}

useCallback

const cachedFn = useCallback(fn, dependencies)

Definition useCallback

Ähnlich wie useMemo können Sie auch diesen Hook verwenden, um die Leistung zu optimieren. Der useCallback-Haken merkt sich eine Callback-Funktion und gibt sie zurück.

Beachten Sie, dass der useCallback-Hook die Funktion selbst speichert, nicht ihren Rückgabewert. useMemo speichert den Rückgabewert der Funktion, so dass die Funktion nicht erneut ausgeführt wird. useCallback speichert die Funktionsdefinition oder den Funktionsverweis.

Der useCallback-Hook in React wird zur Memoisierung von Funktionen verwendet, um sicherzustellen, dass eine Funktion nur neu erstellt wird, wenn sich ihre Abhängigkeiten ändern. Dies ist besonders nützlich, wenn Funktionen als Ref an untergeordnete Komponenten übergeben werden, da es unnötige Neuaufrufe dieser untergeordneten Komponenten verhindert, indem es sicherstellt, dass die Funktionsreferenz dieselbe bleibt, sofern nicht erforderlich.

Beispiel Code “useCallback”

function MyComponent({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return <MyComponent onClick={handleClick} />;
}

In diesem Beispiel speichert useCallback die Funktion handleClick. Die Funktion wird nur neu erstellt, wenn sich das Array dependencies (das in diesem Fall leer ist) ändert. Dies hilft dabei, unnötige Neuaufrufe von MyComponent zu vermeiden, wenn die ParentComponent aus Gründen, die nichts mit der handleClick-Funktion zu tun haben, neu aufgerufen wird.

Praxisbeispiel für den Einsatz von “useCallback”

Im folgenden Code verwende ich den „useCallback“-Hook, um den „setDateFilter“ zu setzen, der bei jeder Änderung des from / to Datums aufgerufen wird.

"use client";
import moment from "moment";
import { useRouter, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useMemo, useState } from "react";
import { DateRangePickerValue } from "@tremor/react";
import { DateFilter, dateFormat } from "@/types/date-filter";

export default function useDateFilter() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const params = new URLSearchParams(searchParams.toString());
  const [dateRangePickerValue, setDateRangePickerValue] =
    useState<DateRangePickerValue>();

  const setDateFilter = useCallback(
    ({ from, to, selectValue }: DateRangePickerValue) => {
      const lastDays = selectValue ?? DateFilter.Custom;
      const startDate = from;
      const endDate = to;

      params.set("last_days", lastDays);

      if (lastDays === DateFilter.Custom && startDate && endDate) {
        params.set("start_date", moment(startDate).format(dateFormat));
        params.set("end_date", moment(endDate).format(dateFormat));
      } else {
        params.delete("start_date");
        params.delete("end_date");
      }

      router.push("/dashboard?" + params.toString(), { scroll: false });
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []
  );

  const lastDaysParam = searchParams?.get("last_days") as DateFilter;
  const lastDays: DateFilter =
    typeof lastDaysParam === "string" &&
    Object.values(DateFilter).includes(lastDaysParam)
      ? lastDaysParam
      : DateFilter.Last7Days;

  const { startDate, endDate } = useMemo(() => {
    const today = moment().utc();
    if (lastDays === DateFilter.Custom) {
      const startDateParam = searchParams?.get("start_date") as string;
      const endDateParam = searchParams?.get("end_date") as string;

      const startDate =
        startDateParam ||
        moment(today)
          .subtract(+DateFilter.Last7Days, "days")
          .format(dateFormat);
      const endDate = endDateParam || moment(today).format(dateFormat);

      return { startDate, endDate };
    }

    const startDate = moment(today)
      .subtract(+lastDays, "days")
      .format(dateFormat);
    const endDate =
      lastDays === DateFilter.Yesterday
        ? moment(today)
            .subtract(+DateFilter.Yesterday, "days")
            .format(dateFormat)
        : moment(today).format(dateFormat);

    return { startDate, endDate };
  }, [
    lastDays,
    searchParams,
    // searchParams?.get("start_date"),
    // searchParams?.get("end_date"),
  ]);

  useEffect(() => {
    const vallastDays = lastDays === DateFilter.Custom ? "" : lastDays;
    setDateRangePickerValue({
      from: moment(startDate).toDate(),
      to: moment(endDate).toDate(),
      selectValue: vallastDays,
    });
  }, [startDate, endDate, lastDays]);

  const onDateRangePickerValueChange = useCallback(
    ({ from, to, selectValue }: DateRangePickerValue) => {
      if (startDate && endDate) {
        setDateFilter({ from, to, selectValue });
      } else {
        setDateRangePickerValue({ from, to, selectValue });
      }
    },
    [setDateFilter, startDate, endDate]
  );

  return {
    startDate,
    endDate,
    dateRangePickerValue,
    onDateRangePickerValueChange,
  };
}

Die Hooks „useMemo“ und „useCallback“ können unser Webprojekt erheblich beschleunigen. Caching ist der Schlüssel für eine hohe Konversationsrate und eine gute Positionierung in den Google SERPs.