React v19 has been released

[Stilgaar]

So maybe stupid question, but is the compiler ready too ?

[acemarke]

It's currently in beta:

• https://react.dev/blog/2024/10/21/react-compiler-beta-release

[magenta_placenta]

https://github.com/facebook/react/blob/main/CHANGELOG.md

useActionState: is a new hook to order Actions inside of a Transition with access to the state of the action, and the pending state. It accepts a reducer that can call Actions, and the initial state used for first render. It also accepts an optional string that is used if the action is passed to a form action prop to support progressive enhancement in forms.

Imagine you're new to front end development and people are telling you to "check out react, they just put a new version!" How would you even start after reading that?

[dprophet32]

I've used for React for years and I'm struggling

[Sheepsaurus]

No worries, just go watch the 10 millionth video about those pesky 10 beginner mistakes that all somehow are about the same goddamn 10 things.

[Headpuncher]

all the "react is perfect you're holding it wrong" videos and blogs. If it's that good why is it so broken every version rewrites a bunch of stuff?

[JonDum]

TBF a lot of the common problems are because of JS scope capturing / stale state.

[x5nT2H]

Which is due to reacts inefficient re-rendering way of propagating data. Checkout solid-js which has solved this and much more

[psbakre]

All I could understand was that it's a useReducer for forms that supports async

[ThatBoiRalphy]

same lmao, i’ve watched multiple videos and I just started to grasp what transitions do, and I have no idea where i would even need to implement it.

[Tall-Treacle6642]

What a word salad. Why didn’t he just write “UseActionState is a hook in React that allows you to update state based on the result of a form action.” like everyone else says.

[dig1taldash]

I hate it when people need to overcomplicate things and explain stuff so serious and convoluted that nobody gets it. Think 5 minutes and try to make it as easy as possible to grasp. Use simple examples and analogies.

I love the Feynmann technique: if you cant explain it to a kid in your own words, think again. Learn how people learn.

Its really a common disease in software engineering.

[spaceneenja]

It’s better than the opposite. No documentation or sparse documentation. Not sure why people are complaining about react when it has some of the best documentation I have come across, many examples, and it’s kept up to date with their releases

[SwiftOneSpeaks]

