React News - February 2024
On 02/15/24, the react.dev blog was updated with new content and React features expected to launch by the end of 2024.
Here is a summary of what was published:
React Compiler
Currently, to perform memoization and prevent React from doing too many unnecessary re-renders, you need to apply memoization techniques manually, using hooks like useMemo, useCallback, and the memo API.
This approach works but can lead to various mistakes, omissions, incorrect usage, and even performance degradation. It is a manual approach that requires a deeper understanding of how each step of React works.
With that in mind, the Core team believes it is possible for React to re-render only the parts that truly need to be updated, without needing to use memoization hooks. That is why the Core team is developing a new compiler for React.
The React compiler will be able to compile code safely by taking into account two sets of rules: the rules of JavaScript and the rules of React.
One example of this is that a React component must be idempotent — meaning that given the same input value, it must always produce the same output and must not undergo state or property mutations.
If you want to learn more about how the compiler works, check out this video.
Actions
Server Actions are a solution for sending data from the client to the server, allowing database changes to be made through form data. During the development of Server Actions, the React Core team is extending this API support to also enable data manipulation in client-only applications.
This approach is referred to simply as Actions. It allows passing functions to a DOM element, such as a <form />.
<form action={search}>
<input name="query" />
<button type="submit">Search</button>
</form>
The action function can work either asynchronously or synchronously. When using an action, React will manage the lifecycle and data submission through hooks like useFormStatus and useFormState, which allow accessing the state of a form action.
By default, Actions are submitted using a transition, keeping the UI responsive and unblocked.
Since Actions support async events, React will be able to check whether a request is pending (isPending), giving developers control over how the UI should behave.
A feature called useOptimistic is also being added for optimistic state management, which allows the UI to be updated before the request is even completed.
This allows inserting a final state into the client's data, assuming the data submission was successful, and reverting to the value received from the server if it was not. This approach works using async/await, in the same way as a client-side fetch or a server-side Server Action.
React Canary
Features like these can be tested through React Canary, which is a version of React that allows testing new features before they are officially released.
React Server Components, Asset Loading, Document Metadata, and Actions are all available for testing in React Canary.
Conclusion
React's updates are promising and bring great benefits to web application development. It is important to stay up to date and test the new features to make the most of React's full potential.
The updates promise to simplify React application development, making it more efficient and performant, while also avoiding human errors and performance loss.
Features still in development may change before the official release. It is important to evaluate the need for each feature before implementing it in a project.