無駄な useState + useEffect はuseMemoに。

まえがき

useState + useEffect が使われているところを、 useMemo で簡易的に書ける場合はその方がシンプルで良いかなと思い記事にしてみました。
初歩的な話ではありますが、React初心者へのちょっとした手助けになれればいいな〜というアウトプット記事です(^^)

今回は、今月がユーザーの誕生月かどうかを判断する場合 を例として書いてみます。

これを useState + useEffectで書くと下記のようなコードになります。

  const [isBirthMonth, setIsBirthMonth] = useState<boolean>(false)

  useEffect(() => {
    setIsBirthMonth(getMonth(user.birthday) === getMonth(new Date()))
  }, [user.birthday])

useStateでisBirthMonthを定義し、useEffect内で値をセットしてあげるという感じです。

これをuseMemoで書く場合は下記のように表せます。

  const isBirthMonth: boolean = useMemo(
    () => getMonth(user.birthday) === getMonth(new Date()),
    [user.birthday]
  )

この方がコード量が減ってシンプルですよね！

セット関数 setIsBirthMonth が他でも使われている場合は useState で定義するべきだと思いますが、今回のように useEffect 内で一度しか使われていない場合は、無理にuseStateでセット関数を定義せずに、useMemoで書くのもありかなと思いました！

イメージ的には、useState + useEffect = useMemoという感覚ですが、
レンダーの回数などパフォーマンスの面で見ると厳密には違うのでその変はこちらの記事をどうぞ！