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
React Hooksパターンの使いどころ
はじめに Reactでコンポーネントを開発していると、同じような状態管理ロジック（ホバー検知、フォーム入力、API呼び出しなど）を複数の場所で書いていることに気づきます。 以前のReactでは、このような状態ロジックを共有するためにHOCやRender Propsパターンが使われていました。しかし、これらのパターンはネストが深くなったり、propsの出所が分かりにくくなるという問題がありました。 Hooksパターンは、状態を持つロジックを関数として抽出し、複数のコンポーネントで再利用可能にする手法です。 本記事では、Hooksパターンの構造と適用判断基準を解説し、現代のReactにおけるデータ取得や状態管理のベストプラクティスについても考察します。 第1章：このパターンが解決する問題 状態ロジックの重複 コンポーネント間で同じような状態管理ロジックが重複する場面があります： 複数のコンポー
Data Fetching Patterns in React Server Components
All Articles As developers, what we are optimizing for is basically how fast we can show meaningful content to the end user, at an optimal infra cost. When the final UI depends on some data from an external source, how we fetch that data has a direct impact on how soon we are showing the final UI to the user. For the last decade, we have treated data fetching as a specific "moment in time." Part 1
Reactを根本から理解する：Hooksの仕組みを実装して学ぶ
はじめに この記事のゴール Reactを使っていると、useStateやuseEffectを「こう書けば動く」という形で覚えていることが多いのではないでしょうか。 const [count, setCount] = useState(0); useEffect(() => { console.log(count); }, [count]); このコードは動きます。しかし、なぜ動くのかを説明できるでしょうか。 なぜuseStateは配列を返すのか なぜsetCountを呼ぶと再レンダリングされるのか なぜuseEffectの依存配列に値を入れると、その値が変わったときだけ実行されるのか なぜHooksを条件分岐の中で呼んではいけないのか この記事では、これらの疑問に答えるために、Hooksの仕組みを実際に実装しながら学んでいきます。最終的には、Hooksが「魔法」ではなく、JavaScrip
Reactカスタムフックが可読性を損なうとき
この記事は React Advent Calender 2025 11 日目の投稿です。 可読性の高いカスタムフックを考える React 開発において、「ロジックはカスタムフックに切り出す」というプラクティスは、私たちの思考に深く根付いています。しかし、筆者の経験上、「なんとなく」でカスタムフックに切り出されたロジックは、かえってコードの可読性を下げることが多いと感じています。コンポーネントの挙動を理解するために別ファイルを行き来し、分断されたロジックを頭の中でつなぎ合わせなければならないコードは可読性が低く、改修や不具合の調査を難しくします。 本記事では、React のカスタムフックが、かえってコードの可読性を損なってしまうアンチパターンと、その回避策について考察します。「ロジックはカスタムフックに切り出す」という一般的なプラクティスの落とし穴を明らかにし、コンポーネントの凝集度と透明性
asChild の課題と他の合成パターンの比較
はじめに Radix UI の普及とともに asChild プロパティが広く採用され、コンポーネントの柔軟な合成が可能になりました。しかし、その利便性の裏で型安全性の欠如という課題が指摘されています。 TypeScript による型チェックが十分に機能しないこと、React.cloneElement への依存による予期しない挙動、そして React Server Components との互換性の問題——これらが主な課題です。 本記事では、asChild の技術的な課題を掘り下げます。React.cloneElement がどのように機能し、なぜ型安全性が損なわれるのかを探りつつ、render prop、as prop、hooks といった代替の合成パターンを比較検討します。Radix UI、Ark UI、Ariakit、Headless UI、Base UI、React Aria がそれ
Denial of Service and Source Code Exposure in React Server Components – React
Denial of Service and Source Code Exposure in React Server Components Security researchers have found and disclosed two additional vulnerabilities in React Server Components while attempting to exploit the patches in last week’s critical vulnerability. These new vulnerabilities do not allow for Remote Code Execution. The patch for React2Shell remains effective at mitigating the Remote Code Executi
Critical Security Vulnerability in React Server Components – React
There is an unauthenticated remote code execution vulnerability in React Server Components. We recommend upgrading immediately. On November 29th, Lachlan Davidson reported a security vulnerability in React that allows unauthenticated remote code execution by exploiting a flaw in how React decodes payloads sent to React Server Function endpoints. Even if your app does not implement any React Server
CVE-2025-55182 React Server Components RCE POC
README.md POC for CVE-2025-55182 that works on Next.js 16.0.6 Core idea Use the $@ deserialization to get a Chunk reference, and put Chunk.prototype.then as the then property of the root object. Then then would be invoked with root object as this/chunk when it is awaited/resolved. By setting the status to RESOLVED_MODEL, now we can call initializeModelChunk with a fake chunk that is comlpetely in
🎉 Ant Design 6.0 is Here! 🎉 · Issue #55804 · ant-design/ant-design
English | 中文 Introduction Since its open-sourcing, Ant Design has garnered 96.6K Stars, accumulated 31.9K issues, 20.7K PRs, released 904 npm versions, and has had 2314 contributors participate in its development. These numbers not only represent the community's activity and support but also witness the project's continuous evolution and maturation. It is because of you that Ant Design can continu
Fumadocs
the React.js docs framework you love. Build excellent documentations, your style. Fumadocs is a React.js documentation framework for Developers, beautifully designed by Fuma Nama. Bringing powerful features for your docs workflows, with high customizability to fit your preferences, works seamlessly with any React.js framework, CMS — anything.
GitHub - tmikov/imgui-react-runtime: React + Dear ImGui + Static Hermes
This project demonstrates how Static Hermes seamlessly bridges JavaScript and C++ ecosystems—combining React's modern development experience with the performance and directness of Dear ImGui and Sokol. Key highlights: Fully native in Release mode - Zero runtime dependencies, instant startup, single 5.2MB executable JavaScript-first implementation - ~2,400 lines of hand-written JS, only ~700 lines
Don't Blindly Use useTransition Everywhere | Nicolas Charpentier
Lately, I have been looking into React's useTransition hook because I keep seeing posts about how great it is for improving the user experience in React applications. I have seen posts recommending this hook for managing state transitions more effectively, especially in scenarios involving slow-rendering components, but also just as a loading state handler. So, naturally, I looked closely at the d
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jotaiによるReact再入門
[React 19] Bug: `cloneElement` in client component with async server component as children not working · Issue #32392 · facebook/react
GitHub - gaearon/rscexplorer: A tool for people curious about the React Server Components protocol
refactor: removing as-child by tianenpang · Pull Request #5972 · heroui-inc/heroui
Release v1.0.0 · mui/base-ui
Moving Mountains: How We Migrated from Enzyme to React Testing Library
Release v6.5.0 · vadimdemedes/ink