Exciting New Features from React Labs: View Transitions and Activity Components

it's been a bit since we heard from the React team in particular about new features and things they're building

that changed today with an update from React Labs this is where they showcase all the cool experimental stuff they're

working on most of it makes it into React some of it doesn't what matters isn't whether or not it's going to make

it it's what they're working on and how relevant it is if you're tired of the server component stuff I get it none of

this is server components this is really useful stuff for all React developers from an overhaul of everything to do

with animations and transitions oh there's so much cool stuff there to an IDE extension yes the React team is

shipping an extension for VS Code now so cool they're shipping fast and there's a lot to cover here but we're shipping too

and I need to pay my team so a quick word from today's sponsor then we're going to dive right in today's sponsor

is a bit different because it's a company that sponsored me before you've seen them but it's also a product you

might not have seen before because I bullied them into making it yes really i convinced Convex to make their own AI

app builder and I'm so happy I did because it can do things I didn't think AI app builders could do at all i have a

whole dedicated video on if you want to check it out but to just give you the highlights here's a Slack clone that it

built this Slack clone has fully working off channels that you can create the way you would in traditional Slack test

channel oh I mistyped it if I go here I can send a message i can create a second preview environment sign in anonymously

there and see whenever I send a message it automatically appears in the other preview what's even cooler though the

database tab we hop in here i go to the messages i can go to this hey message change it to what's

good and just changing in the database updates it in the UI because you're still getting all the benefits of convex

the ability to automatically live sync whatever a change happens somewhere goes everywhere else you can run real

serverside code you can set up O with literally three lines of code add file upload and all these other annoying

things that normally take forever to do it just does so how long did it take for me to get this built believe it or not

this was a oneshot yes literally one prompt got it to generate all of this no issues it took a minute or so to build

it and it has a fully working back end and a deploy button that you can oneclick and ship this production ready

app backend to front end i'm not exaggerating when I say Chef is the only AI app builder I have ever used that

actually understands backend and builds it in a way I would comfortably ship every other one of these tools is a mess

of integrations and I usually use them to generate a nice front end and then exit and go build the backend myself

holy hell it is so cool to finally have a platform that I don't need to do the backend myself for it does it right and

the reason it does it right is because Convex has one of the best backend as a service solutions for writing code and

having it just work so if you want to build an actual app with an AI app builder Chef's the only one I can

recommend check it out today at soyb.link/chef i'm fighting the urge to skip to the extension i'll understand if

you fast forward to that part of the video but there's a lot of important things we need to talk about here as of

today the React experimental branch now has view transitions and activity i've been waiting for this for so long if

you're not familiar with few transitions it might be because you're on a Firefox-based browser and that means

that they don't work in your browser one of my favorite sites to showcase them is Nean's blog nean is an engineer that

used to work at Meta he's now at OpenAI he built some crazy style stuff specifically Stylex to power most of

Meta's styling his blog is an incredible showcase of view transitions if you're using a browser that isn't Firefox based

like I am right now so let's hop over to a Chromebased browser and now when I go to different pages do you see the

animation there how the neon moved to the top that wasn't some crazy JavaScript and CSS doing that that was

view transitions a browser API where you can tell the browser hey this element might still exist on the next page if it

does animate it on its way there and now when I click the title for this blog post did you see how cool that

is that is so awesome the view transition is on navigation if an element moves or changes it lets you

define the way the element moves and changes and that's why this all looks so cool and it's not particularly hard to

do if we go to my blog I can show you what this looks like so I'll click a random

post and this is still has a nice fancy little animation it doesn't move anything around because there isn't

really anything for it to move around but that animation was so simple to add it's also worth noting that that site

has zerojs on it it's entirely Astro i think it might have a tiny little like router in order to trigger some things

but the code for that hilariously simple blog index view transitions from Astro transitions and if we find the view

transitions component it's just in the head because it's just mounting some JS and then from there all I have to do if

I want to move something from one page to another is tag it to identify it you can literally just add this CSS snippet

and now the navigation between different routes on your app is going to feel significantly better it's so cool you

can do crazy stuff with it but it's not just for navigation you can also trigger view transitions update the DOM and then

the animations will happen which works great for single page apps here's an example with cards that when you delete

