Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

[Suggestion]: lazy initialization example can encourage unsafe patterns - show example

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#8,677 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 3 Tagen

@Mahendra-2006 arbeitet bereits daran.

Seit 01.10.2026.

  • #8679 von @Mahendra-2006 — offen

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
82/100
Issue-Typ
Dokumentation
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
javascript, react
Bereich
documentation

Rechercherichtung

Beginne mit dem Abschnitt „lazy initialization“ auf der verlinkten React-Dokumentationsseite. Stelle klar, dass das Erstellen von lebenszyklusverwalteten Ressourcen während des Renderns unsicher sein kann, wenn ein Rendern nicht committed wird, und zeige den Unterschied zur sicheren lazy initialization; fertig, wenn Leser erkennen können, welche Muster einen Effect benötigen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

type: documentation
Summary

Show example when lazy initialization example can be unsafe.

Page

https://react.dev/reference/rules/components-and-hooks-must-be-pure#lazy-initialization

Details

The lazy initialization section currently presents this pattern as valid:

function ExpenseForm() {
   SuperCalculator.initializeIfNotReady(); // ✅ Good: if it doesn't affect other components

   // Continue rendering...
}

However, I think this example is easy to generalize into a dangerous pattern:

if (ref.current === null) {
   ref.current = createResource();
}

For resources with a lifecycle - subscriptions, event listeners, timers, connections, etc. - creating the resource during render is unsafe because a render is not guaranteed to result in a committed effect.

For example:

function useLegacyStore() {
   const subscriptionRef = useRef(null);

   if (subscriptionRef.current === null) {
     subscriptionRef.current = store.subscribe(() => {
       // ...
     });
   }

   useEffect(() => {
     return () => {
       subscriptionRef.current?.unsubscribe();
     };
   }, []);
}

This can appear to work when components only render as part of normal mount/unmount flows. However, with concurrent rendering or APIs such as Activity, React may render a component without subsequently mounting the
Effect associated with that render.

The subscription has already been created, while its cleanup is tied to an Effect that may never run.

The documentation should make this distinction explicit, perhaps by adding a warning/example.

Inspired by:
https://hackernoon.com/react-activity-when-a-render-no-longer-guarantees-an-effect

Vorherrschende Sprache
JavaScript
Sterne
11.8k
Forks
8k
Ø Merge
3 T. 5 Std.
Gemergte PRs (30 T.)
9

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus reactjs/react.dev

Alle Issues in reactjs/react.dev

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

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