Reactの状態管理におけるuseReducerとuseContextの活用例

2023/11/02 15 users useState useContext React 松田 大半

こんにちは、アルダグラムでエンジニアをしている松田です。 Reactで状態を管理するにあたっては、useStateの利用が挙げられることが多いです。 実際、数値や文字列、真偽値などのプリミティブな値であれば、useStateが適切なケースが大半でしょう。 ただ、値を投入するだけではなく、追加・削除・更新といった操作が要... 続きを読む

useReducer + useContext + Typescriptに慣れよう

2022/11/05 11 users useContext TypeScript React 概要

概要 以下の記事で「useReducer + Typescript」について記事を書きました。 今回はその第 2 弾として、useReducer での状態管理を子のコンポーネントでも使えるようにするために、 useContext と組み合わせた場合にどのようにプログラムを書けば良いかをご説明します。 想定読者 React がなんとなく書けるレベル以上の方... 続きを読む

useRefでステートを管理するのはReact18でアンチパターンになるからやめよう - Qiita

2022/01/19 41 users useState React Qiita ステート パターン

こんにちは。最近、Reactでのステート管理において「useStateの中にステートを置くのではなく、useRefで得たrefオブジェクトの中にステートを置いてuseState（またはuseReducer）をコンポーネントの再レンダリングを発生させるためだけに使う」というやり方を複数の記事で見かけました。このパターンは、今（React 17以... 続きを読む

ぼくのかんがえたさいきょうの useState + useContext よりも Redux のほうが大抵勝っている

2020/12/20 147 users useContext redux useState 大抵 単体

「Redux は学習コストが高い」などと言って useState（または useReducer）と useContext を組み合わせ 劣化 オレオレ Redux を作ってしまうのを見かけます[1]。よくないことだと思いますが、気持ちは非常にわかります。Redux エコシステムがそういう気持ちにさせてしまう部分は大いにあります。 Redux は それ単体なら ... 続きを読む

useReducerの本質：良いパフォーマンスのためのロジックとコンポーネント設計 - Qiita

2020/01/19 15 users Qiita ロジック コンポーネント設計 本質

React Hooksの正式リリース（2019年2月）からそろそろ一年が経とうとしています。Hooksの登場によってReactのコンポーネントは関数コンポーネントが一気に主流になり、クラスコンポーネントが新規に作られる機会は激減しました。 また、React 17.x系ではConcurrent Modeの導入とともにさらに2種類の新フックが追加される... 続きを読む