NEW React 19 Changes Are Amazing!
Summary
TLDRIn this video, Kyle from Web Simplified breaks down the key updates in React version 19, aiming to simplify the transition for developers. The most significant change is the introduction of a compiler, which will automatically handle memorization, reducing the need for hooks like `useMemo`, `useCallback`, and the `memo` function. This simplifies code and enhances performance. React 19 also stabilizes features like actions and directives for client and server-side rendering, making form handling more intuitive with new hooks like `useFormStatus` and `useFormState`. Additionally, it introduces `useOptimistic` for optimistic UI updates and improves suspense for loading styles and scripts. The update promises better integration with web components and eliminates the need for `forwardRef` and `react.lazy` with the new `use` hook. This comprehensive overview highlights React's commitment to making development more accessible and efficient.
Takeaways
- 🚀 **React Compiler Introduction**: React 19 will include a compiler, which is a significant change as React historically ran in the browser without a compile step. This compiler will automatically handle memorization, reducing the need for manual hooks like `useMemo`, `useCallback`, and `memo`.
- 📝 **Simplified Code and Performance**: The compiler will simplify code by removing the need for specific hooks, making it easier to read and write, and likely improving performance by identifying more opportunities for memoization than developers might find themselves.
- 🔄 **Actions and Directives**: React 19 will stabilize and expand the use of actions and the `use client`/`use server` directives, allowing for server-side execution of functions that were previously limited to client-side, enhancing flexibility and performance.
- ⚙️ **Form Handling Enhancements**: New hooks `useFormStatus` and `useFormState` will streamline form handling, reducing boilerplate code for managing form states, errors, and loading states.
- 🌟 **Optimistic Updates**: The `useOptimistic` hook will facilitate optimistic UI updates, providing a seamless user experience by showing immediate feedback (e.g., a 'like') before server confirmation.
- 📜 **Client and Server Directives**: The `use client` and `use server` directives will become stable features, enabling frameworks other than Next.js to leverage these capabilities for better server-side rendering and client-side execution control.
- 📄 **Document Metadata**: React 19 will improve handling of metadata within components, allowing for tags like `title`, `meta`, and `link` to be placed anywhere in React components and automatically positioned correctly in the document head.
- 🔗 **Suspense for Styles and Scripts**: Suspense, introduced in React 18, will be enhanced to ensure that styles, links, and scripts are loaded and executed before the page content is displayed, improving the consistency of the rendering process.
- 🌐 **Improved Web Components Support**: React 19 will offer better integration with web components, making it easier to use them within React applications without requiring separate React-specific versions.
- 🔄 **No Need for `forwardRef`**: The `forwardRef` function will become obsolete as React 19 will automatically pass the `ref` prop to every component, simplifying the process of handling references.
- 🆕 **New `use` Hook**: The addition of the `use` hook in React 19 will allow for asynchronous loading of JavaScript files, promises, and context, providing a powerful but complex tool for advanced use cases.
Q & A
What is the biggest change coming in React version 19?
-The biggest change is the addition of a compiler to React. This is significant because previously React only ran in the browser without a compile step, but with the new compiler, React will automatically handle optimizations such as memorization that were previously manual through hooks like useMemo, useCallback, and the memo function.
Why is the introduction of the React compiler considered a win for developers?
-The introduction of the React compiler is a win because it simplifies code by eliminating the need for manual performance optimization hooks, making the code easier to read and write. Additionally, it is expected to make code faster as the compiler is likely to identify more opportunities for memoization than developers would manually.
What are 'actions' in the context of React and Next.js?
-Actions in React and Next.js are functions that can handle form submissions. They allow for the processing of form data, and with React 19, these actions will become a stable feature that can run on either the client or the server, providing a more built-in way to deal with forms, including submissions, error states, loading, and data management.
How do the new hooks useFormStatus and useFormState simplify form handling in React?
-The useFormStatus and useFormState hooks simplify form handling by automating the management of form state and loading status. This reduces the amount of boilerplate code needed to handle form submissions, errors, and loading messages, making the process more straightforward and easier to implement.
What is the purpose of the useOptimistic hook?
-The useOptimistic hook allows for optimistic updates in React applications. This means that it can immediately reflect changes, such as a 'like' action, to the user interface before the server has confirmed the action, providing a smoother and more immediate feedback to user interactions.
What is changing with the use client and use server directives in React 19?
-In React 19, the use client and use server directives are becoming a stable feature. This means that they will no longer be experimental and can be used to determine if code runs on the server or the client. This change is expected to enable other frameworks besides Next.js to adopt these directives.
How does the document metadata feature in React 19 help with server-rendering?
-The document metadata feature allows developers to place title tags, meta tags, and link tags within React components, which are then automatically moved to the correct location in the HTML head. This ensures that metadata is properly managed, which is particularly beneficial for server-rendered pages and React server components.
What is the role of the Suspense feature in React 18, and how is it being enhanced in React 19?
-Suspense is a feature in React 18 that allows for the streaming of data to be rendered. In React 19, it is being enhanced to ensure that it waits for style tags, links, and scripts to load before displaying the page. This helps prevent scenarios where a page renders without the necessary CSS or scripts loaded.
How will React 19 improve the integration of Web Components?
-React 19 will improve the integration of Web Components by making them work much better with React. This will simplify the process of implementing Web Components within a React project, addressing past difficulties and eliminating the need for separate Web Component and React-specific versions of libraries.
What is the impact of the change to the ref prop in React 19?
-In React 19, the ref prop will be automatically passed to every component, eliminating the need for the forwardRef function. This simplifies the process of using refs within React components.
What is the use hook in React 19, and how does it differ from other hooks?
-The use hook in React 19 is a new addition that allows for the asynchronous loading of JavaScript files, running promises, and managing context in a more complex and flexible way than traditional hooks. It breaks the rules of normal hooks by allowing asynchronous operations and is considered one of the most powerful but potentially complex hooks added to React.
Outlines
🚀 Introduction to React 19's Major Updates
This paragraph introduces the upcoming changes in React 19, emphasizing the addition of a compiler which will automatically handle performance optimizations previously done manually with hooks like `useMemo`, `useCallback`, and the `memo` function. The compiler aims to simplify code and improve performance. Additionally, it covers the incorporation of 'actions' for form handling, similar to Next.js, and the expansion of server and client directives for more than just Next.js. The paragraph also mentions new hooks like `useFormStatus`, `useFormState`, and `useOptimistic` for handling form submissions, state, and optimistic updates, respectively.
📄 Enhancing React with Metadata, Suspense, and More
The second paragraph discusses additional features in React 19. It covers the ability to place metadata tags like titles, meta, and link directly in React components, which will be correctly positioned in the HTML head. This feature is particularly useful for server-rendered components. The paragraph also explains improvements to the Suspense feature from React 18, ensuring that styles and scripts are loaded before the page content, preventing CSS from being missing during initial render. Furthermore, it touches on better support for web components in React 19, making it easier to integrate them into React projects. Lastly, it mentions the deprecation of `forwardRef` and the introduction of the `use` hook for asynchronous loading and running of JavaScript files, promises, and context.
Mindmap
Keywords
💡React Compiler
💡Actions
💡useClient and useServer Directives
💡Document Metadata
💡Suspense
💡Web Components
💡useMemo and useCallback Hooks
💡Memo Function
💡useFormStatus and useFormState Hooks
💡useOptimistic Hook
💡use Hook
💡Forward Ref
Highlights
React version 19 will include a compiler, which is a major change as React traditionally ran only in the browser without a compile step.
The compiler will automatically handle memorization, reducing the need for manual performance optimizations like `useMemo`, `useCallback`, and the `memo` function.
The introduction of the compiler will simplify code and improve performance by automatically finding instances for memoization more effectively than manual methods.
Actions, a feature from Next.js, will become a stable feature in React 19, allowing form data to be processed either on the client or server.
New hooks `useFormStatus` and `useFormState` will facilitate easier handling of form submissions, error states, and loading data.
The `useOptimistic` hook will enable optimistic updates, showing immediate feedback to user actions before server confirmation.
Client and Server directives (`use client` and `use server`) will become stable, allowing other frameworks to utilize these features beyond Next.js.
Document metadata can now be placed within React components, and React will ensure it is correctly positioned in the HTML.
Suspense, a feature from React 18, will be empowered in React 19 to wait for style tags, links, and scripts to load before rendering.
Web components will work better with React 19, making it easier to implement them in React projects.
The `forwardRef` will no longer be necessary as the `ref` prop will be automatically passed to every component in React.
The `use` hook will be added to React, allowing for asynchronous loading of JavaScript files, promises, and context.
The `use` hook is complex and breaks the rules of normal hooks, offering new possibilities for React development.
React 19 will make applications faster and easier to write by streamlining performance optimizations and form handling.
The new features in React 19 aim to reduce boilerplate code and improve the developer experience with built-in utilities.
Kyle, the presenter, offers a free course to keep developers updated on new React hooks as they are released.
The free course covers all the new hooks in React, including in-depth explanations and practical applications.
Transcripts
staying up to dat with everything that's
changing in react is incredibly
difficult so in this video I'm going to
go through the seven main things that
you need to understand about react
version 19 I'm going to make it as
simple and quick as possible so you can
get up to speed with everything you need
to know before it even
releases welcome back to webd simplified
my name is Kyle and my job is to
simplify the web for you so you can
start building your dream project sooner
as you can see there's a lot of
documentation that react has released
about what's going to be happening in
version 19 I'm going to go through in
order of importance everything that's
changing and the biggest change is going
to be that they're actually adding a
compiler to react this is actually a
really big deal because For the Longest
Time react only ran in the browser and
there's no compile Step at all and now
other Frameworks have come along such as
Astro and spelt and they added in their
own compile step and this compile step
just takes care of a lot of things for
you behind the scenes so you don't have
to write extra code for that but since
react never had that we had different
hooks like use memo use callback and the
memo function that allowed you to do
extra performance things to make sure
your code ran performant since there was
no compiler to do that for you
automatically well with react version 19
the big thing that they're pushing is
this react compiler so that means that
automatically react is going to add its
own memorization for things like use
memo use callback and the memo function
so you never have to use those hooks or
functions ever again it's just going to
be automatically taken care of for you
by the compiler so anytime you would
normally need to use memo or use call
back you can just completely remove that
and the compiler will take care of it
for you now this is a huge win because
not not only does it make your code
simpler and easier to read and write
since you no longer have to think about
this but it also will make your code
faster because it's almost always the
case that the actual compiler is going
to find more instances of where you
should be doing memoization than where
you would normally find it yourself so
having this extra compile step is going
to make your application faster and
easier to write and is honestly the
thing I'm most excited about for react
version 19 because these hooks are the
reason that react is so confusing and
complicated to write especially as you
get larger and larger applications where
performance is really important now the
next two main features I want to talk
about are something that you may be
familiar with if you've already worked
inside of nextjs and that's the idea of
actions as well as the used client and
the used server directive we'll start by
talking about actions since this affects
you a little bit more directly but if
you've ever worked inside a nextjs you
know that you can create a form and
instead of passing an on submit you pass
it an action and this action will take
in all of your different form data and
you can do whatever you want with this
action and if you're using nextjs this
action can even run on the server in
instead of running in the client well
the big change with react 19 is first
that they're making that this is a
stable feature because right now it's
not really a stable feature and secondly
they're adding it so it actually works
inside of client or server applications
so this action that I pass in here which
is just a function that takes in my form
data can either run on the client or it
can run on the server and it has other
hooks built around it that make dealing
with State and loading and so on
incredibly easy as you can see here we
have hooks called use form status and
use form State and if you want to learn
more about these new hooks I actually
have an entirely free course on every
single react hook you need to know and I
constantly update this course whatever
new hooks are released so if that sounds
interesting check out the link down in
the description below and sign up for
that course and again I'll update it as
soon as new hooks are released or
changed but essentially this new way of
using an action instead of an onsubmit
just gives you a more built-in way in
react to actually deal with forms form
submissions form error states form
loading form data everything that there
is to do with forms can be done much
easier by using this action instead of
using an onsubmit Handler cuz a lot of
that boiler plate like loading error
messages and so on is automatically
taken care of for you by these two hooks
of use form status and use form State
and now another additional hook that's
being added is use optimistic again I
entirely cover that hook inside of this
course and this hook just allows you to
do optimistic updates so for example if
you click on the like button on like a
tweet or a post what will happen is
it'll automatically show you that that
has been liked while the server is
processing and then once the actual
result comes back it'll either change it
to liked or unliked based on if there's
an error or not so an optimistic update
just shows you the most optimistic thing
like saying okay if you click on this
like button you want to like it so it'll
show is liked immediately even if it
hasn't been submitted to the server yet
so this is just a really simple hook
that makes doing that much easier and
it's honestly really cool and magical
how this actually works and again I have
a full video on that in the course and
this hooks course that I have is also
completely free by the way I'm not sure
if I mentioned that so if you are
interested in it's completely free all
you have to do is sign up for the course
nothing else now the next thing is
talking about the actual client versus
server directives so you know that you
can put use client or use server at the
top of a file inside of nextjs to
determine if that code is running on the
server or if that code is being pushed
down and ran on the client so this is
just a really easy way for you to
distinguish between these two things and
right now it's really only usable inside
of nextjs but with this newest version
of react 19 that's coming out this is
going to be a stable release instead of
something that is more of an
experimental status which means other
Frameworks can be built around these
used client and used server features and
we will hopefully see more Frameworks
than just nextjs or remix actually have
these used client and used server
features and we can really start to play
around with the power of this in more
than just nextjs which I think is really
cool and important because more and more
Frameworks add to more Innovation which
pushes all the Frameworks further now
the next thing I want to talk about is
this document metadata section and
essentially what this allows you to do
is to put a title tag a meta tag or a
link tag that deals with metadata
anywhere inside of your react component
and it's automatically going to make
sure it moves it to the right location
inside of like the or wherever else it
needs to go so if you want to have like
a different title on multiple different
pages you can just drop this title
component anywhere in your component and
it's just going to work out of the box
which is really nice and they mostly did
this so that you can have certain things
work fine when you're doing server
rendering and react server components
they did this because certain things
like react helmet and other libraries
like that won't work super well with
this new way of doing things in react so
they just built in their own way of
doing that which is just a nice quality
of life feature the next thing I want to
talk about has to do with suspense so
you may not be familiar with suspense
it's a new react 18 feature that allows
you to essentially stream in things so
you can stream your data in to be
rendered it's really popular in
something like nextjs and essentially
what they're doing here is empowering
suspense by making sure that it waits
for certain things like your style tags
links and scripts to load so if you have
certain style tags that are only loaded
on certain pages or certain components
or you have script tags that are running
on only certain pages this is going to
make sure that all your Styles and all
your script tags are actually downloaded
and ran before the page actually shows
that way you don't have an instance
where your page renders but none of your
CSS has been downloaded yet this is just
essentially making sure all of that will
work well together and it even gives you
a simple API that you can use to do this
with more than just style link and
script tags if you really want to but
that's a rather Advanced feature now
those are the main features mentioned in
this article but there's actually quite
a few additional things that are coming
along one thing is that web components
are going to work much better in react
19 they mention it very briefly inside
this article it's like one sentence that
they mention it but they do mention that
web components are now going to be
working much better with react 19 so if
you want to use web components in react
it should be much easier to implement
them inside of a react project because
in the past that was something that was
really difficult which is why you would
almost always see when you're working at
libraries there would be a web component
library and then like a react specific
version because it was so hard to make
web components work in react but now it
should be much easier to get them to
play well together now these last couple
features are really small so I'll go
through them quite quickly the first is
that forward ref is something you are
never going to need to use ever again
and that's because the ref prop that you
normally get by using forward ref is
automatically going to be passed to
every component inside of react so you
can just use refs by just passing it
along as a second prop and you don't
need this crappy forward ref function
wrapping stuff anymore after this next
is that you actually won't really need
to use react. La anymore and that's
because a brand new hook called use just
simply use is being added to react and
this use hook allows you to do a lot of
really cool stuff it allows you to
essentially asynchronously load things
whether that's going to be
asynchronously loading JavaScript files
whether it's going to be asynchronously
running different proc promises or maybe
you even want to run your context
through here all of those things are
possible with the use hook it's honestly
a rather complex hook that breaks all of
the rules of normal hooks so if you want
to learn more about that hook I highly
recommend checking out that free course
I go in- depth into everything you can
do with this hook because honestly it's
one of the coolest hooks that was added
to react but it can be incredibly
complicated because like I said it
breaks all of the rules of every other
hook out there so if you're interested
in checking out this use hook I highly
recommend checking out that free course
and that's all the big new changes
coming to react 19 if you want to make
sure you stay up to date with all the
new hooks that are coming out in react
again I highly recommend you check out
that free course because as soon as new
hooks are added or changed I constantly
update that course with that said thank
you very much for watching and have a
good day
5.0 / 5 (0 votes)