Reactのフラグ地獄を状態遷移テーブルで解消する — Discriminated Union×テーブル駆動設計の実践
はじめに Reactで画面の表示切り替えをフラグで管理するコードは、いろいろなプロジェクトで見かけます。 const [isLoading, setIsLoading] = useState(false); const [isError, setIsError] = useState(false); const [hasData, setHasData] = useState(false); const [data, setData] = useState<User[]>([]); const [error, setError] = useState<Error | null>(null); 一見無害に見えるこのコードは、状態が増えるにつれて指数関数的に複雑化します。 本記事では、なぜフラグ管理が破綻するのかを構造的に分析し、TypeScriptのDiscriminated Unionと有
Async React時代の宣言的UI: デバウンスの例
宣言的UIとは何か、皆さんは答えられるでしょうか。 「あーあの、DOM更新を直接プログラムに書くんじゃなくて、JSXとかであるべき状態を宣言したらライブラリが自動的に差分適用とかでDOMを更新してくれるやつでしょ？」 もちろん、このような答えは間違いではありません。しかし、特にAsync Reactの時代においては、Reactの考えはさらに先を行っているようです。 究極的には、宣言的UIは、やりたいことをロジックとして記述するだけで、具体的なことや細かい最適化はよしなにやってくれるものだという考えが伝わってきます。上述のようなDOMの更新の話はその一例にすぎません。 やりたいこと: 特定の形のDOMを画面に表示したい。 具体的なこと: Reactランタイムがコンポーネントツリーを実行してDOMを更新する。 最適化: DOMをいい感じに差分更新する。 また、useStateなどといったステー
React 19時代のコンポーネント設計ベストプラクティス
2026-02-18 React 19、コンポーネント設計どう変わった？〜うひょさんに聞く最新 実務Tips〜
Introducing: React Best Practices - Vercel
We've encapsulated 10+ years of React and Next.js optimization knowledge into react-best-practices, a structured repository optimized for AI agents and LLMs. React performance work is usually, well, reactive. A release goes out, the app feels slower, and the team starts chasing symptoms. That’s expensive, and it’s easy to optimize the wrong thing. We’ve seen the same root causes across production
コーディングエージェントが useEffect を多用するのがつらい
useEffect Policy useEffect must be used only for synchronizing with the external world — for example: API calls, WebSocket connections, browser APIs, external store subscriptions, or timers. In all other cases, it must not be used. Anti-patterns - Copying props or derived values into local state - Running logic in response to flag changes - Handling user actions inside effects instead of event han
Remix 3 発表まとめ - React を捨て、Web標準で新しい世界へ
はじめに 2025年10月10日、カナダのトロントで開催されたイベント "Remix Jam 2025" で Ryan Florence と Michael Jackson が Remix 3 を発表しました。このセッションは、React Router の生みの親たちが、なぜ React から離れ、独自のフレームワークを作ることにしたのか、その理由と新しいビジョンを語った歴史的な発表です。 本記事では、1時間47分に及ぶセッションの内容を詳しく解説します。 なぜ Remix 3 を作るのか 💡 動画で確認する (3:17:30~) React への感謝と決別 Michael Jackson と Ryan Florence は、React に対して深い敬意を持っています。React は彼らのキャリアを変え、Web 開発の考え方を一変させました。React Router を10年以上メンテナ
React Conf 2025
はじめに10/7/2025 ~ 10/8/2025 にかけて開催された React Conf 2025 に招待を受け、参加してきた。 React Conf は Meta 社と callstack 社が主催する、React に関するカンファレンスである。 今回は、その内容を振り返り、特に印象に残ったセッションについてまとめる。 Day 1IntroductionReact Conf 2025 のはじまりは、 Seth Webster 氏の挨拶から始まった。 短い挨拶だったが、その中で彼は React の素晴らしさはただのライブラリではなくコミュニティの大きさにあると語った。 私も同意見で、 React はそれ自体が素晴らしいライブラリであることは間違いないが、それ以上に Web やそれ以外のプラットフォーム開発に対する人々の考え方を大きく変えたことが重要だと思う。 React Keynote
Thoughts on Remix 3
Remix is a web framework by React underdogs authors of the most popular React package. A few days ago at Remix Jam 2025, Ryan and Michael shared a sneak peek of Remix v3. There’s no official blog post or documentation yet. Here’s my attempt at explaining what it is about. Remix v1 was a React framework that managed data loading and server-side rendering. Its biggest achievement was the marketing w
Reactで大量描画しても60fps出すためのパフォーマンスチューニング術 - SmartHR Tech Blog
こんにちは、SmartHRでプロダクトエンジニアをやっている @Tokky0425 です。 みなさんは普段組織で働いていますか？僕は組織で働いています。 組織で働くにあたって便利なもの、ありますよね。そう、組織図です。 SmartHR にも組織図の機能があるのですが、部署数や従業員数が多いとブラウザ上での操作が重くなってしまうという問題がありました。 最近「数万人規模の組織図での 60fps」を目指してこの組織図機能の描画パフォーマンス改善を行ったので、その中で実践したフロントエンド開発における大量描画処理の Tips を共有します。(React を前提としています) そもそも問題はどこにあるのか 最近まで、SmartHRの組織図機能は数万人規模の企業で十分に使えるような作りになっていませんでした。というのも、対象従業員数が数万人を超えてくると、いろんな操作が著しく重くなり、実用に耐える操
React Trends in 2025 - Robin Wieruch
Every year I discuss the most important trends in the world of React. In this article, we will explore the React trends in 2025 that you should be aware of. Whether you are a beginner or an experienced developer, these trends will help you stay up-to-date with the latest developments in the React ecosystem. React Server ComponentsWe’ve come a long way with React Server Components (RSC). The first
100秒テックの「React 19 がでた」を見たので、チートシートを作成してみました
はじめに 今回は、いつも楽しく拝見させていただいている「100秒テック」のakiさんとコラボしました！ まずは、とにかく動画をご覧ください！ 他にも役立つフロントエンド関連の技術動画がたくさんあるので、いいねとチャンネル登録をよろしくね！（言いたかったｗ） この記事では、タイトル通り、React19のチートシートとして活用いただけるように仕上げました。またサンプルコードは、できるだけ理解しやすいようシンプルにして、React環境にコピー&ペーストするだけで動作するようにしました。 動画と合わせて、この記事もReact 19の理解を深めるのに役立てていただけると嬉しいです。ぜひ、最後までご覧ください！ アクション アクションは、React 19を理解する上で欠かせない重要な概念です。このアクションを基盤として、様々な機能が追加されています。そのため、React 19で追加された機能を活用する
React Compiler – React
はじめに React Compiler の機能について知り、React アプリケーションを自動的に最適化して useMemo、useCallback、React.memo による手動メモ化を不要にしてくれる仕組みについて理解しましょう。 インストール React Compiler のインストールを行い、ビルドツールと組み合わせるための設定方法を学びましょう。 段階的な導入 全面的に有効にする準備がまだできていない場合に、既存のコードベースで React Compiler を段階的に導入する戦略を学びましょう。 デバッグとトラブルシューティング 期待通りに動作しない場合はデバッグガイドを参考に、コンパイラエラーとランタイムエラーの違いやよくある失敗パターンを理解しつつ、体系的なデバッグ作業を行いましょう。 設定とリファレンス 詳細な設定オプションと API リファレンスについては以下をご覧く
render hooks パターンの注意点と対策
以下の記事で紹介されている「render hooks パターン」には注意点があるため、簡単な例と共に注意点についてまとめました。 要約 Custom Hook から Component を返却する render hooks パターンの場合、返却された Component がアンマウントされてしまうことによりバグが発生する恐れがあるので注意が必要です。 Custom Hook から Component を返さずに React element を返す実装にすれば、 アンマウントを回避できます。 Component を返却する render hooks パターンの実装例と問題点 問題の視覚的確認 以下の codesandbox の例の「Open Modal」ボタンを押下してみてください。 Modal コンポーネントが現れるのですが、一定間隔でチカチカしています。 実装例 実装は以下の通りです。
React Server ComponentでもContextで状態を共有する | フューチャー技術ブログ
Next.jsの最近の大きな目玉機能はReact Server Component(以下サーバーコンポーネント)です。パフォーマンスアップに有効だったり、gRPCだRESTだGraphQLだ論争を終わりにするServer Actionsなど盛りだくさんです。 一方で、サーバーコンポーネントはコーディング上の制約がいろいろあります。 サーバーコンポーネントではhooksが使えない サーバーコンポーネントのソースからクライアントコンポーネントはimportできるが逆はできない。レンダーツリーを工夫すればクライアントコンポーネントの下にサーバーコンポーネントを配置することは可能 サーバーコンポーネントでは非同期コンポーネントを作成でき、fetchでサーバーから情報をとってきたり、DBアクセスした結果を利用できます。しかし、最近のモダンReactの場合、状態管理などはすべてhooksに寄せるので大
React / Remix への依存を最小にするフロントエンド設計 - 一休.com Developers Blog
CTO 室の恩田(@takashi_onda)です。 一休レストランのフロントエンドアーキテクトを担当しています。 Intro 一休レストランでは、以前ご紹介したようにフロントエンドで React / Remix を利用しています。 user-first.ikyu.co.jp 一方、設計方針としては、React / Remix への依存が最小になるように心掛けています。 今日は、そんな一見矛盾するような設計方針について、ご紹介したいと思います。 この記事を読んでいただき Remix に興味をもたれたら、明後日 2024/8/7(水) 19:00〜 のオンラインイベント offers-jp.connpass.com にもご参加いただけると嬉しいです。 この記事でご紹介している疎結合なフロントエンドアーキテクチャを実現する Remix の魅力についてお話します。 なぜ依存を最小にするのか？ R
React Routerはルートをどうランク付けしているか
React Router とは React Router のルートのマッチング React Router のドキュメントのRanking Routesのセクションを例として説明します。 以下の 5 つのパスパターンを取り得るアプリケーションがあるとして、/teams/newというパスが与えられたときに、どのパスパターンがマッチするでしょうか。 [ "/", "/teams", "/teams/:teamId", "/teams/:teamId/edit", "/teams/new", ]; React Router はここからさらにルートをランク付けし、最終的に/teams/newを最もマッチするルートとして採用します。 どのようにルートをランク付けするか ランク付けというのは、ルートがどれだけパスにマッチするかを評価することです。React Router は、ルートのパスパターンと与えら
チームで同じような React コンポーネントを書く
はじめに 「eslint-plugin-react の plugin:react/recommended に含まれていないルールにも有効なものがあるよ！みんなで同じようなコンポーネント書いて、レビューを楽にして保守性も上げよう！」という内容の記事です。 この記事では React の関数コンポーネント、TypeScript、Prettier を使っている前提で書いています。そのため、タグの位置調整など Prettier で対応可能なものは Prettier に任せる方針です。 先に結論の .eslintrc.cjs を載せておきます。React 以外の設定は省いています。 { extends: [ "plugin:react/recommended", "plugin:react/jsx-runtime", "plugin:react-hooks/recommended" ], rules:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsと状態管理のプラクティス
Llama Coder – AI Code Generator
React 研修 (2024)
