reactjs / reactjs/react.dev

useEffect Clean-Up Function Executes After Component is Removed

Abierto
#3,427 6 comentarios 3 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Lenguaje dominante
JavaScript
Estrellas
11.8k
Forks
7.9k
Merge medio
1 d 11 h
PR fusionados (30 d)
11

Descripción

This behavior has changes in React version 17.0.x.

Clean-up function should execute when the component unmounts, and I've noticed in React v.17 by the time cleanup function executes, React referenced elements are no longer available.

Working example with React v.16
Example with React v.17

Notice unmountSuccessful logs before divRef in React v.17 example.

This is the only relevant change I noticed from the changelog.

If the behavior of useEffect clean-up has changed it should be reflected on the docs.

Code Snippet:

const App = () => {
  const divRef = React.useRef(null);
  
  React.useEffect(() => {
    console.log('divRef ::', divRef.current)
    return function cleanUp() {
      console.log('[cleanUp] divRef ::', divRef.current)
    }
  }, [])
  return (
    <div ref={divRef}>
      Open Browser's Console For Output
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

const unmountApp = () => {
  console.log('unmounting root...')
  const node = document.getElementById('root');
  const unmountSuccessful = ReactDOM.unmountComponentAtNode(node);
  console.log('unmountSuccessful ::', unmountSuccessful)
};

window.setTimeout(unmountApp, 1500);

Guía de contribución

Abrir la guía de contribución

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.

Línea de trabajo

Comienza con la documentación de React useEffect enlazada en la issue y compara su redacción sobre la limpieza con el comportamiento de React 17 mostrado en los dos ejemplos de CodePen. Lee el pull request del changelog enlazado correspondiente al cambio relevante. La tarea está terminada cuando la documentación explica con precisión cuándo se ejecuta la limpieza y si los elementos referenciados siguen estando disponibles.

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

Evaluación

Stack tecnológico
javascript, react
Área
documentation
Tipo de issue
Documentación
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
42/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.