常連

### 実現したいこと

recoilでdefultの```hello```ではなく```good morning```をログに出力したい

### 前提
next.jsでrecoilを使用してステートの管理を行っています。
setTestで値を書き換えた直後にconsole.log(test)としても書き換える以前の値が出力されます。
これはsetTestが非同期処理の為だと思いますが、setTestが実行されたことを確認してからconsole.log(test)を実行する方法をご存じの方は教えていただけませんでしょうか。


### 該当のソースコード

```javaScript
import { useEffect } from 'react'
import { useRecoilState } from 'recoil'
import { atom } from 'recoil';

const testState = atom<string>({
    key: 'testState',
    default: "hello",
  });

export default function Home() {
  const [test , setTest ] = useRecoilState(testState)
  useEffect(()=>{
      setTest("Good morning")
      console.log(test)
  },[])
  return (
    <>
    <h1>Hello World!</h1>
    </>
  )
}

```


recoilで非同期処理の完了を待ちたい

### 実現したいこと
ReactとRecoilを使って、外部サーバーにAPIで記事を取得して、それを画面に表示したいです。
この画面には、検索機能があり、キーワードを入力して「検索」ボタンを押すと、そのキーワードを含む記事が表示されます（キーワードによる絞り込み検索は、API側がやってくれます）


### 発生している問題・分からないこと
コンポーネントを分けているため、状態をグローバルに管理したいと思い、Recoilを導入しました。
初回画面は、キーワードは空でAPIを呼び出しその結果を<ItemTable>コンポーネント内で表示します。
さらに、<SearchForm>コンポーネント内の入力欄にキーワードを入力し、「検索」ボタンを押すと、そのキーワードをパラメータとして、APIを呼び出し、結果を<ItemTable>コンポーネントに表示します。

分からないことは、「検索」ボタンを押したときにどのような処理を行えば、<ItemTable>コンポーネント内を適切な表示に再レンダリングさせることが出来るかどうかです。



### 該当のソースコード

```App.tsx
import { RecoilRoot } from "recoil";
import { Home } from "./Home";

function App() {
  return (
    <RecoilRoot>
      <Home />
    </RecoilRoot>
  );
}

export default App;

```

```Home.tsx
import { SearchForm } from "./SearchForm";
import { RecoilRoot } from "recoil";
import { ItemTable } from "./ItemTable";
import { Suspense } from "react";

export const Home = () => {
  return (
    <RecoilRoot>
      <h1>記事検索ページ</h1>
      <SearchForm />
      <Suspense fallback={<div>Loading...</div>}>
        <ItemTable />
      </Suspense>
    </RecoilRoot>
  );
};

```

```SearchForm.tsx

export const SearchForm = () => {
  return (
    <div>
      <h2>記事を探す</h2>
      <div className="py-4">
        <label>キーワード</label>
        <input
          type="text"
          name="Search"
          placeholder="キーワード..."
        />
      </div>
      <div>
        <button
          type="button"
        >
          検索する
        </button>
      </div>
    </div>
  );
};

```

```ItemTable.tsx
import { useRecoilValue } from "recoil";
import { itemSelector } from "./atom/searchParamAtom";

export const ItemTable = () => {
  const items = useRecoilValue(itemSelector);

  return (
    <div>
      <div>
        <h2>記事一覧</h2>
        <div>
          <div>
            <div>検索結果:{items.length}件</div>
            <div>
              <table>
                <thead>
                  <tr>
                    <th>タイトル</th>
                    <th>作者</th>
                  </tr>
                </thead>
                <tbody>
                  {items.map((item) => (
                    <tr key={item.id}>
                      <td>
                        <p>{item.title}</p>
                      </td>
                      <td>
                        <p>{item.author}</p>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

```

```searchParamAtom.ts
import { atom, selector } from "recoil";
import axios from "axios";

interface Item {
    id: number;
    title: string;
    author: string;
}
export const keywordAtom = atom({
  key: "keywordAtom",
  default: "",
});


export const itemSelector = selector<Item[]>({
  key: "itemSelector",
    get: async({ get }) => {
      const keyword = get(keywordAtom);
      
      const param = {
        field_name: keyword,
      };
      const headers = {
        "Content-Type": "application/json",
      };
      const res = await axios.post("http://localhost:8080/items", param, {
        headers: headers,
      });
      return res.data;
    },
});

```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
初期画面は、全件取得結果が表示されます。検索ボタンを押したときの挙動を実装したいです。

### 補足
特になし

Recoilを使った記事検索機能の実装

### 前提
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
// atoms
const atomState1 = atom<string>({
  key: 'atom1',
  default: ''
})

const atomState2 = atom<number>({
  key: 'atom2',
  default: 1
})

// selector
const selector = selector({
  key: 'selector',
  get: ({ get }) => {
    const atoms = {
      atom1: get(atom1), 
      atom2: get(atom2) 
    }

    console.log('selector')
  }
})

// component
const Test: React.FC = () => {
  const [atom1, setAtom1] = useRecoilState(atomState1)
  const [atom2, setAtom2] = useRecoilState(atomState2);

  const onSubmit = () => {
    setAtom1('test');
    setAtom2(3);
  };

  return (
    <button onClick={()=>onSubmit()} />
  )
}

```

### 試したこと
- 上記のようなテストコードを書いて、実行のテスト
- Recoilのドキュメントの確認（atom, selector について

### 補足情報（FW/ツールのバージョンなど）
- react: "^17.0.1"
- next: "12.1.6"
- recoil: "^0.4.1"
- typescript: "4.3.2"



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

### 実現したいこと
NextJSで扱っている、Recoilについてです。
selectorのgetやset関数の引数（`newValue`）にTypeScriptの型を指定したいのですが、正しい指定方法がわかりません。

以下のソースコードのように指定するとエラーとなってしまいます。
調べてもこの辺りの情報がなく、わかりませんでしたのでお聞きしたいです。

### 発生している問題・エラーメッセージ

```
No overload matches this call.
  Overload 2 of 2, '(options: ReadOnlySelectorOptions<void>): RecoilValueReadOnly<void>', gave the following error.
    Argument of type '{ key: string; get: ({ get }: { get: GetRecoilValue; getCallback: GetCallback; }) => void; set: ({ set }: { set: SetRecoilState; get: GetRecoilValue; reset: ResetRecoilState; }, newValue: string) => void; }' is not assignable to parameter of type 'ReadOnlySelectorOptions<void>'.
      Object literal may only specify known properties, and 'set' does not exist in type 'ReadOnlySelectorOptions<void>'.ts(2769)
```

### 該当のソースコード

```js
const testSelector = selector({
  key: 'testSelector',
  get: ({get}) => {},
  set: ({set}, newValue: string) =>
    console.log(newValue)
})

```

### ukyさんご回答の追記
インポートしてご回答いただいたコードを記述しました。
```js
import { atom, selector, DefaultValue } from 'recoil'
```
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-26/1967ef07-9dac-40ba-a3f8-896089231914.png)


Recoil selectorのgetやset関数の引数の型指定方法は？

Reactでアプリを作成しておりステータス管理にRecoilを使いたいです。
簡単なアプリを作ってみたのですが、index.tsxの14行目の<RecoilRoot>のとこりでエラーが発生してしまいました。
GitHubのこの記事（https://github.com/facebookexperimental/Recoil/issues/1717 ）などをみるとバグがあるっぽいのですが、React18でRecoilを使っているところもあるようなので使えるようにしたいと思っています。
どのようにすればReact18でRecoilが使えるようになりますか。

```npmlistreact
root@5e90b19430ee:/usr/src# npm list react
src@ /usr/src
+-- react-redux@8.1.2
| +-- react-dom@18.2.0
| | `-- react@18.2.0 deduped
| +-- react@18.2.0
| `-- use-sync-external-store@1.2.0
|   `-- react@18.2.0 deduped
+-- react-router-dom@6.16.0
| +-- react-router@6.16.0
| | `-- react@18.2.0 deduped
| `-- react@18.2.0 deduped
`-- recoil@0.7.7
  `-- react@18.2.0 deduped
```

```エラーメッセージ
'RecoilRoot' を JSX コンポーネントとして使用することはできません。
  Its type 'FC<RecoilRootProps>' is not a valid JSX element type.
    型 'FunctionComponent<RecoilRootProps>' を型 '(props: any, deprecatedLegacyContext?: any) => ReactNode' に割り当てることはできません。
      型 'import("d:/ddrive/Docker/PhotoAlbum/react/node_modules/@types/react/index").ReactNode' を型 'React.ReactNode' に割り当てることはできません。
        型 'ReactElement<any, string | JSXElementConstructor<any>>' を型 'ReactNode' に割り当てることはできません。
          プロパティ 'children' は型 'ReactElement<any, string | JSXElementConstructor<any>>' にありませんが、型 'ReactPortal' では必須です。ts(2786)
index.d.ts(205, 9): 'children' はここで宣言されています。
```


```index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import MainApp from './MainApp';
import reportWebVitals from './reportWebVitals';
import { RecoilRoot } from 'recoil';


const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <RecoilRoot> {/* RecoilRootでアプリケーション全体をラップ */}
      <MainApp />
    </RecoilRoot>
  </React.StrictMode>
);

reportWebVitals();
```

