You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/blog/2025/04/01/react-labs-what-we-have-been-working-on-april-2025.md
+26-36Lines changed: 26 additions & 36 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ April 1, 2025 by [Ricky Hanlon](https://twitter.com/rickhanlonii), and [Matt Car
11
11
12
12
<Intro>
13
13
14
-
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.
14
+
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.
15
15
16
16
</Intro>
17
17
@@ -20,13 +20,13 @@ In React Labs posts we write about projects in active research and development.
20
20
21
21
React Conf 2025 is scheduled for October 7–8 in Henderson, Nevada!
22
22
23
-
We're looking for speakers to work with us to create talks covering the features we're working on in this post. If you're interested in speaking at ReactConf, [please apply here](https://forms.reform.app/react-conf/call-for-speakers/piaae1?ga4_visitor_id=c3e8f3ce-2004-47a5-b801-f6b308280acd) (no talk proposal required).
23
+
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](https://forms.reform.app/react-conf/call-for-speakers/piaae1?ga4_visitor_id=c3e8f3ce-2004-47a5-b801-f6b308280acd) (no talk proposal required).
24
24
25
25
For more info on tickets, free streaming, sponsoring, and more, see [the React Conf website](https://conf.react.dev).
26
26
27
27
</Note>
28
28
29
-
Today, we're excited to release docs for two new experimental features ready for testing:
29
+
Today, we're excited to release documentation for two new experimental features that are ready for testing:
30
30
31
31
-[View Transitions](#view-transitions)
32
32
-[Activity](#activity)
@@ -42,24 +42,24 @@ We're also sharing updates on new features currently in development:
42
42
43
43
# New Experimental Features {/*new-experimental-features*/}
44
44
45
-
Today we're sharing two new experimental features: View Transitions and Activity.
45
+
View Transitions and Activity are now ready for testing in `react@experimental`.These features have been tested in production and are stable, but the final API may still change as we incorporate feedback.
46
+
46
47
47
-
These experimental features have been tested in production and we are confident they're stable, but the final API might change while we iterate on feedback.
48
48
49
49
You can try them by upgrading React packages to the most recent experimental version:
50
50
51
51
-`react@experimental`
52
52
-`react-dom@experimental`
53
53
54
-
Read more to see how to use these features in your app, or check out the new docs published today:
54
+
Read on to learn how to use these features in your app, or check out the newly published docs:
55
55
56
56
-[`<ViewTransition>`](/reference/react/ViewTransition): A component lets you activate an animation for a Transition.
57
57
-[`addTransitionType`](/reference/react/addTransitionType): A function that allows you to specify the cause of a Transition.
58
58
-[`<Activity>`](/reference/react/Activity): A component that lets you hide and show part of the UI.
59
59
60
60
## View Transitions {/*view-transitions*/}
61
61
62
-
React View Transitions are a new experimental feature for React designed to make it easy to add animations to the UI transitons in your app. Under-the-hood, these animations APIs use the new [`startViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) API available in most modern browsers.
62
+
React View Transitions are a new experimental feature that makes it easier to add animations to UI transitions in your app. Under-the-hood, these animations APIs use the new [`startViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) API available in most modern browsers.
63
63
64
64
To opt-in to animating an element, wrap it in the new `<ViewTransition>` component:
By default, these animations have the [default CSS animations for View Transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#customizing_your_animations) applied (most are given a default smooth cross-fade). You can use [view transition pseudo-selectors](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree) to define "how" the animation runs. For example, using `*`we can change the default for all animations:
93
+
By default, these animations use the [default CSS animations for View Transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#customizing_your_animations) applied (typically a smooth cross-fade). You can use [view transition pseudo-selectors](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree) to define "how" the animation runs. For example, you can use `*`to change the default animation for all transitions:
94
94
95
95
```
96
96
// "how" to animate.
@@ -102,13 +102,13 @@ By default, these animations have the [default CSS animations for View Transitio
102
102
}
103
103
```
104
104
105
-
When the DOM updates in an animation trigger such as `startTransition`, `useDeferredValue`, or switching Suspense fallbacks to content, React will use [declarative heuristics](/reference/react/ViewTransition#viewtransition) to automatically determine which `<ViewTransition>` components to activate for the animation. The browser will then run the animation that's defined in CSS.
105
+
When the DOM updates due to an animation trigger—like `startTransition`, `useDeferredValue`, or a `Suspense` fallback switching to content—React will use [declarative heuristics](/reference/react/ViewTransition#viewtransition) to automatically determine which `<ViewTransition>` components to activate for the animation. The browser will then run the animation that's defined in CSS.
106
106
107
-
If you're familiar with the browser view transition APIs and curious how we've built support for them into React, check out [How does `<ViewTransition>` Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs.
107
+
If you're familiar with the browser's View Transition API and want to know how React supports it, check out [How does `<ViewTransition>` Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs.
108
108
109
109
In this post, let's take a look at a few examples of how to use View Transitions.
110
110
111
-
We'll start this app, which doesn't animate any of these interactions:
111
+
We'll start with this app, which doesn't animate any of the following interactions:
112
112
- Click a video to view the details.
113
113
- Click "back" to go back to the feed.
114
114
- Type in the list to filter the videos.
@@ -120,8 +120,8 @@ import TalkDetails from './Details'; import Home from './Home'; import {useRoute
120
120
121
121
exportdefaultfunctionApp() {
122
122
const {url} =useRouter();
123
-
124
-
// 🚩Starting without animations
123
+
124
+
// 🚩This version doesn't include any animations yet
125
125
return url ==='/'?<Home />:<TalkDetails />;
126
126
}
127
127
```
@@ -153,7 +153,7 @@ function VideoInfoFallback() {
153
153
);
154
154
}
155
155
156
-
exportdefaultfunctionDetails({}) {
156
+
exportdefaultfunctionDetails() {
157
157
const { url, navigateBack } =useRouter();
158
158
constvideoId=url.split("/").pop();
159
159
constvideo=use(fetchVideo(videoId));
@@ -206,7 +206,6 @@ function SearchInput({ value, onChange }) {
@@ -12975,10 +12965,10 @@ We're also researching ways to enhance View Transitions to support gesture anima
12975
12965
Gestures present new challenges for a few reasons:
12976
12966
12977
12967
-**Gestures are continuous**: as you swipe the animation is tied to your finger placement time, rather than triggering and running to completion.
12978
-
-**Gestures don't complete:**: when you release your finger gesture animtaions can run to completion, or revert to their original state (like when you only partially open a menu) depending on how far you go.
12968
+
-**Gestures don't complete**: when you release your finger gesture animations can run to completion, or revert to their original state (like when you only partially open a menu) depending on how far you go.
12979
12969
-**Gestures invert old and new**: while you're animating, you want the page you are animating from to stay "alive" and interactive. This inverts the browser View Transition model where the "old" state is a snapshot and the "new" state is the live DOM.
12980
12970
12981
-
We have an approach we believe will work well, which may introduce a new API to trigger gesture transitions, but we're currently focused on shipping `<ViewTransition>` and re-visit gestures after it ships.
12971
+
We believe we’ve found an approach that works well and may introduce a new API for triggering gesture transitions. For now, we're focused on shipping `<ViewTransition>`, and will revisit gestures afterward.
12982
12972
12983
12973
---
12984
12974
@@ -12988,13 +12978,13 @@ When we released React 18 with concurrent rendering, we also released `useSyncEx
12988
12978
12989
12979
Using `useSyncExternalStore` comes at a cost though, since it forces bail out from concurrent features like transitions, and forces existing content to show Suspense fallbacks.
12990
12980
12991
-
Now that React 19 has shipped, we're re-visiting this problem space to create a primiative to fully support concurrent external stores with the `use` API:
12981
+
Now that React 19 has shipped, we're re-visiting this problem space to create a primitive to fully support concurrent external stores with the `use` API:
12992
12982
12993
12983
```js
12994
12984
constvalue=use(store);
12995
12985
```
12996
12986
12997
-
Our goal is to allow state stored outside of React to be read in render without tearing, and to work seamlessly with all of the concurrent features React offers.
12987
+
Our goal is to allow external state to be read during render without tearing, and to work seamlessly with all of the concurrent features React offers.
12998
12988
12999
12989
This research is still early. We'll share more, and what the new APIs will look like, when we're further along.
Copy file name to clipboardExpand all lines: src/content/blog/index.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account
14
14
15
15
<BlogCardtitle="React Labs: What We've Been Working On – April 2025"date="April 1, 2025"url="/blog/2025/04/01/react-labs-what-we-have-been-working-on-april-2025">
16
16
17
-
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 sharing other areas we're working on now.
17
+
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 sharing other areas we're working on now.
0 commit comments