them there's an animation for them to leave which is one of the hardest things to do in the browser because when you

remove something from the DOM it's not there you can't animate it anymore but if it's a view transition all of a

sudden you can animate it you can do things to it because the removal of the thing from the DOM is now an event that

occurs that you could do things with as long as you're not targeting Firefox hopefully it catches up in the near

future react now supports view transitions which I am so so hyped for no more crazy chaotic libraries just to

make something fade out when you click delete to opt in to animating an element wrap it in the new view transition

component the component lets you declaratively define what to animate when an animation is activated you can

define when to animate by using one of the three triggers for a view transition you can call start transition you can

call deferred or you can use suspense and all of these things now will trigger transitions which is so cool by default

they're using the default CSS animations for view transitions which is a smooth crossfade but you can use the view

transition pseudo selectors to define how the animation runs so here we have view transition old star animation 300

fade out and then new fade in when the DOM updates due to an animation trigger like start transition use deferred value

or suspense fallback switching to content react will now use declarative heruristics to automatically determine

which view transitions should actually be activated for this animation so it's using the DOM the virtual DOM

specifically to see which things wrapped in which transitions changed between those states and triggers the animations

for those at that point what's cool with uh what's cool with a feature like this is I'm sure under the hood there is a

ton of work and this is really complex to build into React this way but when you work with it it just feels like a

native browser API cuz it is reacted to change a bunch of things to let it play that nice with the native browser APIs

but they did it and it works and it's great yep there we go see that nice fade you click and the thing doesn't just

switch it doesn't just instantly go to the next content it fades to the next page and you did

this by very simply wrapping view transition around the main body component url is slash then we do home

otherwise we're under details that's it that's the complexity of adding view transitions to your app wrap a thing in

your VDOM that can transform and change and now it will transition between the elements i am so excited to add this to

T3 chat you guys have no idea i hate animations normally but this is the right way to do it there's a good call

out here about where to place the view transitions there's some complexity to it similar to where to place suspense

rappers but this is much easier to figure out than suspense rappers cuz you'll see your app transitioning wrong

if you navigate in a way where you put the view transition in the wrong place thankfully there's a default none you

can add to any given view transition so that you can customize it conditionally instead very good stuff to see you can

also set a given string name for the view transition and then target that through CSS so good and now with that

change the crossfade is slower yes that takes a lot longer to run now because they added the animation

CSS bumping it to 500 can I change this can I change it to 50 you can and that works that's so cool

is a little too low to see i'm going to do 150 so you can get a little bit i actually quite like that it's

subtle but it makes the switch not as jarring honestly on a video at 30 fps is going to be hard to see the links in the

description if you want to go play with all this it's pretty cool if it was just transitioning the content of the page

would be one thing but where view transitions get really cool is shared elements similar to what we saw in

Neman's blog where the title moves somewhere else because the element is still there it's just a different place

on the page and with view transitions you can do this too you give one a unique name i don't love name for this i

think it's should be identifier or ID or something so that's what this is but now that we've established that this view

transition is for something with this identifier if the next view also has the same identifier I'll just I'll show you

the results because it's so cool watch what happens now when I click a video tell me that's not the coolest do

you know how annoying it was to write code to do this before do you know how annoying it was to have an element move

when you navigate here is all the code you have to write for that now we have the thumbnail component that

has a view transition wrapping it with an identifier we have video controls and video and video uses the thumbnail

component and we have the list view which also uses the same thumbnail component now the identifier is always

the same there's no custom JS being written there is just a wrapper component with an ID and that's all it

takes to get awesome transitions like this in your apps now it's so cool and it handles like very different things

too like here where the video is roughly the same height it does the right thing and subtly expands to fill the space but

if you click one near the bottom it moves up too which is not easy to set up i'm so happy with this it looks so cool

by default React will automatically generate a unique name for each element activated for a transition when React

sees a transition where a view transition with a name is removed and a new view transition with the same name

is added it'll activate a shared element transition they even have causes for animations so that you can control the

type of transition so if you want a different transition for navigating forward or backwards you can call the

add transition type helper and then have different cases here so with share on nav forward we want to slide forward but

on back we want to slide back now we'll have different animations depending on which transition type we triggered and

then obviously we can go apply that with the view transition target in CSS old is for the state of things before the

