• Recoil では atom を用いて state を保存します
  • useRecoilState を使うと useState と同じ感覚で扱えます
  • useRecoilValue を使うと値のみ取得できます
• Recoil の selector は他の state から計算可能な値を保存します
• selector は get で取得した値を依存関係に加えその値が更新されると selector の値も更新されます

1import { NextPage } from 'next'
2import { useRecoilState, useRecoilValue } from 'recoil'
3import { textState, lengthSelector } from '../src/state'
4
5const Home: NextPage = () => {
6  const [text, setText] = useRecoilState(textState)
7  const length = useRecoilValue(lengthSelector)
8
9  return (
10    <>
11      <input type="text" value={text} onChange={e => setText(e.target.value)}/>
12      <p>text length: {length}</p>
13    </>
14  )
15}

1import { atom, selector } from 'recoil'
2
3export const textState = atom<string>({
4  key: 'textState',
5  default: '',
6})
7
8export const lengthSelector = selector<number>({
9  key: 'lengthSelector',
10  get: ({get}) => {
11    const text = get(textState)
12    return text.length
13  }
14})