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

2023/11/02 15 users useReducer useContext React 松田

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

useState の初期値 ―― 変化する Props の値を固定する

2023/08/15 6 users Props 初期値

この記事は、以下の記事で述べたライフタイムのうち、 2. レンダー, 3. コンポーネント に関連する内容です。 両方を合わせて読むと、より理解が深められると思います。 はじめに: 止まらないデータの流れを意図的に止めることが可能 React の、特に Function Component の良いところといえば「ステートを更新したのに表... 続きを読む

Reactを使うならReact Developer Toolsの再レンダリング時ハイライトくらい設定してくれ

2023/05/21 246 users React tl;dr モダンフロントエンド Next.js

モダンフロントエンドについて初めて書きます。お手柔らかに。 最近 React と Next.js に入門したのですが、入門時点で一番最初に知っておきたかったことについて書きました。 「React 初心者が useState とかを学習する前にまず一番にやることはこれ」っていう内容です。。 タイトルは自分への戒めです。 TL;DR この記... 続きを読む

React Hook Form でも再描画に気を付ける

2022/08/28 10 users Form React Hook watch コンポーネント

React Hook Form を使うと、useStateを使う制御フォームにありがちな「頻繁な再描画」を手短かに防ぐことができます。しかし、使い方によっては、その利点を崩してしまうことがあります。それが、useFormの戻り値に含まれるwatchの使用です。 watch は頻繁な再描画の原因になる 次のコンポーネントは、よくあるサインア... 続きを読む

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

2022/01/19 41 users useReducer React Qiita ステート 複数

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

そろそろ技術ブログで setCount(count + 1) と書くのはやめませんか

2021/04/10 26 users const count 技術ブログ

const [count, setCount] = useState(0); const increment = () => setCount(count + 1); const decrement = () => setCount(count - 1); const [count, setCount] = useState(0); const increment = () => setCount((prevCount) => prevCount + 1); const decrement = () => setCount((prevCount) => prevCount - 1); 続きを読む

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

2020/12/20 147 users redux useContext useReducer 大抵

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