🎃

[React] そのデフォルト引数、大丈夫ですか?

2024/11/02に公開

カスタムフック、コンポーネントのデフォルト引数にオブジェクトリテラルなど毎回生成されるオブジェクトを渡していませんか?

もしuseEffectでその引数を使っている場合、レンダリング毎に意図せずuseEffectの処理が実行されてしまいます。

const useSomeEffect = (args: T = {}) => {
  useEffect(() => {
    ...
  }, [args]);
}

useSomeEffect(); // アカン

デフォルトパラメータをやめるか、トップレベルで定義した値をデフォルト引数にするべきです。

const defaultArgs = {};

const useSomeEffect = (args: T = defaultArgs) => {
  useEffect(() => {
    ...
  }, [args]);
}

useSomeEffect(); // 毎回は実行されない

以上カスタムフック、コンポーネントのデフォルト引数にはお気をつけください。

Discussion