Reactに関係あるものだけをカスタムフックにする

Reactに不慣れだと、あらゆる処理をカスタムフックにしてしまうことがある。これはやめる。

Reactに関係ある、とは何か

Reactのrenderに合わせた最適化が必要な場合

たとえばこう

code:useSomeFetch.ts

// ダメな例

export function useSomeFetch() {

return useCallback(async () => {

const resp = await fetch(someUrl);

return await resp.json();

}, []);

}

code:someFetch.ts

// これでいいじゃんって言う例 メモ化なしに参照もstable

export async function someFetch() {

const resp = await fetch(someUrl);

return await resp.json();

}

クロージャーを作ることに意味があるときは使う可能性はあるかもだけど、クロージャ―を返す通常の関数をuseMemoしたらよさそう