transition and new is for the state after you can target a specific class of a share here with a given identifier

like that it's so simple and this is just in CSS like we're using actual browser standards to do all of this and

I'm so thankful that instead of the React team building some crazy new animation system they leaned so heavily

into browser standards instead and now with that change you can see the topnav slide to the left when we go to a thing

and then slide to the right when we leave it it's so cool it's so cool this is this

easy now as long as you're on a browser that supports them like Safari or Chrome but yeah Firefox get your together

animating suspense boundaries as they mentioned before suspense will also activate view transitions which is so

cool so if you have a fallback for something before the content comes in now you can animate it you just wrap the

suspense in a view transition and now when we do a thing like go to this We get that fancy animation with the

placeholder and then the content and it even stays rendered because of how suspense works but look at that do you

see how simple but nice that little animation is and they have to put a lot of work

into it either there's CSS you just add the new key frames and it works it's so cool it's so cool i am

really hyped about this stuff you can also provide custom animations using an exit on the fallback and enter on the

content so here you can specify on exit you want it to slide down and on enter you want it to slide up write the CSS

and now it will handle those two different cases and if we once again play with the

sandbox see the content slid up so cool and the exit is the fade goes down like the weird fade gray out when

we're waiting for the loading goes down and then the new content goes up to replace it you can also use your

transitions to animate lists of items as they reorder so good you just put a key in

the same way you always do with a list in React so let's type in third are you

kidding are you kidding i didn't even know about that that's so cool like nothing special being written

here this isn't some crazy JS code to handle things being removed from the list we just added a single view

transition wrapper to the video component and now as we filter using the deferred value helper here so that it

can hook in at the right time that's it that's it i finally am seeing the value of deferred value here we pass search

text to this component it uses whatever it was before on the first render and then when it changes it now knows the

change is coming so it triggers the view transition it then renders the new state and transitions to that it's so good but

this deferred value wrapper here tells React hey when this value changes you now have two states you have the

deferred version and you have the new version go trigger your transitions that's it is literally a two line of

code change to add something that used to take a PhD in browser performance chaos and also screwing up the way your

codebase works too it's so good i'm so hyped on this this was Seb Markb's like baby which is crazy cuz he's the server

components guy but he just really wanted to make view transitions happen and he went ham to do it i'm pumped for him

this is such a cool thing and that was all they were talking about here i'd be hyped but it goes way further so we need

to talk about activity in past updates we shared that we are researching an API that would allow for components to be

visually hidden and deprioritized preserving UI state with reduced performance costs relative to unmounting

or hiding with CSS i have done so many hacks for this in the past the level of depth of went to with portals just to

keep an element's state around when it was being removed from the DOM is obnoxious now there's a built-in

component for it activity is a new component to hide and show parts of the UI when activity is visible it's

rendered as normal when it is hidden it's unmounted but it will still save its state and continue to render at a

lower priority than anything visible on the screen do you know how useful this is now if you have an input box and you

switch to a different place in the UI you go to a different like page and you go back the state of that input box will

be persisted now if you have a counter component and you navigate to the wrong tab where you click something you

thought was a button but it's actually a link and you go back it's still there i see chats catching on already classic

reverse portal basically got visibility oh my is it Christmas or something right this is so good it's so good now you can

render an element and have it own its state without having to deal with all the chaos from like local storage to

conditional rendering to hiding via CSS to having the VDOM caring about it and taking priority from other things if you

have some slow thing you want to kick off the render for as soon as possible without blocking the main UI you can

just do it now and as others are catching on to React Router is going to have so much fun with this absolutely

agree routers are going to be able to do crazy stuff with this for pre-rendering different routes so that not only do we

know what HTML will be on the next page we actually have the React structure for it done too this makes routing you can

do crazy stuff with routing with this i'm so excited one major note they call out here before we go deeper effects

don't mount when an activity is hidden so if you have a use effect in a component wrapped in an activity that's

hidden the use effect won't run it state will persist but the effect will not run if you switch an activity from visible

to hidden the effect will clean up so you will still get that return cleanup function but you will not have it run

when it is inside of the activity this is part of why it's so performant why you can render giant things that are

super heavy in activities leave them hidden and it won't meaningfully affect your performance i love chat catching on

