All you need to know about React19
React 19 thinking in a way that ‘Write Less, Do More’
First thing first you will not need these APIs again by the end of 2024.
forwardRef
<Context.Provide>
useMeno , useCallback , memo
throw promise
React.lazy
Or maybe you are not using them right now also 🥲
There are multiple things React19 comes with some of them are...
React Compiler
Server Components
Assets Loading
New React Hooks
Actions
Document Metadata
Web Components
React Compiler ->
There are multiple places where you manage the re-render on state change manually by using these APIs.
useMeno()
useCallback()
memo
Earlier these things were managed by React itself by using the APIs but sometimes it affected the performance to solve this problem React comes with "React Compiler" What React compiler does is that it manages the re-renders automatically, React will decide automatically how and when to change the state and update the UI.
So you have no need to manage the re-render by using the useMemo(), use Callback(), and memo after React19.
If you want to know more about the React compiler here are the full resources
Before releasing the React compiler for React19 meta using it in production React compiler currently powering Instagram.
Server components ->
'use server';
export default async function requestUsername(formData) {
const username = formData.get('username');
let status = 'failed';
if (canRequest(username)) {
status = await sendRequest(username);
}
return status;
}
async function sendRequest(username) {
// ...
return 'successful';
}
All the components in React by default are client-side. Only when you use 'use server' will the component be a server component.
The above code is in React but will run on the server. You just need to add 'use server' it as the first line of the component. This will make the component a "server component". It won't run on the client side and will only run on the server side.
The idea of the server components has been working for a long time with Next.js13 in production. After Next.js13, all the components are server components by default, To make components run on the client side, you need to use the "use client" at the top of the components.
In the React19 server components directly will integrated into React.js means if you want to use server components in your project no need to go for Next.js you can use it with React also.
Advantage of the server component.
Server-side rendered components enhance search engine optimization by providing more accessible content to web crawlers. This means that before React19 you needed React Helmet to implement the SEO now no need for that you can do SEO by React only.
Performance is also improved in server-side rendered components because it contributes to faster initial page loads and improved overall performance, particularly for content-heavy applications.
Server-side execution also enables the execution of the code on the server side for making tasks like API calls seamless and efficient.
Assets Loading ->
Before assets load sometimes it happens that the styling you have applied for the webpage and font style load after the webpage loads fully this creates the flicker issue for the user and the developer has to manage these things manually by adding the condition but not in React19.
In React 19, images and other files will load in the background as users explore the current page. This improvement should help improve page load times and reduce waiting periods.
There are new Resource Loading APIs like preload and preinit to provide greater control for when a resource should load and initialize.
React19 lowers waiting times and makes sure users can interact with the content uninterrupted by letting assets load asynchronously in the background. This enhancement helps customers have a more pleasurable browsing experience in addition to improving the speed of React applications.
New React Hooks ->
In React 19, the way we use useMemo, forwardRef, useEffect, and useContext will change. This is mainly because a new hook usewill be introduced.