前提
React(Next.js), TypeScriptでwebアプリの開発をしており、状態管理のライブラリとしてRecoilを採用しています。
実現したいこと
- RecoilのSelectorのgetが呼ばれるタイミングについてについて知りたい
発生している問題・エラーメッセージ
現状、下記のようなコードを書いているのですが、
component内のボタンをクリックしても、selectorが1度しか呼ばれていないようで、console.log()が1度しか実行されません。
想定としては、
componentのonSubmit内で、それぞれのatomを更新するset関数を2度に分けて呼んでいるので、selector内のconsole.log()が2度実行されると思っていました。
なぜ1度しかconsole.log()が呼ばれていないのかが気になります。
(Recoilのドキュメントで目ぼしい箇所は閲覧しましたが、このような動作に関わる記載を見つけられませんでした。
この辺りの挙動に詳しい方がいらっしゃいましたら、教えていただきたいです。よろしくお願いします。
該当のソースコード
tsx
1// atoms 2const atomState1 = atom<string>({ 3 key: 'atom1', 4 default: '' 5}) 6 7const atomState2 = atom<number>({ 8 key: 'atom2', 9 default: 1 10}) 11 12// selector 13const selector = selector({ 14 key: 'selector', 15 get: ({ get }) => { 16 const atoms = { 17 atom1: get(atom1), 18 atom2: get(atom2) 19 } 20 21 console.log('selector') 22 } 23}) 24 25// component 26const Test: React.FC = () => { 27 const [atom1, setAtom1] = useRecoilState(atomState1) 28 const [atom2, setAtom2] = useRecoilState(atomState2); 29 30 const onSubmit = () => { 31 setAtom1('test'); 32 setAtom2(3); 33 }; 34 35 return ( 36 <button onClick={()=>onSubmit()} /> 37 ) 38} 39
試したこと
- 上記のようなテストコードを書いて、実行のテスト
- Recoilのドキュメントの確認(atom, selector について
補足情報(FW/ツールのバージョンなど)
- react: "^17.0.1"
- next: "12.1.6"
- recoil: "^0.4.1"
- typescript: "4.3.2"
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/01/19 07:03
2023/01/19 07:05
2023/01/19 07:14