to this perfect for transitions god damn it I have to start using React again not even pre-rendering just instant browsing

history stuff yes it's so cool so cool so let's take a look at the examples they have restoring state with activity

when a user navigates away from a page it's common to stop rendering the old page yes this is how pretty much every

router works in React it's one of the reasons why we tell people to put their state in the URL cuz they're going to

lose it when you navigate otherwise but as they say here if the user goes back to the old page the previous state is

lost so if home has an input field the user leaves the page and the input gets unmounted now the text they typed is

gone activity lets you change the visibility of other things like that so now home is visible if you're on slash

otherwise it's hidden so it's not rendered at all but it does exist still so it state is

persisted and here's the example let's search for a video let's type f we go to fourth and we go back and it's still in

this state do you know how annoying it was to do like this before i see chat catching on all caps

from Cooper here persistent filters on dashboard without query params or sporto my hack for caching images in roundest

oh god yeah that is so much easier you can just fetch the next image god that's so good damn it's so good yet people are

getting hyped like this is an awesome change they called out hiding via CSS at the top the problem with hiding the CSS

is your browser still has to do a bunch of work to generate the HTML put it in the page then hide it and it will affect

other elements too not only is activity not using all of the browser stuff you would be using if you hid via CSS

instead it's also not even using all of React because it's disabling a bunch of things that don't need to be running if

the component isn't actually there so it's Yeah this doesn't run hooks until it's visible it's so good it's huge you

can just render all of your UI in activities and when you activate it it will come up way faster the state will

be throughout all of it i would love to see somebody do a shim on React Router that just wraps everything in activity

just to see how it performs i would be so curious to see RAM usage go bur I got all this RAM I got to use it for

something I don't work with a lot of front end even I know this is OP you you're the ones I'm trying to win by the

way if you guys don't know my history is backend I'm just trying to get you guys as excited about front end stuff as I am

because I have my my whole history is back end I got into React relatively late and I fell in love with all these

cool things they were doing and I'm just trying to share that love and excitement and I'm pumped you guys are seeing it

and getting it too do you see how elegantly this all combines the transition between the different pages

the state being persisted the animation as you type and this isn't crazy customjs like it would have had to be

otherwise this is just using built-in browser primitives and built-in core React stuff that's just simple component

wrappers it's so cool other frameworks previously did animation better than React i won't pretend otherwise it took

them way too long to catch up but I feel like they're leaprogging as long as you're not a Firefox user cries and zen

yeah it is what it is anyways as I was hinting at you can also pre-render using this too so here we are pre-rendering

certain pages like details one in order to have it render quicker to read what they had to say sometimes you might want

to prepare the next part of the UI that a user is likely to use ahead of time so it's ready by the time they are ready to

use it it's especially useful if the next route needs to suspend on data that it needs for render because you can help

ensure the data is already fetched before the user even navigates for example our app currently needs to

suspend to load the data for each video when you select one we can improve this by rendering all the pages in a hidden

activity until the user navigates here we're mapping over all the videos and rendering them all in hidden activities

so now they can all fetch so now when I go to one it already has its data here it doesn't have to wait because it can

just do all that and there's no crazy custom code being written here again we hop into the details here we still have

the suspense the suspense can be resolved during an activity so cool effects don't run but data fetching

through suspense boundaries does run so here we have a use call for fetch video to get the video data this triggers

suspense when it's going so the suspenseful activity can happen the component can render and be ready

without having to do anything in the DOM yet and then you just render it it's unreal it's this simple like there's no

crazy transition or animation code anywhere in here you just wrap things in view transition and you're pretty much

done this is Facebook loves relay all over again it is Facebook spends a lot of time trying to filter the best parts

out of what makes Relay work for them so that we don't have to have a PhD in graph theory in order to get better

performance of our web apps it's like this is three layers of distillation past relay we find these small benefits

that we can then stack up with browser standards to make something everyone could benefit from okay I know I said

this isn't server components but they do call them out here ssr with activity when using activity on a page that uses

SSR there are additional optimizations as well if part of the page is rendered with mode hidden then it will not be

included in the SSR response instead React will schedule a client render for the component inside that activity while

the rest of the page hydrates prioritizing the visible content on the screen we have quick at home now guys we

