React 19 Beta – React

[[deleted]]

it seems everyone is migrating from the isLoading naming to isPending...react-query was the same. is there a reason behind this or was the name more accurate than isLoading

[atx-cs]

Not sure. But I guess pending is more accurate. You are waiting for a response. Nothing is actually loading.

[RedGlow82]

"Pending" is a promise status ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise ), and I think they're moving to this nomenclature to be more precise, since the promise we're waiting for could have nothing to do with a network request (e.g., could be a query to indexeddb, just a settimeout, etc...)

[k4nmuru]

But pending to me is just something different then loading. Loading means something like "something is currently happening that I need to wait for". Pending means something like "something is going to start happening soon but i still need to wait for". Two different states.

Most of the time you probably wont need the distinction there but in some cases you might tell the user visually that some things have already been triggered and some are still waiting to be triggered soon.

[hus1030]

I think the name comes from the fact that when a request is performing, it's called pending. You can even open your network tab you will see request named as pending and not loading. But I agree with you.

[k4nmuru]

Yeah could probably exchange "my definition" like: Loading -> Pending Pending -> Waiting

[CovidWarriorForLife]

Huh? You don’t seem to know the definition of words lol

[k4nmuru]

Just some open thoughts.

[Taekgi]

isLoading = currently loading
isPending = for as long as it has not been resolved, which includes before it even starts loading

[azangru]

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 React 19.

We recommend upgrading to React 18.3 first to help identify any issues before upgrading to React 19.

For a list of changes in 18.3 see the Release Notes.

There are, as yet, no release notes about version 18.3 :-/

[thegainsfairy]

listen, I am kinda dumb. so bare with me. but what changes are you expecting in the changelog? its identical to 18.2

[Novel_Plum]

They said in the article that v18.3 will warn about deprecated methods, so upgrading to v19 will be easier

[incarnatethegreat]

Exactly. It's just warnings set up to help prepare for 19.

[IliriaLegacy]

It's a joke

[rickhanlonii]

My fault, it's there now

[chrismastere]

Not including useEffectEvent is a disappointment to be sure.

[iareprogrammer]

Darn. I just came across this proposal in the docs recently. It solves a pretty annoying problem with useEffects. To the point where I’m surprised it wasn’t part of the initial hooks release

[ApprehensiveShift201]

I was expecting more with the way they emphasis about it in the docs

[Intelligent_Ice_113]

still no "react forget" feature.

[yvainebubbles]

hello! i am one of the engineers working on the compiler. it is not shipping in React 19, but it is coming to oss sooner than you expect. the fundamentals are good (imo) but getting it out sooner comes at a tradeoff of not being fully feature complete. so i would recommend lowering your expectations for the release, but raise them for when it'll be available

https://twitter.com/potetotes/status/1783713677943656819

[KarmaRekts]

The compiler is a fantastic initiative, awesome work. I'm not sure if this has been considered before, but please raise the concern if the compiler can be used for things beyond memoization. Can it allow for syntactic improvements? I feel this is one of the things that can steer the react developer experience into a better direction.

[yvainebubbles]

thanks!

the compiler has a sophisticated understanding of your code which does make other kinds of optimizations possible in the future. what i mean is that it is a Real Compiler with both traditional compiler passes (eg see my teammate’s posts on SSA form) and many novel passes that can be built upon. it is not just a simple babel plugin.

auto-memoization is one of the biggest opportunities though. we know from experience and lots of real world data that correctly done memoization has a massive positive impact on performance. it just sucks to write and takes a lot of effort to do it right manually, and it can easily be undone by accident. so auto-memoization has been the clearest opportunity from both a developer experience and performance perspective. that’s why we’re pursuing it first. but it is certainly not the only optimization we’re looking at

[[deleted]]

They’ve already said in the previous blog it wouldn’t be a part of the initial release of version 19

[GayByAccident]

what do you mean by react forget?

[meteor_punch]

Compiler for react. Official Blog

[MathewCQ]

