質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Recoil

Recoilは、Meta社が開発しているReactの状態管理ライブラリです。状態を管理するAtom、Atomに格納された状態を取得するSelectorという2つの主機能を持ちます。同じく状態管理ライブラリであるReduxと比べて構造が分かりやすく扱いやすい点が特徴です。

Q&A

解決済

1回答

762閲覧

RecoilのSelectorが呼ばれるタイミングについて。

uky

総合スコア207

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Recoil

Recoilは、Meta社が開発しているReactの状態管理ライブラリです。状態を管理するAtom、Atomに格納された状態を取得するSelectorという2つの主機能を持ちます。同じく状態管理ライブラリであるReduxと比べて構造が分かりやすく扱いやすい点が特徴です。

0グッド

0クリップ

投稿2023/01/19 06:04

編集2023/02/24 07:32

前提

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"

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

componentのonSubmit内で、それぞれのatomを更新するset関数を2度に分けて呼んでいるので

同期的に値をセットする場合、変更処理は1つセットするごとに行われるのではなく、全変更を描画前に一気に処理する形となるとのことです。

投稿2023/01/19 06:55

maisumakun

総合スコア145184

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

uky

2023/01/19 07:03

回答ありがとうございます。 すみません、引用元を確認したいので参考のリンクをいただいてもよろしいでしょうか。
uky

2023/01/19 07:14

なるほどです。 複数のatomを書き換える場合はRecoil側でうまいこと再レンダリングの制御をしてくれているのですね。 ご回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問