did it we can now tell React to not do something on the server not block the initial render and then prioritize

rerendering it on client this is so cool it's so cool and it's using the same primitive you don't have some special do

hydrate don't hydrate you just use activity the way you would intuitively do it for client side stuff and it works

on the server too this is why I like does React move slower than other frameworks yes it's cuz they're trying

to find the right core primitives that they can use to solve multiple problems at once when the problems are similar

enough and the problem of how to unblock the first bite on a server render the problem of how to prioritize what to

render on client and the problem of how to render things in the background on client when they're not visible yet

these are all complex problems that intuitively you'd expect to do different things for but the genius of this team

is they'll fight to find the overlap and build something that solves all these problems in one elegant way and it's

actually really cool it's not always elegant i mean look at all the weird arguments for use effect but sometimes

it is and this looks really elegant i'm so excited to play with it one of the coolest parts here React D prioritizes

hydration of content within an activity similar to how suspense content is hydrated at a lower priority if the user

interacts with the page we'll prioritize hydration within the boundary if needed we have quick at home future modes for

activity in the future we may add more modes to activity for example a common use case is rendering a modal where the

previous inactive page is visible behind the active modal view the hidden mode does not work for this use case because

it's not visible and it's not included in SSR instead we're considering a new mode that would keep the content visible

and included in SSR but keep it unmounted and deprioritized for updates this makes a lot of sense when you have

full screen modal open you don't need the background updating in full i don't know how common this case is that it

needs its own mode but it's awesome they're thinking about real use cases like modals that block the content

underneath it took Chrome decades to start considering these things so that's the end of the now ready to go

experimental features that will almost certainly make it into the main React version in the near future possibly

React 20 possibly sooner you never know with them i'm going to play with them a bunch but there's more here too that we

need to dink into including that IDE plugin again they call out that they often change or remove solutions after

trying them out when the solutions that they'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 developing

solutions for without sharing a particular solution that we have in mind so these aren't things we can play with

just yet and they're not trying to promise a specific solution because they don't get too hyped we don't want

concurrent mode again god that was a disaster so I don't think this will automatically start 150 fetches because

it dep prioritizes activity when there isn't availability that's like the whole point is it's optional if there are too

many things in activity I'm sure the React scheduleuler is smart enough to dep prioritize all the things in a

hidden activity it might pick the wrong ones but it will dep prioritize them for sure curious to see how this looks at

scale though it'll be very fun to play with deprioritization means that if it doesn't do the thing and you just

navigate there normally it just behaves the way it did before so if you have the RAM the CPU and network and all the

things necessary to do that cool you can do it you can render those things but if you have too much and other things take

priority like inputs all the other content on the page that isn't under an activity or isn't an activity that's

visible that will take it more on this here uh another mode they're considering is the ability to automatically destroy

state for hidden activities if there's too much memory being used since the components already unmounted it may be

preferable to just destroy the state for the least recently used hidden parts of the app rather than consume too much

resource yep super cool anyways let's go to these performance tools because we we need more ways to identify performance

our friend Aiden you guys might know creator of same but mostly known for millionjs in React Scan you've seen

React Scan in a bunch of my stuff if you go to my like like is React really slow video one of my best videos I've done

recently you can see in depth the power of React Scan he knows what he's doing he has been building a lot of very

useful performance tools for React now the React team is starting to catch up which is very overdue and very exciting

to see we're working on a new set of custom tracks to performance profilers using browser APIs that allow adding

custom tracks to provide more information about the performance of your app feature is still in progress

we're not ready to publish docs to fully release it as an experimental feature yet you get a sneak preview when using

experimental versions of React which will automatically see the performance tracks added to profiles so here we see

custom tracks that you can define in the react code to say hey this is when this render starts and it makes using the

react like performance stuff both in the react chrome extension and in the normal performance tab significantly easier

this is work being done in parallel with the chrome team to make the performance tab more useful which is very needed

because I've been spending a lot of time in this tab lately and it is rough it's It's so useful and it's so bad and we

need all the help we can get it has some bugs so it's not quite ready yet and they're still collecting feedback so if

you do end up using this and you have feedback for them definitely let them know that's the whole point that's why