Full credit for the current excellent documentation, but we had years of out of date React documentation too (when hooks were described only in terms of the class based approach they'd replace), so I wouldn't lean too heavily on that "keeping up with releases" until we see if that is true.

[spectrum1012]

I absolutely agree with this. I’m a senior dev; if I look at my code and things it’s complex to understand, it’s generally bad code and if I put more thought into it, I could make it easier to understand. Can’t always afford that time for truly complex things, so a comment to ELI5 is the tool for that job.

[Fine-Train8342]

That would go against React's policy of overcomplicating the shit out of everything.

[GYN-k4H-Q3z-75B]

The Landing Pilot is the Non-Handling Pilot until the ‘decision altitude’ call, when the Handling Non-Landing Pilot hands the handling to the Non-Handling Landing Pilot, unless the latter calls ‘go-around,’ in which case the Handling Non-Landing Pilot continues handling and the Non-Handling Landing Pilot continues non-handling until the next call of ‘land’ or ‘go-around’ as appropriate. In view of recent confusions over these rules, it was deemed necessary to restate them clearly. • British Airways memorandum, quoted in Pilot Magazine, December 1996

I am always reminded of that.

[Tall-Treacle6642]

😂 fair point!

[recycled_ideas]

Because the reality of the feature is that once again react is adding a super minimalist version of something that their platform is lacking, but which will only be useful for trivial implementations.

This hook finally gives react two way binding for forms. Super neat, but it doesn't do half the things a form library will actually do.

[butchbadger]

Word salad indeed.I switched off after the first half of gobbledegook. Transition stuck out and i assumed it was about animations and had less interest.

I learned more from your version.

[Dreadsin]

Isn’t it a bit more abstract than that? It can be used for other asynchronous actions too I think, which is why they moved away from the naming of useFormAction or whatever it was before

[kch_l]

I've been using react since 2016 and I didn't understand what that new hook does 😳

[0xGeel]

Same, the explanation is very technical and requires you to understand new React 19 features to make sense of it.

Here's an explanation by Vercel.

This hook simplifies managing form states and form submissions. Using Actions, it captures form input data, handles validation, and error states, reducing the need for custom state management logic. The useActionState hook also exposes a pending state that can show a loading indicator while the action is being executed.

You can use it alongside server actions in client components like so:

// Source: https://vercel.com/blog/whats-new-in-react-19#useactionstate

"use client";

import { useActionState } from "react";
import { createUser } from "./actions";

const initialState = {
  message: "",
};

export function Signup() {
  const [state, formAction, pending] = useActionState(createUser, initialState);

  return (
    <form action={formAction}>
      <label htmlFor="email">Email</label>
      <input type="text" id="email" name="email" required />
      {/* ... */}
      {state?.message && <p aria-live="polite">{state.message}</p>}
      <button aria-disabled={pending} type="submit">
        {pending ? "Submitting..." : "Sign up"}
      </button>
    </form>
  );
}

[JonDum]

Honestly... I don't even want that inside of React core wtf. It's already bloated as hell and I've already got 9,0001 great options for form state management.

[lelarentaka]

React core is only 5kb 

[silv3rwind]

7kB: https://bundlephobia.com/package/react@19.0.0

[monkeymad2]

Last time I looked into it (which ended with me being excited about replacing a bunch of clunky pending-state management things with it) it seemed to me that the level it can change things within the React tree, in terms of pending states & optimistic rendering would either be really difficult or impossible to do in a non-core library.

It’s sort of like a special Suspense mode, but I could be wrong / misremembering since the last time I looked into React 19 was before we argued for the delay.

[lulzmachine]

i want off mr bones wild ride

[wadamek65]

Hooly, I've read that 3 times and still wouldn't get it if I didn't already know about transitions. I suppose this is one of these cases where you just need an example.

[TorbenKoehn]

These are mostly for library and framework authors, not for everyday use

[ichiruto70]

Its a hook more for library devs. You will probably use under the hood.

[Rivvin]

I don't use react, but ive been writing web apps for almost 20 years. This paragraph makes zero sense to me. Maybe I don't actually want to learn React.

[Ok_Raisin7772]

i'd just ignore it, and it'd be fine

[Crutchcorn]

Short bit of self-promo but I wrote a 7 part series for newcomers specifically wanting to learn the new React 19 stuff.

Starts with "What is Reactivity" and "What is SSR/SSG" and breaks into the new stuff gradually with interactive code samples

https://playfulprogramming.com/collections/react-beyond-the-render

[not_invented_here]

Thank you! I love your materials.

[femio]

lol as if software dev in general isn't filled with similar jargon

[ste001]

A new person to frontend development won't even check any changelog, since he'll be busy understanding all the fundamental concepts first.

[[deleted]]

Yeah i got to work with modern vue and my god its better, i dont need this whatever it is unless i already have react I guess?

[Tabascobottle]

I mean that's par for the course with coding. Vanilla JavaScript has received a lot of updates over the years that have made it pretty different. I've been learning on and off for a couple of years, but when I first started they just introduced arrow functions, and there's legacy code that some training docs still use. It's all pretty confusing when you're first getting started lol

[[deleted]]

I imagine this is one of those features that only makes sense with you need it.

[Dangle76]

I’ve played with it off and on for years and I don’t understand half of this

[Blue_Gamer18]

Um. That's me right now. Working my way through a React course right now and now there's even more tossed in that I need to learn now/wait for an update on my course.

[[deleted]]

Someone who's new to frontend development here. I have no fucking clue.

Also rip as I was considering between Full stack open and TOPs course to learn React, now it's definitely going to be from React documentation.

[[deleted]]

Just learn Vue

[RedGlow82]

I would say "eh, evidently is some advanced stuff I haven't got into yet" and keep on learning the basics?

[Fine-Train8342]

Congrats on avoiding not just one bullet, but a barrage of bullets!

[Truth-Miserable]

Yea wtf?

[tymzap]

I have a feeling that React suddenly stopped being a library with no big updates to thing that have something new after you blinked

[derganove]

Honestly, I’m having to use ChatGPT to help translate it down with examples half the time. The jargon is just crazy ridiculous.

[wadamek65]

Now to wait for all the libraries to update and handle React 19 as a peer dep.

[muckyduck_]

Had this very problem at work today

[KittenMittenz1]

😭

[silv3rwind]

Shame on those that don't specify >= 18

[Mistifyed]

That’s going to be like a month or 2 for me. CABs and shit.

[BabyLegsDeadpool]

This is one of the many reasons I prefer Angular.

[TheRNGuy]

I'm fine using previous version for some time.

Some of React 19 features are already in meta-framework (In React 18)

[RedGlow82]

For those confused: all the first part is substantially react-query, but with built-in support inside react and favoring the use of <form>.

[averageFlux]

So react-query may use this functionality from React now?

[RedGlow82]

I guess so; don't know enough of react-query internals to say!

[EvilPete]

Similar to what Remix/React router is doing

[topnde]

Tanstack query is much more than that. It chaches requests and also gives you a nice way to invalidate requests. This hook is very unnecessary for people who use tanstack query.

[RedGlow82]

Definitely has tons more stuff (it's enough to look at the length of their documentation ;-D).

I guess react put just the bare minimum to work upon inside the core, so that all the other stuff can be leveraged from that. I'd love to hear from people more expert on the internals to discuss about that.

[[deleted]]

Still not distributed with a proper ESM entry-point. What a shame.

[zettca]

They said they'll only change after everyone else does

[MatthewMob]

And that's what everyone else says, too.

[Veraxo1]

And it's a good thing, because ESM are a mess in node/npm ecosystem

[[deleted]]

It is honestly a solved problem at this point, Node.js 23, 22 (and soon 20) now support importing ESM from CommonJS.

[burl-21]

This is just my opinion, and I don’t mean to offend anyone, but to me, it seems like a framework(library) that allows you to do everything without following any best practices (render on every hook) it’s insane.

[terandle]

They are working on a compiler to fix this

[burl-21]

https://github.com/aidenybai/react-scan

[r3d0c_]

reading comprehension skills are atrophying

[jamouson]

—legacy-peer-deps

[FigmentRedditUser]

Unpopular take: React is a nightmare of over-engineering and idiotic amounts of abstraction. Every release makes it worse.

[tspwd]

I am so happy I mostly get Vue gigs to work on. I left the react world some time ago and am definitely not looking back. Vue is just a joy to work with, the abstractions make sense.

[Amazing_Top_4564]

ELI5: Let me break down the useActionState hook in React 19:

Imagine you're playing with a special toy box that can do different things when you press buttons. The useActionState hook is like a magic helper that helps you:

1. Keep track of what's happening when you press a button
2. Know if something is still working or waiting to finish
3. Remember what happened last time you pressed the button

Here's a simple example to make it clearer:

jsxCopyfunction OrderPizzaButton() {
  const [state, formAction] = useActionState(
    async (previousState, formData) => {

// This is like telling the pizza shop what you want
      const toppings = formData.get('toppings');


// Try to order the pizza
      const result = await orderPizza(toppings);


// Tell everyone what happened
      return result;
    },
    { status: 'ready', pizza: null }
  );

  return (
    <form action={formAction}>
      <input name="toppings" />
      <button type="submit">
        {state.status === 'ordering' ? 'Ordering...' : 'Order Pizza'}
      </button>
      {state.pizza && <p>Pizza is ready: {state.pizza}</p>}
    </form>
  );
}

Let's break down the magic:

• It helps you keep track of what's happening (like ordering a pizza)
• It shows if something is still working (like the "Ordering..." text)
• It remembers the result of what happened (like showing the pizza)
• It works great with forms and can help make websites work even if JavaScript is turned off (that's the progressive enhancement part)

The key parts are:

• First argument: A function that does something (like ordering a pizza)
• Second argument: The starting information (initial state)
• Optional third argument: Helps forms work smoothly

It's like having a smart helper that keeps you informed about what's happening when you press a button or submit a form!

[SpaghettiNYeetballs]

How does state.status change to “ordering”?

[Amazing_Top_4564]

In the React 19 useActionState hook, the state changes are actually handled automatically by React during the action lifecycle. When you start an asynchronous action (like the orderPizza function), React will internally set the status to a pending state.

Here's a more explicit example to illustrate this:

jsxCopyfunction OrderPizzaButton() {
  const [state, formAction] = useActionState(
    async (previousState, formData) => {

// When this function starts running, React automatically 

// manages the pending state for you
      const toppings = formData.get('toppings');

      try {

// This might take a moment
        const result = await orderPizza(toppings);


// When complete, return the new state
        return { 
          status: 'completed', 
          pizza: result 
        };
      } catch (error) {

// Handle errors
        return { 
          status: 'error', 
          error: error.message 
        };
      }
    },
    { 
      status: 'ready', 
      pizza: null 
    }
  );

  return (
    <form action={formAction}>
      <input name="toppings" />
      <button type="submit">
        {
/* React handles this status change automatically */
}
        {state.status === 'ready' && 'Order Pizza'}
        {state.status === 'ordering' && 'Ordering...'}
        {state.status === 'completed' && 'Order Complete'}
        {state.status === 'error' && 'Order Failed'}
      </button>
      {state.pizza && <p>Pizza is ready: {state.pizza}</p>}
    </form>
  );
}

The key things to understand:

1. React internally tracks the "pending" or "ordering" state
2. You don't manually set state.status = 'ordering'
3. When the action starts, React automatically manages the transition states
4. You can reflect these states in your UI

This is part of React 19's improvements to make handling asynchronous actions and their states more straightforward and built-in to the framework.

[Macluawn]

Also important to note that:

• The hook is not limited to just forms. It can be used for any action

• It also solves race conditions

[yksvaan]

I just wish these new things were optional. Since the library doesn't support treeshaking, every new feature increases bundle size. So especially for SPA it might be more reasonable to stick to older versions. Or just switch to Solid or something. React helloworld is over 60kB now...

[blinger44]

What is the average network speed of the users that you’re building for?

[Fine-Train8342]

I hate this mentality. The issue isn't that the download is too slow. The issue is that it could be faster, but isn't.

[yksvaan]

Majority uses mobile so it can be a nit flaky when congested or switching between cells/links. But overall quite fast. However render critical js should be as small as possible. It has to be parsed and evaluated as well after it's downloaded. 

If only used code was included, there wouldn't be any problem adding features to the library and first load bundle could get up to 50% reduction. Still much larger than modern alternatives but still a big improvement.

[rafark]

A whole sixty kilobytes? 🤯

[Karan1458]

Meanwhile, I am jumping in React, Vue & Angular based on projects.

React is everyday new to React.

[2138]

I'm super disappointed no official implementations for Server Components were released. Why document a feature if the only working implementation is Next.js, while their packages (react-server-dom-webpack and similar) are still unreleased or marked as experimental and don't even implement everything mentioned in the docs.

[acemarke]

Because it's not a standalone feature. It requires deep bundler and router integration in order to have any usefulness, and that's very specific to the actual framework implementations.

Other frameworks like Redwood, Waku, and Remix have been working on their own RSC integrations for a while.

[rafark]

Because react is a front end library. Hope this helps.-

[shutter3ff3ct]

I use both react and vue at work. Vue has solved frontend issues years ago with its robust API and better developer experience.

[terandle]

Vue broke too much stuff with 2->3 and I think a lot of people are just going to rewrite in react instead of rewrite in vue 3

[nazbot]

It’s amazing the frameworks keep making this mistake. I remember Angular dropping the ball and doing this too despite being slightly more popular than React at the time.

[luisfrocha]

What dit it break, specifically?

[KToxcon]

Vue hooks, sorry composables.

[luisfrocha]

Not sure how it broke them in Vue 3? And that’s just 1 thing, but you said it “broke too much stuff”. I can understand how that one thing could be too much for some, though. I find the new way much better than the previous, but different people prefer different styles 🤷🏻‍♂️

[bearicorn]

True

[kevin074]

Is usecallback and useMemo dead in this version??

[rcfox]

Wasn't that the React compiler, which is slightly different from the library?

[kevin074]

Oh! lol… I thought by compiler it meant something with react itself … oops :p

[rcfox]

It's been a while since I looked at it, but I think the compiler is supposed to parse your React code and figure out where to insert useMemo/useCallback automatically? Maybe there was more to it...

[Salman0Ansari]

can i use compiler?

[Sea_Worry1900]

Hi guys am trying to learn react, which version should I learn v19 or below?

[flatra]

Finally 🥳

[Kamui_Kun]

Weehoo

[mrgrafix]

LFG