[React] 訳のわからないエラーについて

Question

Reactで開発している際、以下のようなエラーがというかWarningがでました。
このWarningがでてから、Reactの保存が遅くなりました。
これは何が原因なのでしょうか？

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in WorksDetail (created by Context.Consumer)

以下ファイルを追加した後、おかしくなりました。
一覧 → 詳細画面のページ

import React, { useState } from 'react';
import { db } from '../../Firebase';
import PcImage from '../../assets/img/portfolio/PC.png'

const WorksDetail = (props) => {
    const [ works, setWorks ] = useState([]);
    
    const docId = props.match.params.id;
    const docRef = db.collection('works').doc(docId);

    docRef.get().then((doc) => {
        if (doc.exists) {
            const docData = doc.data();
            setWorks(docData);
        } else {
            console.log('No such document!');
        }
    })
    .catch(function(error) {
        console.log('Error getting document:', error);
    });
    
    return (
        <>
            <h2>Portfolio</h2>
            <div className="article">
                <h3>Work</h3>
                <section className="work">
                    <img src={ works.imagePath1 } className="left-work" alt={works.main} />
                    <div className="right-work">
                        <div className="sub-text">{works.sub}</div>
                        {works.url ? (
                            <div className="main-text link">
                                <img src={PcImage} alt="pc icon" />
                                <a href={works.url} rel="noreferrer noopener" target="_blank">{works.main}</a>
                                </div>
                        ) : (
                            <div className="main-text">{works.main}</div>
                        )}
                        <div className="description">{works.description}</div>
                        <h3>○主な読者層</h3>
                        <div className="target">{works.target}</div>
                        <h3>○主な内容</h3>
                        <div className="content">{works.content}</div>
                    </div>
                </section>
            </div>
            <style>{`
                .work {
                    display: flex;
                    justify-content: space-between;
                }
                .work .left-work {
                    width: 300px;
                    height: 270px;
                    object-fit: cover;
                    margin: 0 25px 0 0;
                }
                .work .right-work .sub-text {
                    font-size: 15px;
                    font-weight: bold;
                }
                .work .right-work .main-text {
                    font-size: 20px;
                    font-weight: bold;
                    margin: 0 0 15px 0;
                }
                .work .right-work .link a {
                    color: #1D60FE;
                }
                .work .right-work .link img {
                    margin: 0 10px 0 0;
                    top: 3px;
                    position: relative;
                }
                .work .right-work .description,
                .work .right-work .target,
                .work .right-work .content {
                    text-align: justify;
                    font-size: 14px;
                    line-height: 1.5;
                    margin: 0 0 20px 0;
                }
                .work .right-work h3 {
                    margin: 0;
                }
            `}</style>
        </>
    );
}

export default WorksDetail;     

Comments

[gentaro]

コードまでは見てませんが、めちゃくちゃ丁寧なエラーメッセージが出ていて、原因や修正するためのヒントまで書いてありますね。
それを読んで具体的に何がわからなかったのかを質問文に書かれてはどうでしょうか。

[DaisukeMori]

警告：マウント解除されたコンポーネントでReact状態の更新を実行できません。 これは何もしませんが、アプリケーションのメモリリークを示しています。 修正するには、useEffectクリーンアップ関数ですべてのサブスクリプションと非同期タスクをキャンセルします。
WorksDetail（Context.Consumerにより作成）

Google翻訳で翻訳してみましたが「useEffectクリーンアップ関数ですべてのサブスクリプションと非同期タスクをキャンセルします。」の意味がさっぱりわかりません。

Answer 1

関数コンポーネントの中に直接書いたコードは、描画のたびに実行されます。つまり、元のコードではdocRef.get()が毎回実行されてしまうことになります。

実行タイミングを制御したいものは、useEffectの中に書いてください。

Comments

[DaisukeMori]

```
useEffect(() => {
const docId = props.match.params.id;
const docRef = db.collection('works').doc(docId);
docRef.get().then((doc) => {
if (doc.exists) {
const docData = doc.data();
setWorks(docData);
} else {
console.log('No such document!');
}
})
.catch(function(error) {
console.log('Error getting document:', error);
});
}, []);
```

useEffectの中に入れたらWarningは消えた代わりに別のコメントが出ました。

```
React Hook useEffect has a missing dependency: 'props.match.params.id'. Either include it or remove the dependency array react-hooks/exhaustive-deps
```

[DaisukeMori]

追記で更新自体は高速になりました。
これはこのままスルーしても問題ないでしょうか？

[DaisukeMori]

追記で
useEffectに入れた際Lintエラーを消す方法

```
useEffect(() => {
// 省略
}, [props.match.params.id]); // props.match.params.idを第二引数の配列に入れる
```