<Activity> – React
When an Activity boundary is hidden, React will visually hide its children using the display: "none" CSS property. It will also destroy their Effects, cleaning up any active subscriptions. While hidden, children still re-render in response to new props, albeit at a lower priority than the rest of the content. When the boundary becomes visible again, React will reveal the children with their previo
Separating Events from Effects – React
Event handlers only re-run when you perform the same interaction again. Unlike event handlers, Effects re-synchronize if some value they read, like a prop or a state variable, is different from what it was during the last render. Sometimes, you also want a mix of both behaviors: an Effect that re-runs in response to some values but not others. This page will teach you how to do that. You will lear
eslint-plugin-react-hooks – React
eslint-plugin-react-hooks provides ESLint rules to enforce the Rules of React. This plugin helps you catch violations of React’s rules at build time, ensuring your components and hooks follow React’s rules for correctness and performance. The lints cover both fundamental React patterns (exhaustive-deps and rules-of-hooks) and issues flagged by React Compiler. React Compiler diagnostics are automat
React 19.2 – React
In React 19.2, Activity supports two modes: visible and hidden. hidden: hides the children, unmounts effects, and defers all updates until React has nothing left to work on. visible: shows the children, mounts effects, and allows updates to be processed normally. This means you can pre-render and keep rendering hidden parts of the app without impacting the performance of anything visible on screen
App Router時代における「大規模React開発」のフォルダ設計術。Colocationによる関心の分離 | レバテックラボ（レバテックLAB）
前回は、フォルダ設計の基礎理論として、フラット構造から技術別分類、そして機能別分類への進化について学びました。特に機能別分類の優位性として、関連ファイルの物理的近接、変更影響範囲の明確化、チーム分業の責任範囲明確化という3つの重要なメリットを確認しました。 今回は、機能別分類の理論を実際のプロジェクトでどう実装するかに焦点を当てます。現代のReact開発で特に有効な具体的なパターン、Next.js App Routerとの組み合わせ方法、そしてプロジェクトの特性に応じた選択指針について詳しく解説していきましょう。 ▲Feature-based Patternのフォルダ階層 機能別分類の理論を理解したところで、実際にどのような構造で実装するかを見ていきましょう。ここでは現代のReact開発で特に有効な2つのパターンを詳しく解説します。 Feature-based Pattern：機能別分類の
Next.js 15.5
Next.js 15.5 includes Turbopack builds in beta, stable Node.js middleware, TypeScript improvements, next lint deprecation, and deprecation warnings for Next.js 16. Highlights for this release include: Turbopack Builds (beta): Production turbopack builds (next build --turbopack) now in beta Node.js Middleware (stable): Node.js runtime support for middleware is now stable TypeScript Improvements: Ty
Reactフォルダ構造の最適解。コンポーネントの数に合わせて選ぶ基本方針 | レバテックラボ（レバテックLAB）
執筆 中川 幸哉 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。新潟県上越市出身。会津大学コンピュータ理工学部卒業後、現在は新潟市に在住。ReactやAndroidを軸に、モバイルアプリ開発やWebサイト制作、Webメディア編集部の業務改善や、プログラミング技術記事の執筆等に携わっている。著書に「たった1日で基本が身に付く! Androidアプリ開発超入門」（技術評論社）、「基礎から学ぶ React Native入門」（翔泳社）他。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「
Pure UI
Pure UI@rauchg|July 13, 2015 (9y ago)689,457 views I recently redesigned and implemented a new version of VideoPress, the WordPress video platform. The process involved, among other things, creating a new UI, ditching the dependency on Flash in favor of HTML5 <video> and introducing new functionality. The particular way in which I implemented it led me to some interesting insights around the growi
How Parcel bundles React Server Components
7/26/2025 Parcel v2.14.0 added support for React Server Components. The release blog post and documentation describe what RSCs are and how to use them with Parcel. This post is a deep dive into the internals: how RSCs integrate with a bundler, what directives like "use client" do internally, how code splitting works and how RSCs improve it, etc. Let's jump in! What does a bundler do? Before we get
【React】フォルダ構成の考え方
はじめに Reactのフォルダ構成は難しい Reactは、フォルダ構成に"意見を持ちません"。 この柔軟性が、フォルダ構成の難しさに繋がっていると思います。 また、フォルダ構成について体系的に書かれている情報が少なく、特に用語の説明がなかったりするため、理解が難しいと感じました。 そこで、フォルダ構成を体系的に理解し、作成できるようになるため、フォルダ構成の考え方についてまとめました。 この記事の目的 フォルダ構成について： 意見を持てるようになる 調べやすくなる そして、リポジトリを見た時に構造化して見えるようになる ことを目的としています。 フォルダ構成の種類 フォルダ構成の種類は、大きく分けて３つに分類できます： type-based feature-based layer-based 「by 〇〇」という呼び方も存在しますが、意味は同じです。 詳細は、〇〇-based以外の呼ばれ方
DifyのReActを用いてナレッジ／記事要約エージェントを作ってみた - Taste of Tech Topics
皆さんこんにちは。バックエンドエンジニアの前田です。 最近は、いよいよ暑さが本気を出してきたので、熱中症対策をしなくては、と考えています。 さて、今回はDifyのv1.0.0で追加されたReActを用いてナレッジ／記事要約エージェントを作成しました。 ナレッジに登録したドキュメントなどをもとに、Web検索もして情報を補足し、文章を要約するエージェントが欲しいと思い、作ってみました。 Difyの環境構築と基本的な使い方については以下の記事を参考にしてみてください。 今回はDifyのv1.6.0を用いて作成しました。 acro-engineer.hatenablog.com 1. DifyにおけるReActとは 2. 今回作成するアプリについて 2.1. 構成 2.2. ナレッジ検索 2.3. エージェントノード 3. 実際に動かしてみる 4. まとめ 1. DifyにおけるReActとは D
2025-07-21のJS: Nuxt 4.0、Next.js 15.4、npmのパッケージメンテナーを狙ったフィッシング
JSer.info #742 - Nuxt 4.0がリリースされました。 Announcing Nuxt 4.0 · Nuxt Blog 新しいプロジェクト構造としてapp/ディレクトリがデフォルトになり、useAsyncDataとuseFetchが同じキーでキャッシュを共有するようになりました。また、TypeScriptの設定ファイルをapp/server/node/shared用にそれぞれ作成し、CLIの改善なども含まれています。 マイグレーションガイドも公開されています。 Upgrade Guide · Get Started with Nuxt v4 Next.js 15.4がリリースされました。 Next.js 15.4 | Next.js Turbopackが全てのIntegration Testを通るようになっていて、次のメジャーアップデートであるNext.js 16でSta
AI Agentのアウトプットに『Next.jsの考え方』を反映するプラクティス
AI Agentの進化は目覚ましく、日々実装の品質も向上しています。しかし、開発者自身に明確な実装イメージがある場合、それをAI Agentに出力させることは難しく、さまざまな工夫を必要とします。Agentに与えるコンテキストやプロンプトを最適化したり、詳細なルールを整備することで精度を高めることができますが、これらには大変な労力を伴います。 筆者がNext.jsアプリケーションを扱う場合、実装イメージは著書『Next.jsの考え方』の内容に沿って生成されるため、「この本をAI Agentに読ませることで、アウトプットの精度を高めることができるのではないか」と考え、様々な検証を行いました。 本稿では検証を通して筆者が得た、AI Agentのアウトプットに『Next.jsの考え方』を反映するプラクティスについて紹介します。 要約 以下の条件を満たすことで、AI Agentのアウトプットに『N
Nuxtの開発元NuxtLabs、Next.jsの開発元Vercelへの合流を発表
Webアプリケーションフレームワーク「Nuxt」の開発元であるNuxtLabsは、同じくWebアプリケーションフレームワーク「Next.js」の開発元であるVercelへの合流（Join）を発表しました（Vercelの発表、NuxtLabsの発表）。 We are excited to announce that NuxtLabs is joining @Vercel to pursue our mission on creating the best DX to deliver the best UX. Read more at https://t.co/Lp4SPXR31B pic.twitter.com/l4D5dbJNBi — NuxtLabs (@nuxtlabs) July 8, 2025 NuxtとNext.jsのそれぞれの違いと特徴とは NuxtLabsがオープンソースソフ
ブラウザから MCP サーバーに接続する use-mcp React フック
React コンポーネントから MCP サーバーに接続する use-mcp フックを使用したコンポーネントの例を試してみましょう。2025-06-18 バージョンの MCP の仕様ではクライアントとサーバーのトランスポートの方法として stdio と Streamable HTTP が定義されていますが、use-mcp では Streamable HTTP による接続をサポートしています。HTTP もしくは SSE（Server-Sent Events）を使用して MCP サーバーに接続します。 MCP サーバーとして Git MCP を使用します。これは GitHub の任意のレポジトリを MCP サーバーとして利用できるツールです。public なレポジトリであれば認証無しで接続できます。URL はレポジトリの URL の github.com の部分を gitmcp.io に置き換え
Reactコンポーネントのレンダリング最適化（UTS Portalでの具体的事例）
LINEヤフー プロダクトストラテジ部の江口です。普段はバックエンドエンジニアとして業務に関わっていますが、今回はReact.jsについての記事を執筆します。この記事では私たちが開発する「UTS Portal」という社内向けプロダクトで発生していたReact.jsのパフォーマンス悪化問題について原因と改善内容をまとめたものです。 UTS Portalについて まず私たちが開発するUTS Portalについて説明します。 UTS PortalとはUTS（Universal Tracking System）という内製ログトラッキングシステムを利用する際に「どのようなトラッキングログを取得したいか？」を事前に定義・管理しておくためのポータルサイトです。 ログ定義を管理しておくことで、取得するログがユーザーのプライバシー侵害とならないかを事前にレビューする際や実際にログの取得を開始した後のモニタリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
react/CHANGELOG.md at main · facebook/react
React 関連の参考になる記事まとめ - Qiita
RSCの時代にReactとフレームワークの境界を探る
TypeScript + Reactで特定の要素だけを受け付けるコンポーネントを型安全に実装する - Qiita