they're doing this another that I am so excited for hi SolidJS we're catching up finally it only took us what 8 years

automatic effect dependencies we released hooks we had three motivations sharing code between components thinking

in terms of function not in life cycle and supporting ahead of time compilation the first two it did great with the

third it did not help with since their release hooks have been successful at helping people share code between

components hooks are now the favorite way to share logic between components and there are less use cases for render

props and higher order components than there ever were before hooks have also been successful at supporting features

like fast refresh that were not possible with traditional class components because of how deep the life cycle was

embedded in those components now it's a lot easier to do those types of things i cannot imagine life without fast refresh

anymore it's so good just saving and seeing the change immediately without your state going away effects can be

hard no unfortunately some hooks are still hard to think in terms of function instead of life cycles effects

are a function that triggers on different things but those things are the life cycle of your data rather than

the life cycle of the component even though it does still trigger on the component life cycle like an unmounted

one it's it's confusing it genuinely is as they say here effects specifically are still hard to understand and it's

one of the most common pain points that we hear from devs last year we spent a significant amount of time researching

how effects were actually being used and how those use cases could be simplified as well as made easier to understand we

found that often the confusion is from using an effect when you don't actually need to that you might not need an

effect guide covers many cases where effects are not the right solution and this is a great if you haven't already

read this blog post and you're a React dev you're doing yourself a disservice read this post it's phenomenal and it

will help you so much with learning the places that you shouldn't actually be doing an effect for this is a really

common one combining something like first name and last name and an effect whenever either change you set it to a

new state just inline it it's so cheap to calculate this just do it during render who cares and this plus

compiler means there's a lot of partial states you shouldn't be storing as I say here though even when an effect is the

right fit for a problem effects can still be harder to understand than class component life cycles were in the past

we believe one of the reasons for confusion is that developers tend to think of effects from the components

perspective like a life cycle instead of the effects point of view which is the data and what the effect is actually

doing here's an example we create a connection and then we connect the connection on room ID and we return a

disconnect when room ID changes because the room ID changes we want to disconnect from that room and connect to

a new one many users would read this code as on mount connect to the room ID whenever room ID changes disconnect the

old room and recreate the connection but now you're still thinking from the components perspective which means

you'll need to think of every component life cycle state to write the effect correctly this can be difficult so it's

understandable that effects seem harder than class life cycles when you're viewing it from the components

perspective i totally agree with this framing by the way I think one of the biggest problems people have with the

React model is they're thinking about components too much and data flow too little the beauty of hooks is that the

life cycle is no longer around the component the life cycle is instead now around the data being passed to the hook

i didn't think of this as functions versus components i thought of this as data life cycles versus component life

cycles but I'm curious to see how they pitch it here effects without dependencies instead

it's better to think from the effects perspective the effect doesn't know about the component life cycles it only

describes how to start synchronization and how to stop it when users think of effects in this way their effects tend

to be easier to write and more resilient to being started and stopped as many times as are needed we spent some time

researching why effects are thought of from the component perspective and we think one of the reasons is the

dependency array since you have to write it it's right there and in your face reminding you of what you're reacting to

and baiting you into the mental model of do this when the value changes when we released hooks we knew we could make

them easier to use with ahead of time compilation the React compiler you're now able to avoid writing use callback

and use memo yourself in most cases for effects the compiler can insert dependencies for you so finally for the

first time ever there will be a real use case for not passing an array to an effect because right now it makes no

sense at all but in the future finally it might actually make some sense with this code the React compiler can infer

the dependencies for you and insert them automatically so you don't need to see or write them with features like the IDE

extension and use event effect we can provide a code lens to show you when the compiler inserted for times that you

need to debug or to optimize by removing a dependency this helps reinforce the correct mental model for writing effects

which can run at any time to synchronize your component or hook state when something else think of event effect

similar to use callback but it never changes it's effectively the same thing as stuffing a function into a ref you

don't want the onvisit binding to change because if it does the effect will run again and you don't want it to this lets

you bind a function to whatever data the component has access to without having to trigger updates when you don't intend

to super super nice and will allow you to avoid a lot of the depths being passed into the effect that shouldn't

actually trigger the effect changing like here we don't want number of items to trigger the effect we only want the

URL to so we break out the effect event to use the visited URL and number of items so we have this all here and then

