Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#8,677 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 3 días

@Mahendra-2006 ya está trabajando en esto.

Desde el 1/10/2026.

  • #8679 de @Mahendra-2006 — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
82/100
Tipo de issue
Documentación
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript, react
Área
documentation

Línea de trabajo

Comienza con la sección «lazy initialization» de la página enlazada de documentación de React. Aclara que crear recursos gestionados por el ciclo de vida durante el renderizado puede ser inseguro cuando un renderizado no se confirma, y muestra la diferencia con la lazy initialization segura; se considera terminado cuando los lectores puedan distinguir qué patrones necesitan un Effect.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
JavaScript
Estrellas
11.8k
Forks
8k
Merge medio
3 d 5 h
PR fusionados (30 d)
9

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de reactjs/react.dev

Todos los issues de reactjs/react.dev

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.