💤

React19 に上げたときに useReducer の型指定がエラーになった

2025/02/04に公開

結論

useReducer の型の改善がされたのでその修正が必要
https://ja.react.dev/blog/2024/04/25/react-19-upgrade-guide#better-usereducer-typings

- useReducer<React.Reducer<State, Action>>(reducer)
+ useReducer<State, [Action]>(reducer)

実際にはこんな感じで書いていた

そもそも型を付けて記述していたのは、initで渡すobjectが、Stateの一部だったため。
useReducer(reducer, init)ではstateの値が絞られたinitの型になってしまいこれを解決していた。

type State = {a: string, x?. string, y?. string}
const init = {a: 'hoge'} // 初期値はStateの一部でよかった

useReducer部分の実装の新旧はこうでした。

- const [state, dispatch] = useReducer<(state: State, action: Action) => State>(reducer, init)
+ const [state, dispatch] = useReducer<State, [Action]>(reducer)

コメント

あんまり関係ない変更だな思っていても、使っているもののアップグレードガイドにはちゃんと目を通しておくべきでした。

Discussion