🤓 I want to equip you with the needed knowledge for before the new update will hit your production.
Why this updated was created?
The idea of the udpate is to make the UI more Optimistic less struggle, less code, and less external libraries.
What is Optimistic UI?
The Optimistic UI is the way to show user a change in the UI before the response from the server reaches the client.
5 features that will help you implement a better UI with React 19
1. useOptimistic
New hook useOptimistic
will help us to calculate the optimistic value within a single hook.
import { useOptimistic, useState } from 'react';
function AppContainer() {
const [state, setState] = useState()
const optimisticState, addOptimistic] = useOptimistic(
state,
// updateFn
(currentState, optimisticValue) →> {
// merge and return new state
// with optimistic value
}
}
2. useTransition
hook useTransition
which was added previously, right now the async
transitions are supported
function UpdateName() {
const [name, setName] = useState("");
const [error, setError] = useState(null);
const [isPending, startTransition] = useTransition();
const handleSubmit = () => {
startTransition(async () => {
const error = await updateName(name);
if (error) {
setError(error);
return;
}
redirect("/path");
});
};
return (
<div>
<input
value={name}
onChange={(event) => setName(event.target.value)}
/>
<button onClick={handleSubmit} disabled={isPending}>
Update
</button>
{error && <p>{error}</p>}
</div>
);
}
useTransition
is helping us to update state without blocking the UI and providing the pending
state by default.
3. New API use
New function use
will help us to resolve async actions.
import {use} from 'react';
function Comments({commentsPromise}) {
// `use` will suspend until the promise resolves.
const comments = use(commentsPromise);
return comments.map(comment => <p key={comment.id}>{comment}</p>);
}
We can also resolve the Context
with the use
function
import {use} from 'react';
import ThemeContext from './ThemeContext'
function Heading() {
const theme = use(ThemeContext);
return (
<h1 style={{color: theme.color}}>
{children}
</h1>
);
}
4. Ref as a prop
Best feature of the new update 🚀
function MyInput({placeholder, ref}) {
return <input placeholder={placeholder} ref={ref} />
}
No need for the forwardRef
since React 19
👏
5. React Compiler
React Compiler
is a tool to automatically optimize your code at a build time.
What we expect from the compiler?
- Skipping cascading re-rendering of components
Re-rendering
<Parent />
causes many components in its component tree to re-render, even though only<Parent />
has changed. - Skipping expensive calculations from outside of
React
For example, callingexpensivelyProcessAReallyLargeArrayOfObjects()
inside of your component or hook that needs that data - Memoizing deps to effects
To ensure that a dependency of a hook is still
===
on re-rendering so as to prevent an infinite loop in a hook such asuseEffect()
🤰 When do we expect Compiler?
My assumption is late 2024, the info I got from the Andrew's Clark post on X.
🏁 Finish
Share in comments your thoughts regarding how React
codebase will be similar to any other JS framework after the Compiler
being integrated in the codebases 😁
Have a good React 19 🚀
Top comments (2)
very useful article, thank you!
thanks for the support!