reactjs - 条件ステートメント内で useMemo フックを使用することは可能ですか?

Question

私は条件付きステートメント内で反応フックを使用しようとしていましたが、残念ながら反応すると、ほとんどすべてのフックでエラーが発生し、フックの哲学に従って意図されています。

そして、elseステートメント内でuseMemoフックを試しましたが、エラーは発生しませんでした。この不一致についてグーグルで検索しましたが、有望なものは何も見つかりませんでした。

私の質問ですが、 useMemo は、条件文で useMemo を使用できる例外ですか?

Answer 1

useMemoいいえ、条件ステートメントで実行したり、他の React フックを実行したりすることはできません。コンポーネントがレンダリングされるたびに、同じ React フックを同じ順序で呼び出す必要があります。私の意見では、フックの動作は直感に反するものであり、React を習得するのが非常に難しい主な理由ではないにしても、その 1 つです。

2 つの回避策が考えられます。条件をフック コールバック内に移動するか、コードを別のコンポーネントに移動します。

このコード例を見てください:

function MyComponent() {
    if (condition) {
        const myVar = useMemo(() => { return value; }, [value]);
        return <OtherComponent var={myVar}/>;
    } else {
        return <SomethingElse/>;
    }
}

1つの選択肢は次のとおりです。

function MyComponent() {
    const myVar = useMemo(() => {
        if (condition) {
            return value;
        }
    }, [condition, value]);

    if (condition) {
        return <OtherComponent var={myVar}/>;
    } else {
        return <SomethingElse/>;
    }
}

別の代替手段は次のとおりです。

function MyComponent() {
    if (condition) {
        return <MyComponent2/>;
    } else {
        return <SomethingElse/>;
    }
}

function MyComponent2() {
    const myVar = useMemo(() => { return value; }, [value]);
    return <OtherComponent var={myVar}/>;
}