Today we're sharing that View Transitions and Activity are ready to try in the experimental channel, along with docs and updates on other areas we're actively working on:
react.dev/blog/2025/04...
React Labs: View Transitions, Activity, and more – React
The library for web and native user interfaces
-
View full thread
Check out the blog post for a list of what we’re working on:
react.dev/blog/2025/04...React Labs: View Transitions, Activity, and more – React
The library for web and native user interfaces
Finally, we’re looking for speakers to help us create talks about the features covered in this post.
If you’re interested in speaking at ReactConf, please apply here (no talk proposal required):
forms.reform.app/react-conf/c...React Conf 2025 Call for Speakers
This form is created with Reform - A form builder for creating clean, on-brand forms. No code required.
When the features we’re working on are shared too early, it can create churn and confusion in the community.
To balance being transparent and limiting confusion, we’re sharing the problems we’re currently working on, without sharing too much about the solution we have in mind.
When new features are ready to try in the experimental release, we’ll announce them on the blog with docs included, similar to what we’re doing with View Transitions and Activity today. Before then, you can follow along, but let us cook.
Activity also includes SSR optimizations, and we may add more modes to Activity in the future.
Check out the blog post and docs for more info:
react.dev/blog/2025/04...React Labs: View Transitions, Activity, and more – React
The library for web and native user interfaces
In this post, we’re also sharing some of the problems we’re currently working on. As we iterate on solutions, you may see features we’re testing shared from the PRs we are landing.
Keep in mind, as we try different ideas, we often change or remove different solutions after trying them out.
Activity is also ready to try in react@experimental.
Activity is a new component to hide and show parts of the UI:
<Activity mode={isVisible ? 'visible' : 'hidden'}>
Activity allows you to pre-render parts of the app the user is likely to visit next, or restore state when a user returns to part of the app, so state like input fields isn’t lost:
ViewTransitions can also be triggered by useDeferredValue and animate lists:
Check out the blog post and docs to see how to use View Transitions, how they work, and explore more use cases:
react.dev/blog/2025/04...React Labs: View Transitions, Activity, and more – React
The library for web and native user interfaces
For shared element transitions, you can add a “name”. This will animate an item from one part of the app to another:
<ViewTransition name={id}>
ViewTransition can also be triggered by Suspense, to animate content to replace the fallback:
Adding <ViewTransition> around part of the app cross-fades the content by default:
You can customize animations with props on ViewTransition:
<ViewTransition default=”slow-fade”>
View Transitions are now ready to try in react@experimental.
They’ve been tested in production and are stable, but the final API may change as we iterate on feedback. Check out the docs to see how to add animations to your React app:
react.dev/reference/re...
<ViewTransition> – React
The library for web and native user interfaces
To animate a transition, you can add <ViewTransition> around part of the app to declare “what” to animate. ViewTransition activates "when" an update is caused by an animation trigger like startTransition, useDeferredValue, or Suspense, and "how" to animate is defined in CSS.
React Compiler RC is now available! We've added support for swc and are working towards a stable release
react.dev/blog/2025/04...React Compiler RC – React
The library for web and native user interfaces
React Conf is back for 2025! Join our co-hosts, Meta and
@callstack.com , October 7-8 in Henderson, Nevada or join the free livestream
-
View full thread
If you’re interested in sponsoring React Conf you can contact us using this form
forms.reform.app/react-conf/s...
React Conf 2025 Sponsorship Application
This form is created with Reform - A form builder for creating clean, on-brand forms. No code required.
We’re excited to share more about our speaker lineup and sponsors soon! Check out the React Conf website for the latest updates:
conf.react.dev
React Conf 2025 | October 7-8 | Henderson, Nevada & online | Join us!
If you're interested in speaking at React Conf, please respond to our call for speakers. No talk submission is necessary!
forms.reform.app/react-conf/c...
React Conf 2025 Call for Speakers
This form is created with Reform - A form builder for creating clean, on-brand forms. No code required.
Scholarships for in-person tickets are available
forms.reform.app/react-conf/s...
React Conf 2025 Scholarship Application
This form is created with Reform - A form builder for creating clean, on-brand forms. No code required.
The lottery for tickets to attend React Conf in person in Henderson, Nevada are now open! Drawings begin April 25th, sign up here
forms.reform.app/react-conf/t...
Join the React Conf Ticket Lottery
This form is created with Reform - A form builder for creating clean, on-brand forms. No code required.
If you can’t make it in person, the conference will be livestreamed for free. Sign up for our newsletter to get updates on the livestream
conf.react.dev#newsletterReact 19.1 has just been released! Check out the latest updates here:
github.com/facebook/rea...
Release 19.1.0 (March 28, 2025) · facebook/react
Owner Stack
An Owner Stack is a string representing the components that are directly responsible for rendering a particular component. By combining Owner Stacks with Component Stacks, you can bette...
Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework.
We’re also providing docs for when a framework isn’t a good fit for your project, or you prefer to start by building a framework.
react.dev/blog/2025/02...
Sunsetting Create React App – React
The library for web and native user interfaces
-
View full thread
We've also re-titled the new "Building your own React Framework" docs to "Building a React App from Scratch" to clarify that it covers many use cases for deciding to start with a build tool instead of a framework:
See all the changes here:
github.com/reactjs/reac...
Updates from feedback by rickhanlonii · Pull Request #7624 · reactjs/react.dev
Overview
We received some good feedback on the Sunsetting Create React blog post and new Build a Framework docs. This PR attempts to address some of the main concerns by clarifying the language and...
Finally, Create React App will continue working in maintenance mode, and we've published a new version of Create React App to work with React 19. See the blog post for more info:
react.dev/blog/2025/02...Sunsetting Create React App – React
The library for web and native user interfaces
Based on feedback, we've added migration guides from Create React App to Vite, Parcel, or Rspack when a framework isn't the right fit for your use case, or you prefer to continue building your own framework:
All the frameworks we recommend support client-side rendering (CSR) and single-page apps SPAs. For existing apps, we've provided links to guides to help you migrate to a SPA using a framework.
react.dev/blog/2025/02...Sunsetting Create React App – React
The library for web and native user interfaces
If your app has unusual constraints, or you prefer to solve these problems by building your own framework, or you just want to learn how React works from scratch, we've added new docs for building a React framework:
react.dev/learn/buildi...
Building a React Framework – React
The library for web and native user interfaces
Although Create React App makes it easy to get started, there are several limitations that make it difficult to build high performant production apps. Most production apps need solutions to problems like routing, data fetching, and code splitting.
In principle, we could solve these problems by essentially evolving Create React App into a framework. However, CRA currently has no active maintainers, and instead of creating a new framework, we've decided to recommend one of the existing frameworks that solve these problems already.
[Not loaded yet]
ho ho ho
React v19 is now stable!
react.dev/blog/2024/12...
React v19 – React
The library for web and native user interfaces
react@19.0.0-rc1 is out today with a replacement for sibling pre-rendering. Give it a try and maybe we can ship React 19 soon?
github.com/facebook/rea...
[React 19] Disabling prerendering siblings of suspended components breaking common pattern · Issue #29898 · facebook/react
Summary I'm creating this issue to continue the discussion that spawned in the already merged PR (#26380) Several community members have raised concerns about this change and it has gained traction...
did you know that you can conditionally exit an effect?
this is useful if you want a subscription to only stay active while some condition is true, and to stay removed while that condition is false.
a bit mindbending, but so it is with react!
[Not loaded yet]
yup, one useEffect per one distinct synchronization process
however, React effects don’t provide a way to read previous values of state so it’s unclear where to stick this code
the mindbending moment is realizing that by exiting early, you’ll let the “previous iteration” of the effect clean up for itself (unsubscribing), while the “next iteration” is a noop
to put this more generally, this is about early exits in reactive code (which re-runs over and over when the variables that it closes over change)
in non-reactive code, the intuition is that early exit “does nothing” whereas you wanted to unsubscribe. but in reactive code, it does unsubscribe!
[Not loaded yet]
it is mindbending in the sense that when trying to implement the described behavior, simply returning is not an obvious solution.
this is because imperatively it’s usually implemented like
if (!wasActive && isActive) {
subscribe()
} else if (wasActive && !isActive) {
unsubscribe()
}
[Not loaded yet]
[Not loaded yet]
[Not loaded yet]
yes, you can use the compiler linter today — but keep your existing linter rules active. the old rules are less sophisticated but provide a solid baseline in case the compiler linter has some bugs or regressions.
this is pretty huge — the react native team has been working towards this milestone for the last six years!
reactnative.dev/blog/2024/10...
React Native 0.76 - New Architecture by default, React Native DevTools, and more · React Native
Today we are excited to release React Native 0.76!
blog post with more details about what New Architecture is. tldr: it revamps the threading model so that you can do *both* synchronous and asynchronous calls between JS and native, fixing a lot of issues with the previous model that was always async.
reactnative.dev/blog/2024/10...New Architecture is here · React Native
React Native 0.76 with the New Architecture by default is now available on npm!
[Not loaded yet]
alternatively, useId() gives you a unique id that won’t clash
[Not loaded yet]
-
View full thread
a good component is always reactive to its props. it doesn’t assume that its props will stay the same. the result of rendering a component with props changing from A to B to C should usually be the same as if it was rendered with C to begin with. a good component doesn’t obstruct the data flow.
a good component often hides a bit of state. it doesn’t burden unrelated components with state they shouldn’t know or care about.
a good component only contains the minimal necessary state it needs. it doesn’t hold things in state if they can be calculated on the fly from existing information.
