reactjs / reactjs/react.dev

Can the strategy to store information from previous render be used in a custom hook?

Offen
#5,393 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
JavaScript
Sterne
11.8k
Forks
7.9k
Ø Merge
1 T. 11 Std.
Gemergte PRs (30 T.)
11

Beschreibung

I was reading the strategy in the new beta docs, and was thinking whether it could be used in a custom hook? I tried doing it and it worked, but wanted to know whether it's advised or not.

To explain in code, my question is whether this is OK (same example from React docs but trend logic moved to another hook):

import { useState } from 'react';

const useCountTrend = (count) => {
  const [prevCount, setPrevCount] = useState(count);
  const [trend, setTrend] = useState(null);

  if (prevCount !== count) {
    setPrevCount(count);
    setTrend(count > prevCount ? 'increasing' : 'decreasing');
  }

  return trend;
}

function CountLabel({ count }) {
  const trend = useCountTrend(count);

  return (
    <>
      <h1>{count}</h1>
      {trend && <p>The count is {trend}</p>}
    </>
  );
}

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <button onClick={() => setCount(count - 1)}>
        Decrement
      </button>
      <CountLabel count={count} />
    </>
  );
}

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit dem verlinkten Abschnitt der React-Beta-Dokumentation zum Speichern von Informationen aus vorherigen Renderings und prüfe das Beispiel für einen custom-hook in diesem Issue. Ermittle, ob dieses Muster für custom hooks empfohlen wird und wo diese Anleitung in der Dokumentation hingehört. Als erledigt gilt die Aufgabe, wenn die Dokumentation eine klare, durch das Beispiel gestützte Antwort gibt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
documentation
Issue-Typ
Dokumentation
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.