Startedを試してみた(TypeScript)#React#TypeScript若槻龍太2022.04.11この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。IoT事業部の若槻です。以前のエントリでReactでGlobalに状態管理を行う方法としてuseContextを試してみました。StartedをTSプロジェクトで試してみました。Startedを参考にRecoilをTSプロジェクトで動かしてみます。RecoilReactアプリの準備create-react-appでReactアプリをTSプロジェクトで作成します。webこれにより次のようなバージョンでReactアプリが作成できました。react@18.0.0typescript@4.6.3インストールRecoilをインストールします。recoilまず動かしてみるまず動くデモを作ってみます。src/App.tsxを次のように修正します。{count}</>;}Reactアプリを実行します。startブラウザでアプリが起動します。入力欄に文字を入力すると、入力した文字とカウントが表示される仕組みが作れました。treeの親をRecoilRootでラップする必要があります。);}ポイントとして、ラップ時にその子Component内で使用したい状態やその値を指定する必要はありません。(useContextの場合は指定する必要がありました。)AtomRecoilではatomで作成したRecoilStateを状態として使用します。value)});RecoilStateはuseRecoilStateを使用して読み書きを行うHooksです。);}状態の読み書きを組み込み関数で行えるのは便利ですね!Selectorselectorを使用するとRecoilStateを変換した値を取得できるRecoilValueReadOnlyを作成できます。},});RecoilValueReadOnlyからはuseRecoilValueを使用して値を読み取ることができます。{count}</>;}状態管理対象の値を変換して使用することが多い場合に役立ちそうです。StartedをTSプロジェクトで試してみました。Reactの組み込みHooksであるuseContextと比べ、少ない記述でより簡単に状態管理が行えるという印象でした。注意点として、2022年4月現在、Recoilはexperimentalとなっています。Repositoryのホストもまだfacebookexperimentalで行われています。React.2020年6月にMeta社により開発が開始され、現在v0.7.0なのでGAまでもう一息というところでしょうか。GAが待ち遠しいですね。