はてなブックマーク

Last week we hosted React Conf 2025 where we announced the React Foundation and showcased new features coming to React and React Native. React Conf 2025 was held on October 7-8, 2025, in Henderson, Nevada. The entire day 1 and day 2 streams are available online, and you can view photos from the event here. In this post, we’ll summarize the talks and announcements from the event. Day 1 Keynote Watc

React Compiler 1.0 is available today. Compiler-powered lint rules ship in eslint-plugin-react-hooks’s recommended and recommended-latest preset. We’ve published an incremental adoption guide, and partnered with Expo, Vite, and Next.js so new apps can start with the compiler enabled. We are releasing the compiler’s first stable release today. React Compiler works on both React and React Native, an

Today, we’re announcing our plans to create the React Foundation and a new technical governance structure. We open sourced React over a decade ago to help developers build great user experiences. From its earliest days, React has received substantial contributions from contributors outside of Meta. Over time, the number of contributors and the scope of their contributions has grown significantly.

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

In React Labs posts, we write about projects in active research and development. In this post, we’re sharing two new experimental features that are ready to try today, and updates on other areas we’re working on now. React Conf 2025 is scheduled for October 7–8 in Henderson, Nevada! We’re looking for speakers to help us create talks about the features covered in this post. If you’re interested in

We’re publishing React Compiler RC today, in preparation of the compiler’s stable release. We’re merging eslint-plugin-react-compiler into eslint-plugin-react-hooks. We’ve added support for swc and are working with oxc to support Babel-free builds. React Compiler is a build-time tool that optimizes your React app through automatic memoization. Last year, we published React Compiler’s first beta an

Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch. When we released Create Re

After installation you can enable the linter by adding it to your ESLint config. Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it’s fully released. Backwards Compatibility React Compiler produces code that depends on runtime APIs added in React 19, but we’ve since added support for the compiler to also work with React 17 and 18. If you are no

Server Functions are for use in React Server Components. Note: Until September 2024, we referred to all Server Functions as “Server Actions”. If a Server Function is passed to an action prop or called from inside an action then it is a Server Action, but not all Server Functions are Server Actions. The naming in this documentation has been updated to reflect that Server Functions can be used for m

Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. This was our first in-person conference since 2019, and we were thrilled to be able to bring the community together again. At React Conf 2024, we announced the React 19 RC, the React Native New Architecture Beta, and an experimental release

The improvements added to React 19 require some breaking changes, but we’ve worked to make the upgrade as smooth as possible, and we don’t expect the changes to impact most apps. React 18.3 has also been published To help make the upgrade to React 19 easier, we’ve published a react@18.3 release that is identical to 18.2 but adds warnings for deprecated APIs and other changes that are needed for Re

React 19 is now stable! Additions since this post was originally shared with the React 19 RC in April: Pre-warming for suspended trees: see Improvements to Suspense. React DOM static APIs: see New React DOM Static APIs. The date for this post has been updated to reflect the stable release date. In our React 19 Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. I

In React Labs posts, we write about projects in active research and development. We’ve made significant progress since our last update, and we’d like to share our progress. React Conf 2024 is scheduled for May 15–16 in Henderson, Nevada! If you’re interested in attending React Conf in person, you can sign up for the ticket lottery until February 28th. For more info on tickets, free streaming, spon

To get status information, the Submit component must be rendered within a <form>. The Hook returns information like the pending property which tells you if the form is actively submitting. In the above example, Submit uses this information to disable <button> presses while the form is submitting. See more examples below. Parameters useFormStatus does not take any parameters. Returns A status objec

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

See more examples below. Parameters ref: The ref you received as a prop to the MyInput component. createHandle: A function that takes no arguments and returns the ref handle you want to expose. That ref handle can have any type. Usually, you will return an object with the methods you want to expose. optional dependencies: The list of all reactive values referenced inside of the createHandle code.

React Canaries: Enabling Incremental Feature Rollout Outside Meta We’d like to offer the React community an option to adopt individual new features as soon as their design is close to final, before they’re released in a stable version—similar to how Meta has long used bleeding-edge versions of React internally. We are introducing a new officially supported Canary release channel. It lets curated s

Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as lifting state up, and it’s one of the most common things you will do writing React code. You will learn How to share state between components by lifting it up What are controlled and un

In React Labs posts, we write about projects in active research and development. We’ve made significant progress on them since our last update, and we’d like to share what we learned. React Server Components React Server Components (or RSC) is a new application architecture designed by the React team. We’ve first shared our research on RSC in an introductory talk and an RFC. To recap them, we are

React comes with several built-in Hooks like useState, useContext, and useEffect. Sometimes, you’ll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. You might not find these Hooks in React, but you can create your own Hooks for your application’s needs. You will learn What custom Hooks

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.

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

Reducers let you consolidate a component’s state update logic. Context lets you pass information deep down to other components. You can combine reducers and context together to manage state of a complex screen. You will learn How to combine a reducer with context How to avoid passing state and dispatch through props How to keep context and state logic in a separate file Combining a reducer with co

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

Some components need to synchronize with external systems. For example, you might want to control a non-React component based on the React state, set up a server connection, or send an analytics log when a component appears on the screen. Effects let you run some code after rendering so that you can synchronize your component with some system outside of React. You will learn What Effects are How E

React 18 was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’r