Recoil公式ドキュメント 翻訳⑯ APIリファレンス-Core-State-useRecoilValue()

Recoilの公式ドキュメントをgoogle翻訳するとコードまで翻訳されてしまうのが面倒なのでQiitaにまとめてみます。

追々追加していきます。(多分)

公式ドキュメント

目次

• 前書き　①　②　③　④
• 基本チュートリアル　⑤　⑥　⑦
• ガイド　⑧　⑨　⑩
• APIリファレンス
• Core
  
  •　⑪ <RecoilRoot />
  
  •　State
  
  　・　⑫atom()
  
  　・　⑬selector()
  
  　・　⑭Loadable
  
  　・　⑮useRecoilState()
  
  　・　⑯ useRecoilValue()
  
  　・　⑰useSetRecoilState()
  
  　・　⑱useResetRecoilState()
  
  　・　⑲useRecoilValueLoadable()
  
  　・　⑳useRecoilStateLoadable()
  
  　・　㉑isRecoilValue()
  
  •　Snapshots　㉒　㉓　㉔　㉕
  
  •　㉖useRecoilCallback()
  
  •　雑録(Misc)　㉗
  
• 実用(utils)　㉘　㉙　㉚　㉛　㉜　㉝　㉞　㉟

※全目次は一番下にあります

---

useRecoilValue(state)

​指定されたRecoil stateの値を返します。

​このhookは、コンポーネントを指定されたstateに暗黙的に登録します。

---

function useRecoilValue<T>(state: RecoilValue<T>): T;

• ​state: atomまたはselector

---

​このhookは読み取り専用stateと書き込み可能stateの両方で動作するため、コンポーネントが書き込みを行わずにstateを読み取る場合に使用することをお勧めします。​atomは書き込み可能なstateですが、セレクタは読み取り専用または書き込み可能です。​詳細はselector()を参照ください。

​Reactコンポーネントでこのhookを使用すると、stateが更新されたときに再レンダリングするようにコンポーネントが登録されます。​このhookは、stateにエラーがあるか、非同期解決が保留中の場合にスローされます。​このガイドをご覧ください。

サンプルコード

import {atom, selector, useRecoilValue} from 'recoil';

const namesState = atom({
  key: 'namesState',
  default: ['', 'Ella', 'Chris', '', 'Paul'],
});

const filteredNamesState = selector({
  key: 'filteredNamesState',
  get: ({get}) => get(namesState).filter((str) => str !== ''),
});

function NameDisplay() {
  const names = useRecoilValue(namesState);
  const filteredNames = useRecoilValue(filteredNamesState);

  return (
    <>
      Original names: {names.join(',')}
      <br />
      Filtered names: {filteredNames.join(',')}
    </>
  );
}

---

参考サイト

・公式ドキュメント
・みらい翻訳

---

全目次

• 前書き
• ①動機
• ②コアコンセプト
• ③インストール
• ④入門
• 基本チュートリアル
• ⑤概要
• ⑥Atoms
• ⑦Selectors
• ガイド
• ⑧非同期データクエリ
• ⑨非同期状態・同期状態
• ⑩Stateの永続性
• APIリファレンス
• Core
  
  •　⑪ <RecoilRoot />
  
  •　State
  
  　・　⑫atom()
  
  　・　⑬selector()
  
  　・　⑭Loadable
  
  　・　⑮useRecoilState()
  
  　・　⑯ useRecoilValue()
  
  　・　⑰useSetRecoilState()
  
  　・　⑱useResetRecoilState()
  
  　・　⑲useRecoilValueLoadable()
  
  　・　⑳useRecoilStateLoadable()
  
  　・　㉑isRecoilValue()
  
  •　Snapshots
  
  　・　㉒Snapshot
  
  　・　㉓useRecoilTransactionObserver()
  
  　・　㉔useRecoilSnapshot()
  
  　・　㉕useGotoRecoilSnapshot()
  
  •　㉖useRecoilCallback()
  
  •　雑録(Misc)
  
  　・　㉗useRecoilBridgeAcrossReactRoots()
  
• 実用(utils)
  
  •　㉘atomFamily()
  
  •　㉙selectorFamily()
  
  •　㉚constSelector()
  
  •　㉛errorSelector()
  
  •　㉜waitForAll()
  
  •　㉝waitForAny()
  
  •　㉞waitForNone()
  
  •　㉟noWait()