React 【入門編】 React Testing Libraryによる状態更新のテスト – React実践ガイド
こんにちは！フロントエンドの現場を渡り歩いてきた、チーフアーキテクトの私です。Reactを学び始めて、`useState`で画面の数字が変わったり、入力した文字が反映されたりするようになったときって、なんだか魔法みたいでワクワクしますよね。...
状態管理の基本（useStateによるデータ保持と状態更新の非同期バグ対策）
React React 【入門編】 React DevToolsによる状態のデバッグ – React実践ガイド
こんにちは！Reactの学習、楽しく進めていますか？「画面に表示されるはずのデータが変わらない…」「え、なんで今のタイミングでその値になってないの！？」Reactを触り始めると、誰もが一度はこんな「状態（State）のミステリー」に頭を抱え...
React 【入門編】 propsからstateへの同期パターン – React実践ガイド
こんにちは！Reactの学習、楽しく進めていますか？画面がスイスイ動くようになってくると、「おっ、私にもできるぞ！」というワクワク感がたまりませんよね。でも、Reactを触り始めて多くの人が「あれ……？」と最初に立ち止まる、ちょっとした魔物...
React 【入門編】 非同期イベントハンドラ内での状態更新 – React実践ガイド
こんにちは！Reactの学習、楽しく進められていますか？画面がスイスイ動く魔法のようなアプリが作れる一方で、触れば触るほど「あれ？なんだか画面の表示が古いまま変わらないぞ……？」とか、「コンソールに変なエラーが出て赤くなっちゃった！」という...
React 【入門編】 key属性を利用した状態のリセット – React実践ガイド
こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトです。日々、多くの開発者から「Reactの状態管理でどうしてもハマってしまう……」という相談を受けます。Reactの `useState`、本当に便利ですよね。画面のデータを...
React 【入門編】 useStateとReact.memoの連携 – React実践ガイド
こんにちは！Reactの学習、楽しく進められていますか？画面のボタンを押したら数字が増えたり、文字がパッと切り替わったりする仕組みが作れるようになると、「おっ、自分、すごいアプリを作ってるぞ！」ってワクワクしてきますよね。でも、少しずつ複雑...
React 【入門編】 useStateとuseReducerの使い分け基準 – React実践ガイド
こんにちは！Reactの世界へようこそ。チーフアーキテクトの私です。Reactを触り始めて最初に覚える魔法のフック、それが `useState` ですよね。「画面のデータを保持して、変わったら再描画してくれるなんて便利！」と、最初は誰もが感...
React 【入門編】 状態の持ち上げ（Lifting State Up） – React実践ガイド
こんにちは！Reactの世界へようこそ。チーフアーキテクトの私です。Reactを触り始めてすぐの頃、「あれ？さっき書き換えたはずなのに、画面のあっち側で値が古いままになっている…」「親と子でデータを共有したいのに、どうやったらいいんだっけ？...
React 【入門編】 TypeScriptにおけるuseStateの型推論とジェネリクス – React実践ガイド
こんにちは！Reactの世界へようこそ。チーフアーキテクトの私です。Reactを触り始めて、最初に仲良くなるフックといえば、そう、`useState`ですよね。「画面のデータを覚えておいてくれる便利なメモ帳」のような感覚で、直感的に使えるの...
React 【入門編】 Strict Modeにおける二重レンダリングとuseState – React実践ガイド
こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。Reactを学び始めて、いざコードを書き始めたとき、こんな現象に出くわしたことはありませんか？「あれ？ `console.log` を1回しか書いていないのに、画面...