useEffect Clean-Up Function Executes After Component is Removed
まだ誰も着手していません。
- 主要言語
- JavaScript
- スター
- 11.8k
- フォーク
- 7.9k
- 平均マージ
- 1日 11時間
- マージ済み PR(30日)
- 11
説明
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);
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
IssueにリンクされているReact useEffectのドキュメントから始め、そこにあるクリーンアップの説明を、2つのCodePenの例で示されているReact 17の動作と比較してください。関連する変更について、リンクされているchangelogのプルリクエストを読んでください。ドキュメントがクリーンアップの実行タイミングと、参照されている要素が引き続き利用可能かどうかを正確に説明していれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- javascript, react
- 領域
- documentation
- issue の種類
- ドキュメント
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 42/100