エフェクトは React のパラダイムからの避難ハッチです。React の外に「踏み出して」、非 React ウィジェット、ネットワーク、またはブラウザ DOM などの外部システムと同期させることができるものです。外部システムが関与していない場合（例えば、props や state の変更に合わせてコンポーネントの state を更新したい場合）、エフェクトは必要ありません。不要なエフェクトを削除することで、コードが読みやすくなり、実行速度が向上し、エラーが発生しにくくなります。 このページで学ぶこと コンポーネントから不要なエフェクトを削除する理由と方法 エフェクトを使わずに高価な計算をキャッシュする方法 エフェクトを使わずにコンポーネントの state をリセットおよび調整する方法 イベントハンドラ間でロジックを共有する方法 イベントハンドラに移動すべきロジック 親コンポーネントに変更
This page will give you an introduction to React Compiler and how to try it out successfully. These docs are still a work in progress. More documentation is available in the React Compiler Working Group repo, and will be upstreamed into these docs when they are more stable. React Compiler is a new compiler currently in Beta, that we’ve open sourced to get early feedback from the community. While i
When a file marked with 'use client' is imported from a Server Component, compatible bundlers will treat the module import as a boundary between server-run and client-run code. As dependencies of RichTextEditor, formatDate and Button will also be evaluated on the client regardless of whether their modules contain a 'use client' directive. Note that a single module may be evaluated on the server wh
Server and Client Composition PatternsWhen building React applications, you will need to consider what parts of your application should be rendered on the server or the client. This page covers some recommended composition patterns when using Server and Client Components. When to use Server and Client Components? Here's a quick summary of the different use cases for Server and Client Components:
If you're familiar with React, your mental model before RSC might look similar to this (blank space on the left is intentional): RSC does not change that mental model, but it adds a new layer before any of that existing code runs: The RSC Server layer might remind you of Remix loaders, Astro templates, build-time scripts, and other code that runs ahead-of-time — but in the form of React components
3.0.0 (2023-10-31) GitHub PR: #9478 GitHub release notes: https://github.com/facebook/docusaurus/releases/tag/v3.0.0 GitHub release discussion: #9481 Upgrade guide: docusaurus.io/docs/migration/v3 💥 Breaking Change create-docusaurus, docusaurus-mdx-loader, docusaurus-plugin-content-blog, docusaurus-remark-plugin-npm2yarn, docusaurus-theme-classic #9451 feat(mdx-loader): upgrade to MDX v3 (@slorbe
TypeScript is a popular way to add type definitions to JavaScript codebases. Out of the box, TypeScript supports JSX and you can get full React Web support by adding @types/react and @types/react-dom to your project. Installation All production-grade React frameworks offer support for using TypeScript. Follow the framework specific guide for installation: Next.js Remix Gatsby Expo Adding TypeScrip
Caching in Next.jsNext.js improves your application's performance and reduces costs by caching rendering work and data requests. This page provides an in-depth look at Next.js caching mechanisms, the APIs you can use to configure them, and how they interact with each other. Good to know: This page helps you understand how Next.js works under the hood but is not essential knowledge to be productive
The React Handbook ⚛🤌 Modern approaches to architecture and feature development for production-ready React apps. Why Read This Instead of the React Docs? If you haven't ever worked with React before, this guide might seem a little dense. There are some fundamentals we can recommend, but to put it bluntly: you should not be reading this guide before you've read the official docs. The docs will hel
Some of your components may need to control and synchronize with systems outside of React. For example, you might need to focus an input using the browser API, play and pause a video player implemented without React, or connect and listen to messages from a remote server. In this chapter, you’ll learn the escape hatches that let you “step outside” React and connect to external systems. Most of you
Today we are thrilled to launch react.dev, the new home for React and its documentation. In this post, we would like to give you a tour of the new site. tl;dr The new React site (react.dev) teaches modern React with function components and Hooks. We’ve included diagrams, illustrations, challenges, and over 600 new interactive examples. The previous React documentation site has now moved to legacy.
Today we are extremely happy to finally announce Docusaurus 2.0! 🥳️ At Meta Open Source, we believe Docusaurus will help you build the best documentation websites with minimal effort, letting you focus on what really matters: writing the content. After 4 years of work, 75 alphas and 22 betas, the next generation of Docusaurus is ready for prime time. From now on, we now plan to respect Semantic V
Effects are an escape hatch from the React paradigm. They let you “step outside” of React and synchronize your components with some external system like a non-React widget, network, or the browser DOM. If there is no external system involved (for example, if you want to update a component’s state when some props or state change), you shouldn’t need an Effect. Removing unnecessary Effects will make
React is an excellent tool for building front-end applications. It has a diverse ecosystem with hundreds of great libraries for literally anything you might need. However, being forced to make so many choices can be overwhelming. It is also very flexible, you can write React applications in any way you like, but that flexibility comes with a cost. Since there is no pre-defined architecture that de
Since announcing the start of the new React documentation effort, we’ve been busy writing the content and building a custom website designed around the learning experience. We are now ready to share this early preview of what we’ve created so far to get your feedback. This early preview is deployed at beta.reactjs.org and is in active development. Please leave any feedback in #3308. TLDR Visit the
TestingIn React and Next.js, there are a few different types of tests you can write, each with its own purpose and use cases. This page provides an overview of types and commonly used tools you can use to test your application. Types of tests Unit Testing involves testing individual units (or blocks of code) in isolation. In React, a unit can be a single function, hook, or component. Component Tes
Updated September 29, 2022! We're close to completing the remaining pages, and there is now a link to the Beta site from the main site. Updated October 22, 2021! We have released React Docs Beta. See more details in the announcement and leave feedback on this issue! Updated June 10, 2021! Full details in this comment. Over the next months, we're planning to rebuild our website with fresh content!
Overview React 18 will include architectural improvements to React server-side rendering (SSR) performance. These improvements are substantial and are the culmination of several years of work. Most of these improvements are behind-the-scenes, but there are some opt-in mechanisms you’ll want to be aware of, especially if you don’t use a framework. The primary new API is renderToPipeableStream, whic
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く