useEffect Clean-Up Function Executes After Component is Removed
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
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);
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne mit der in der Issue verlinkten React useEffect-Dokumentation und vergleiche deren Formulierung zur Bereinigung mit dem in den beiden CodePen-Beispielen gezeigten Verhalten von React 17. Lies den verlinkten Changelog-Pull-Request zur relevanten Änderung. Die Aufgabe ist erledigt, wenn die Dokumentation genau erklärt, wann die Bereinigung ausgeführt wird und ob referenzierte Elemente weiterhin verfügbar sind.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react
- Bereich
- documentation
- Issue-Typ
- Dokumentation
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 42/100