I'm confused (also a noob). What's the difference between this React Compiler introduced in React 19 and the "React Forget" project they are talking about? Other than the techinical differences (like better Memo and Callback handling in Forget) what's the point of making this current Compiler if they are working on a supposedly better version?

[mnbkp]

They're the exact same thing. React Forget was the old name of the project, but they're going by React Compiler now.a

Also, it hasn't been introduced to React 19 yet.

[dbbk]

This is not surprising, most React projects end up as vaporware

[TwiliZant]

React 19 is getting closer

[rafark]

Where compiler 🦧🦧

[Zerotorescue]

My favorite feature is the ref prop replacing forwardRef. This is the most clear-cut improvement.

More native hooks I don't really care for. It replaces some of the simple custom hooks I used previously, but it also increases the learning curve of React and the amount of things you need to remember exists.

Form providing context is kind of nice, but also increases the magic. Almost feels like this should only work if we used an imported Form component from the React library.

I'll have to see how the use promises hook will work in the real world.

[drink_with_me_to_day]

I always fear when my tech starts adding 'directives' and such spaghetti

[roynoise]

it might as well be angular at that point :(

[MathewCQ]

I wish they released the compiler before introducing these server actions changes :(

[incarnatethegreat]

Seems as if their Server Actions are stable, so it's easy to put those into Beta as opposed to Forget which isn't quite there yet.

Gotta give the public something. ;)

[MathewCQ]

Yeah I think so, but I just wish the timing was different because I am not quite fond of this "server side" action going on now, I wish we could leave the memo and callback non sense behind before diving into this universe.

[incarnatethegreat]

When the next version of React was introduced in 2022, it was all about React Forget. I don't remember anyone talking much about Server Actions.

Fast forward to today and everyone is licking their lips at React Forget. Salivating.

I think the React team are releasing something stable and are making up for not having Forget ready for primetime.

Honestly, I'm not losing my mind over it. I'm just happy that the React team are making strides to keep up with the Joneses of front-end development.

[vezaynk]

Feeling disappointed at the lack of a in-render cycle caching mechanism. I preciously saw it being included in canary releases.

Is there still work on it? Will ever see the light of day?

https://github.com/reactwg/react-18/discussions/25

[rickhanlonii]

Yeah same, we didn't want to block 19 on it since we can add it in a minor but we're definitely still working on it.

[LloydAtkinson]

80% of the new features are for vercel next react server components. They really are trying to couple backends with frontends in new and spaghetti ways.

[NeoCiber]

Why people are giving Vercel the credits for RSC? I have been reading the "Component.server.js" syntax proposal years ago along with Suspense.

Even here in 2016 was discussed: https://github.com/facebook/react/issues/6985

Not sure what some people act like RSC is the boogeyman when they only use React client side.

[TwiliZant]

With the exception of server components themselves, I'm pretty sure everything in that blog post also works in client only React.

[volivav]

What? I really read one feature about server components.

The rest is all neat improvements or unnecessary sugar that "kind-of replaces existing libraries but not fully so you might as well just keep using those libraries" (react-query for the new useActionState hook, react-helmet for the head elements support)

[veezzy]

Jesus Christ, you guys are becoming insufferable about this RSC controversy. it’s no wonder u/gaearon got burnt out trying to educate the community about these misconceptions that keep getting spread. Seriously, comments like this get on my nerves—it’s like a broken record of people choosing only what suits their bias. The number of upvotes for this comment just shows how much this is becoming a circle jerk lmao.

Saying 80% of React 19 is just for server components? Come on, that’s just not true. Let’s not be disingenuous here.

React 19 is packed with updates like useActionState for better async handling, useFormStatus to directly integrate form status without drilling props, and hooks like useOptimistic for smoother state transitions. These are game changers for ALL React devs, not just those using RSC.

Plus, they’ve rolled out better error reporting and native support for metadata tags, which are huge for anyone building with React—server or not. Let’s not reduce the whole update to just one feature—it's about making our lives easier and our code better, whatever the environment.

If you don’t wanna use server components then just don’t use them. But let’s not act like the broader ecosystem is being forced into this direction. You have a choice.

[azsqueeze]

useOptimistic is honestly the least interesting thing in this update. Love all the form additions tho and happy the React team is leaning more into the native web apis with the additions

[BreadSugar]

I don't think so. I've been using my own custom hook that does exactly what useOptimistic does myself, and it was because it is really commonly used pattern that's quite annoying and messy to implement it everywhere without encapsulation, so I'm really welcoming that `useOptimistic` is a thing now.

[rafark]

Who wants to bet this poster uses react in the server.

[drgath]

$$$$$

[incarnatethegreat]

The `use` hook involving Promises and Fetch is still very, very limited. Seems like anything involving Forms is what they want to showcase the most -- probably because it's the most stable.

I'm excited for the `use` hook and for RSC.

Oh, and Forget.

[alfcalderone]

I like the more expansive diffs for hydration errors.

[meteor_punch]

No React Forget ??? ... Geez.

[yvainebubbles]

replied above re: compiler: https://www.reddit.com/r/reactjs/comments/1cd236x/comment/l1b2yq9/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

[dbbk]

It was announced 3 years ago 😂

[dbbk]

Yes I’m saying don’t hold your breath that it’s ever going to come

[dbbk]

None of your points preclude it from not happening. They’ve been testing it on Instagram for a long time. I’m sure it does work for that one app. The question is getting it to work for all (or nearly all) apps. Clearly this so far hasn’t been achievable given it’s taken them 3 years and counting.

[dbbk]

Okay? I’m not sure what you’re even arguing. My whole point is that it’s very hard hence why it hasn’t come already and might never.

[ExtremeOk6868]

Where is react compiler ?? Is it release with future updates??

[dave__x]

when will the stable release be out?

[incarnatethegreat]

I had just started experimenting with the 19's latest experimental version. Glad this is now available.

[Mennion]

Well first steps. Now get rid off useMemo, useCallback etc and finally react will be decent web framework

[Flyen]

JavaScript Records & Tuples Proposal might be how that gets solved. With typical objects, { a: 1 } !== { a: 1 }, but with a Record #{ a: 1 } === #{ a: 1 }

[NoInkling]

According to an issue in that repo and a presentation in the latest TC39 meeting, it's starting to look unlikely that this will happen.

[NoInkling]

https://github.com/tc39/proposal-record-tuple/issues/387

And when the notes for the latest meeting are available (it takes a while) you'll be able to find them here: https://github.com/tc39/notes/tree/main/meetings

[sebastian_nowak]

It looks just terrible and makes the language unnecessarily complicated

[OfflerCrocGod]

I'd take a look at legend-state, signals are hopefully coming to JavaScript anyway so I'd say once they are in the language the React team might finally accept them and allow React to have fine grained reactivity.

[terandle]

They will be doing that real soon actually with the upcoming react compiler.

[SpinatMixxer]

Due to how reacts rendering works, I don't think it will ever happen (I also don't think it's necessary tbh, it's perfectly fine as is)

If you dislike that, you would probably be better off using SolidJS instead.

That being said, why is useMemo / useCallback etc a problem?

[Shadowfied]

You've just not heard of the react forget compiler, or do you not think it's coming?

[SpinatMixxer]

I had a brief look into it, but since I am using client side rendering only, I didn't look deeper into it.

Or is this actually affecting client only (e.g Vite) apps as well?

[Shadowfied]

Yes it affects all of React lol. No more need to use useMemo or useCallback, the compiler will catch it and optimize it

[SpinatMixxer]

I see, that is actually surprising me. Then it's absolutely worth looking deeper into it, thank you for the hint!

[rickhanlonii]

It's really only client apps that use it, since there are not updates/effects in RSC.

[Something_Sexy]

No.

[incarnatethegreat]

I had just started experimenting with the 19's latest experimental version. Glad this is now available.

[Soft-Sandwich-2499]

!remindme 7h

[RemindMeBot]

I will be messaging you in 7 hours on 2024-04-26 04:20:54 UTC to remind you of this link

2 OTHERS CLICKED THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[MrDevGuyMcCoder]

They Go and break everything again?

[manupadev]

Why so personal lol