Reactでgetする時はswrでuseStateライクな関数を作ると便利

swrについて

皆さんはReactでgetアクションをする際、どんな方法を使っていますか？
fetechだったりaxiosだったりReact Queryだったり色んな方法がありますよね。

今回Reactでのgetアクションの方法でおすすめしたいのはswrでuseStateライクな関数を作ってgetしたデータを入れるというものです。
swrとは1度読み込んだ時のデータをキャッシュとして保存し、2度目からアクセスする時はキャッシュから表示することで高速で表示させることができるライブラリです。

それでは実際にswrを使ったuseStateライクな関数にgetしたデータを入れるコードを書きます。

swrを利用したstate管理

まずはこうしてuseStateライクな関数をuseSWRで作りましょう。

import useSWR from 'swr';

export const useSwrState = (key:string,fallbackData: any) => {
    const { data:state, mutate:setState }  = useSWR(key,{ fallbackData });
    return [state,setState];
};

そうするとuseStateのように先ほど定義した関数を呼び出せます。

const [data, setData] = useSwrState("key",[]);

後はいつも通りaxiosなりでgetすれば、見慣れたuseStateライクな記述方法でswrを使ったgetアクションができます。

import axios, {AxiosError, AxiosResponse} from "axios";

    useEffect(() => {
        axios.get("/api/url")
            .then((res:AxiosResponse) => setData(res.data))
            .catch((error:AxiosError) => console.error(error));
    }, []);

注意点としては、swrのkeyに毎回他と被らない一意な値を代入する必要があり面倒ですが、対処法として自動的に毎回違う値を自動で代入する処理を書けば完璧になります。(urlのパスなど)。

終わりに

Reactでgetアクションをする際の方法は本当に様々ですが、swrは利用するだけでパフォーマンスが上がりとても便利なので開発時はぜひ活用してみましょう。