ライブラリのリアクティブ機能と手続き的取得機能を区別せよ - honey32

ライブラリのリアクティブ機能と手続き的取得機能を区別せよ

#Reactというパラダイムについて

Qiita にもアウトプットしました: https://qiita.com/honey32/items/1241af82da9f7adcb088

Reactのさまざまな3rd-partyライブラリには、

データをリアクティブに（or ReactNode の描画のために）取得するための機能

手続き的に取得するための機能

がある。

「そのエフェクトは不要かも」というケースがあるのと同様に、後者のケースなのに前者の機能を使うと、やたらと迂遠なコードになったり、思い通りの挙動を得られない場合がある

React Hook Form

リアクティブ(以下, R):

watch https://react-hook-form.com/docs/useform/watch

useWatch https://react-hook-form.com/docs/usewatch

手続き的(以下, I):

getValues https://react-hook-form.com/docs/useform/getvalues

SWR

R

useSWR https://swr.vercel.app/ja

TanStack Query

R

useQuery https://tanstack.com/query/latest/docs/framework/react/reference/useQuery

I

useMutation https://tanstack.com/query/latest/docs/framework/react/reference/useMutation

Recoil

R

useRecoilState https://recoiljs.org/docs/api-reference/core/useRecoilState

useRecoilValue https://recoiljs.org/docs/api-reference/core/useRecoilValue

I:

useRecoilCallback で get も可能 https://recoiljs.org/docs/api-reference/core/useRecoilCallback

Jotai

R

useAtom useAtomValue https://jotai.org/docs/core/use-atom

I

useAtomCallback https://jotai.org/docs/utilities/callback