we pass on visit to use effect just by calling it in there no passing it's just in the same closure and now this doesn't

run on number of items changes like it might have otherwise very nice this took way too long to ship i totally agree

with you guys it's been it's still not even out properly yet but I am so hyped that it's not going away they are

actually shipping it there was another use effect thing they were considering doing that I saw them add and then

remove use resource effect the legend Lauren was working on this one use resource effect was going

to be similar but it would give you an object or data with a cleanup which I've needed forever i have an ancient thread

of me going back and forth with Dan Abramov trying to explain to him that sometimes I need to instantiate a thing

and have a cleanup for it that doesn't run twice always and it just it was so hard to communicate that with them it's

like here are the four hooks I have to write right now here's the one I should have to they kind of got it never

happened but they're moving in that direction they are adding the missing pieces to make effects simpler so that

they're easier for us to understand and they are less likely to go rogue and destroy our code and when you combine

that with the ID extension that we're about to get to and it says "Hey you might not want this thing right here

because this thing is going to cause this effect to run all the time you might want to move this out to an event

effect so that it is a function that gets called in the effect instead so much better as they say in the post our

hope is that automatically inserting dependencies is not only easier to write but that it makes them easier to

understand by forcing you to think in terms of what the effect does and not in the component life cycles i am so hyped

for this change i've been dancing around it for so long we need to look into the ID extension the React compiler is now

in RC it's kind of funny the RCRC but React compiler is pretty ready to go they're using it for basically

everything now at Meta and Facebook i'm using it for T3 chat it's been a lifesaver for us and they're working

hard towards shipping the first Semverse stable version of the compiler in coming months huge so hyped that compiler is

going to officially be 10 SEver stable their bar for stable is really high so know that but it's I'm using it on

everything I build right now and it's been so good but part of the compiler efforts isn't just oh it can make your

React code faster it's how it integrates the whole ecosystem in a better way one of those ways is your ID we've begun

exploring ways to use the React compiler to provide information that can improve understanding and debugging of your code

one idea we started exploring is a new experimental LSPbased React ID extension powered by the React compiler similar to

the one used in Lauren's talk at React Comp but this essentially shows you what the compiler has compiled so one way to

tell if a component or hook was optimized by the compiler is to look for this little uh dollar sign variable up

top um and don't worry about how to use this it's not meant to be used directly it's really just for the compiler so one

way you can think about this is it's just a big array of values that the compiler can use to cache and retrieve

values efficiently this is so cool one of the biggest concerns I saw people have with compiler

is that it makes it so people don't understand the code going out i think most devs don't even understand the code

going in they're just autocompleting anyways and they don't understand React well enough to have understood how to

optimize and memorize properly anyways so for them it's a noop they just spit out better code but for those who care

deeply the people who watch a channel like this and are trying to teach the teams they work with how to actually use

React this is huge for us because we can see what comes out of the React component and it becomes way easier to

understand how the compiler works and see how it interfaces with the other things you're doing if you can just

hover over and see the compiler output but the extension is going to go so much further than what we're seeing here i

don't remember if there's other deeper examples of it in here or not oh here's a fun one the React compiler eslint

rules are way better the current property on a ref cannot be accessed during the render body this is an early

preview of what Lauren's been working on she is an absolute wizard by the way if you guys aren't familiar with her work

also one of the funniest people you could follow on Twitter potatoes spelled like that yeah super

underrated forgive and forget is such a good pun with React compiler cuz he used to be react forget rc is release

candidate this is not the React compiler RC she can't help herself she's a memer we love Lauren anyways back to the ID

extensions we talked a bit about what she has in mind here and it's really cool our idea is that we can use the

compiler static analysis to provide more info suggestions and optimization opportunities directly in your IDE for

example we can provide diagnostics for code breaking the rules of React hover to show if a component and hook are

optimized by the compiler or not or even a code lens to see automatically inserted effect dependencies the ID

extension is still in early exploration but we'll share our progress in future updates the code lens for the automatic

effect dependencies is so cool like similar to what languages do this i I know Rust does this with the LSP where

you type something and it like has like the gray text behind showing you what it actually is and does or like with uh

GitHub and the git lens plugin here you can see the gray text there showing this is when I tried to fix Gemini's

