React 【実務・中級編】 オブジェクト状態の不変性（Immutability） – React実践ガイド
やあ。今日も今日とてコンポーネントの海に溺れかけているかい？フロントエンドの現場に立っていると、後輩から「画面がどうしても再描画されないんです」「なんか古い状態のまま次の処理に進んじゃうんすよね」なんて相談を受けることが本当によくある。大抵...
React
React React 【実務・中級編】 遅延初期化（Lazy Initialization） – React実践ガイド
やあ。今日も元気にコード書いてるかい？コードレビューをしていて、ジュニアからシニアへ駆け上がろうとしている中級エンジニアのコードで一番「あー、もったいないな」「これ、知らないと本番環境で地味に効いてくるやつだな」って思うポイントがあるんだ。...
React 【実務・中級編】 ステイルクロージャ（Stale Closure）の回避 – React実践ガイド
こんにちは。毎日フロントエンドのコードと向き合い、時には不可解なバグに頭を抱え、時には洗練されたアーキテクチャに酔いしれる日々を送っていることでしょう。さて、今日は中級へのステップアップを狙う君たちが必ずと言っていいほどハマる、そして実務の...
React 【実務・中級編】 React状態更新の非同期性とバッチ処理 – React実践ガイド
こんにちは。君、最近こんなコード書いて「あれ？」って頭を抱えなかったかい？const = useState(0);const handleClick = () => { setCount(count + 1); console.log(co...
React 【実務・中級編】 関数型更新（Updater Function）の仕組み – React実践ガイド
こんにちは。チームのコードレビューをしていて、最近一番「あぁ、惜しいな、でもこれ中級の壁よね」と思う瞬間がある。それが、`useState`の更新処理で罠にハマっているコードを見たときだ。例えば、こんなコードを書いたことはないだろうか？//...
React 【実務・中級編】 useStateの基本構文と初期化 – React実践ガイド
やあ。最近、チームのコードレビューをしていて、`useState`の初期化や更新処理のあたりで「おや？」と首を傾げたくなる実装にぶつかることが増えてきた。中級へのステップを駆け上がっている君たちなら、コンポーネントの中で `const = ...
Propsによるデータの受け渡し（チルドレン属性、コンポーネントへの型付け） 【実務・中級編】 React Strict ModeとPropsのライフサイクル – React実践ガイド
こんにちは、フロントエンドチームの皆さん。日々の機能開発やリファクタリング、本当にお疲れ様です。さて、今日はReactの開発現場で「おや？」と誰もが一度はハマる、そして中級からシニアへステップアップする上で絶対に避けて通れないテーマについて...
Propsによるデータの受け渡し（チルドレン属性、コンポーネントへの型付け） 【実務・中級編】 Contextを用いたPropsバケツリレーの最適化 – React実践ガイド
こんにちは。Reactを触り始めて数年、そろそろコンポーネントの設計やパフォーマンスの最適化で一歩先に行きたい、そんな中級エンジニアのあなたへ。現場でバリバリコードを書いていると、一度は「Propsのバケツリレー地獄」に直面したことがあるは...
Propsによるデータの受け渡し（チルドレン属性、コンポーネントへの型付け） 【実務・中級編】 forwardRefとPropsの組み合わせ – React実践ガイド
やあ。今日もリポジトリのコードレビューで目がシバシバする頃か？Reactを触り始めてから数年、一通りのコンポーネント分割や状態管理はマスターし、「俺はもう中級だ」と胸を張っている時期に、大体みんなこの壁にぶぶつかる。――そう、「親から子コン...
Propsによるデータの受け渡し（チルドレン属性、コンポーネントへの型付け） 【実務・中級編】 Compound ComponentsにおけるProps共有 – React実践ガイド
こんにちは。プロダクトの規模が膨らみ、コンポーネントがカオスになり始めた頃に誰もが直面するのが、「Propsのバケツリレー地獄」と「どこに何を書いたか分からない巨大コンポーネント」ですよね。「親が持っている状態を、なぜか何階層も下の子に渡す...