In this article, we will learn new thing of react js letest version react 18.
The Main of React 18 Will Be
- Right out of the box, there are some significant improvements in performance.
- Concurrent features have been added.
- The server-side rendering area has to be improved
1. Concurrency
The ability to accomplish multiple tasks at the same time is referred to as concurrency.
Assume that animation is operating in one component of a basic React project, and that a user can enter or click in other React components at the same time.
When a user types and clicks on buttons, animation is rendered within the React context as well.
To provide users with the greatest possible experience, React must now merge, reorder, and prioritise these events and functions in a single-threaded process.
React has a “dispatcher” who is in charge of prioritising and requesting these callbacks inside.
Users had no way of changing the order in which these functions were called before React 18. The Transition API, on the other hand, now allows the user some control over the event loop.
2. Automatic Batching
Batching is the practise of combining many React state updates into a single render for increased efficiency.
If you have two state changes in a single click event, for example, React will always merge them into one re-render. If you run the following code, you’ll notice that despite setting the state twice, React only renders one code render per click:
function App() {
const [count, setCount] = useState(0);
const [colorFlag, setColorFlag] = useState(false);
function handleClick() {
setCount(c => c + 1); // Does not re-render yet
setColorFlag(f => !f); // Does not re-render yet
// React will only re-render once at the end (that's batching!)
}
return (
<div>
<button onClick={()=>{handleClick()}}>Next</button>
<h1 style={{ color: colorFlag ? "blue" : "black" }}>{count}</h1>
</div>
);
}
It improves performance by lowering the number of re-renders that aren’t required.
It also stops the component from displaying half-completed states in which just one state variable has been changed, which can cause issues.
Consider a restaurant waitress who, rather than hurrying to the kitchen after you place your first order, waits until you’ve finished your meal before proceeding.
React, on the other hand, wasn’t always consistent in its batching of updates.
Because React used to only batch updates during browser events (like clicks), we’re updating the state after the event has already been handled (in the fetch callback):
function App() {
const [count, setCount] = useState(0);
const [colorFlag, setColorFlag] = useState(false);
function handleClick() {
fetchSomething().then(() => {
// React 17 and earlier does NOT batch these because
// they run *after* the event in a callback, not *during* it
setCount(c => c + 1); // Causes a re-render
setColorFlag(f => !f); // Causes a re-render
});
}
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: colorFlag ? "blue" : "black" }}>{count}</h1>
</div>
);
}
3. Transition
In React 18, the Transition API is a terrific new feature.
With frequent updates on enormous screens, it allows consumers to settle concerns.
For example, fill out the input form that filters the data list. You must solve the area’s value in the state to segregate the data and regulate the input field value.
This code could look something like this:
Update the input value and the search results:
setSearchQuery(input);
When a user types any character, we update the input value and utilise a new value to discover the list and display the results.
While everything is rendering, there may be a delay in large-screen updates, making other interactions or typing slow and unresponsive.
Even if your list isn’t extremely long, the items on it can become increasingly complex and varied as you type.
There is no obvious method to improve their rendering.
There are two changes that must be made in terms of concept.
The first is an urgent update that requires you to change the value of an input field as well as possibly some user interface. The second, on the other hand, is a less critical change to the way the search results are displayed.