behaviors having that to show you what dependencies an effect has instead of you writing them all that's so cool i'm

hyped it's going to be a huge win for all the changes going into React and it's awesome to see the React team

thinking more holistically more and more like React went from a JS library you'd add to change how you update your UI to

a suite of tools to build giant applications for teams of all sizes and the IDE integration is another great

example of that where the code we're writing isn't going to change a whole lot but the quality of experience we

have writing it is just increasing constantly and I think more and more we're going to see this is the focus of

React not what new APIs can we introduce what new ways of writing React can we think of i don't think we'll ever have

another hooks moment where they fundamentally change the syntax of React itself instead we're going to see things

that remove syntax that probably shouldn't have been there in the first place to make the code as simple as

possible so humans and AI can work together in tandem to ship things more effectively yes you I had to mention AI

somewhere here i made it this far okay anyways couple more cool things they have before we wrap up fragment refs

many DOM APIs like those for things like event management positioning and focus are difficult to compose when writing

with React this often leads to devs reaching for effects managing multiple refs or using APIs like find DOM node

been there done that please never make me do it again we're exploring adding refs to fragments that would point to a

group of DOM elements rather than just a single element our hope is that this will simplify managing multiple children

and make it easier to write composable React code without having to call a bunch of random DOM APIs fragment refs

are still being researched we'll share more info when we're closer to having a final API very exciting i can use that a

lot in T3 chat for managing input fields speaking of things I can use for T3 chat gesture

animations finally researching ways to enhance view transitions to support gesture animations like swiping to open

a menu or scrolling through a photo carousel shout out Ken Wheeler if you know you know gestures present a new

challenge for a few reasons gestures are continuous as you swipe the animation is tied to your fingers placement in time

rather than triggering and running to completion react isn't good at this react isn't good at partials react takes

a before and after and handles the in between for you efficiently it's not as good at things that change every frame

that's not what React does react says go use CSS for that but gestures require that and finding the right balance here

is going to be really challenging and I like that they're not pretending it isn't as they said they're continuous

they don't complete it's not as simple as it's starting and it's done 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 that's complex and React's model does not map well to that there's also gestures inverting old and new when

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 having an old state that's

still alive makes this way more complex sympathy to them i hope they can figure out how to do this we believe we found

an approach that works well and may introduce a new API for triggering gesture transitions for now we're

focused on shipping view transition and we'll revisit gestures afterwards speaking of transitions hi

Miles he's been extra needy i just did two trips so he's not gotten the attention he wants so he's

just asking for it constantly shoulder turn i just trimmed his nails so they're a little shorter than usual he's a

little nervous climbing me right now but shoulder's his favorite spot Hey buddy i

know i know we'll hang more soon i promise but I need to finish filming is that

okay okay we'll finish the video with him on my shoulder what's left concurrent stores when we released React

18 with concurrent rendering we also released use sync external store one of the coolest and also most broken APIs in

React it does not handle concurrent rendering at all they can support it but they do it by forcing a sync render

whenever the store updates this is cool except for the fact that it breaks things like transitions entirely so if

you're using a library heavily relying on Sync external store good luck have fun okay Cat is leaving be right back as

we were saying sing external store breaks suspense and a bunch of the other fun new concurrent features so if you're

using a library with it it breaks other things and it's one of the biggest frustrations of people like Tanner

Lindsley have with React in its current state and they're finally revisiting the problem space to create a primitive to

fully support concurrent external stores with the use API so you can call use store and implement a store in a way

that is friendly to React's concurrency suspense and all these other cool things that the third party devs making React

so cool all really want access to this might be the shortest simplest section here but it's one of the most important

and shows to a lot of like the core people building around React that we will have the missing pieces to do the

next era of dev tools very soon and things like React Query are going to get so much better when this all finally

ships i am so hyped with all the cool things coming to React i missed these labs posts so much and it's incredible

having them back shout out to Ricky for letting me know this was coming a little bit early so I could prepare accordingly

by a little early I mean yesterday literally just one day but so nice every day I feel more like the React team is

trying to bridge the gap between it and the community despite the community growing to unbelievable sizes and I

still think as I tend to that the future of React's incredibly bright let me know what you guys think until next time

peace nerds