Help us understand the problem. What is going on with this article?

【React】useReducer をもっと自由に活用しよう

useReducer をもっと自由に

皆さん、useReducer は活用していますか?
useState で十分と思っている場合でも useReducer に置き換えることで、コードがシンプルかつ、わかりやすくなります。

そのためには、Reduxの呪縛を解き払ってください。useReducerに Action type は必要ないですし、Flux Standard Action も必要ありません。また、今回はdispatchdispatchらしい使い方はしていません。
つまり、Redux と同じ使い方をする必要はありません。

🙅‍♀️別にActionType必須ではない
const [state, dispatch] = useReducer((state, action) => {
  switch(action.type) {
    case 'FOO_ACTION':
      return { ...state, foo: action.foo }
    case 'BAR_ACTION':
...

useReducer 活用例

では、useReducer を使用すると、どのように変わるのでしょうか。簡単なサンプルコードをもとに紹介します。

例)テキストフィールド
const { value, onChange } = useInput()

return (
  <input type="text" value={value} onChange={onChange} />
)

上記はなんの変哲もないテキストフィールドです。
これに合うカスタム Hooks (useInput) を、useStateuseReducer でそれぞれ作成します。

useState の場合

useStateを使用した場合
export const useInput = () => {
  const [value, setValue] = useState('')

  const onChange = useCallback((event) => {
    setValue(event.currentTarget.value)
  }, [])

  return { value, onChange }
}

useState を使用した場合、Hooks は2つ使用します。今回の用途では useCallback はオーバーキル感がありますが、他コンポーネントや他 Hooks で使用する可能性がありますので、メモ化しておくのが良いでしょう。
いずれにしても、onChange 関数を作成するには setValue をラップします。

useReducer の場合

useReducerを使用した場合
const inputAction = (state, event) =>
  event.currentTarget.value

export const useInput = () => {
  const [value, onChange] = useReducer(inputAction, '')

  return { value, onChange }
}

useState を使用した場合よりも、シンプルになりました。
useReducer で記述するメリットは下記の2つです。

  • 状態とそれを更新する関数が、ワンセットになる
  • reducer 部分は純粋関数であり、Hooks やコンポーネントの外に出せる

1つ目について、setValue のような中間の Setter が生まれませんし、用途に合わせる関数(onChange)を別途作る必要もありません。
また、2つ目の関数外部化は、テストがしやすくなるだけでなく、無駄なオブジェクトを生成しないというパフォーマンス面のメリットもあります。

まとめ

useReducer を使用する場合、Redux 等の使い方に縛られる必要はありません。
単純な state でも useReducer に置き換えることで、コードがシンプルかつ、わかりやすくなり、テスタビリティがあがってパフォーマンスも上がります!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした