useSWRでグローバルなステートを管理する

📅 August 07, 2021

•

⏱️2 min read

皆さんこんちは！

useSWR・react-query使っておりますか？？私は、技術調査で触ったくらいでまだ、実際の案件ではガッツリ触れておりません。

ただ、どちらもfetcherにpromiseを返すのであれば何でもOKな汎用性の高さなので、リクエストをしないようなダミーfetcher渡したら、いい感じにステートをグローバルに管理できんじゃね？？と思っていたら、こんな記事に出会いました。

https://paco.sh/blog/shared-hook-state-with-swr

useSWRでステート管理できるぞ!とのこと。このブログ通りにやってもうまく動かなかったので備忘録です。

実際に動くもの

Embedded content: https://codesandbox.io/embed/lively-leaf-nyksw?fontsize=14&hidenavigation=1&theme=dark

コード

import useSWR from "swr"

export const useSharedState = <T>(key: string, initial:T) => {
  const { data: state, mutate: setState } = useSWR(key, null, {
    initialData: initial
  })
  return [state, setState] as [T, (value: T) => void]
}

useSharedState というカスタムフックを作成しています。本家のブログでは、第2引数のfetcherを省略していましたが、今はfetcherを省略すると、

const fetcher = (url: string) => fetch(url).then((res) => res.json());

がセットされるようなので、明示的に nullを渡しています。

使う側では、

// pages/componets/CountButton.tsx
import { useSharedState } from "../hooks/useSharedState"

export default function CountButton () {
  const [count, setCount] = useSharedState('count', 0)
  return (
    <button onClick={() => setCount(count  + 1)} >count up</button>
  )
};

// pages/componets/CounterLabel.tsx
import { useSharedState } from "../hooks/useSharedState";

export default function CounterLabel() {
  const [count] = useSharedState('count', 0)
  return <h1>now count is {count} </h1> 
}

といった感じで、親子要素から count や setCount などを受け取るのではなく、useSWR経由でグローバルなステートを管理しています。

感想

では、これ実際に案件で使うかというと・・・。悩ましい。ざっとググった感じやはり useSWR が真新しいこともあり、ましてや useSWR でローカルのステートすべて管理させようみたいな試みはかなり少なそう。

もう、ちょっと調査しないと怖いので、引き続き調べてみようかと思います。

← Prev Next →