4 new HOOKS APIs (useSyncExternalStore) concurrent rendering in REACT 18

2 years ago
14

Improve the performance of your App by using these 4 hooks.

Hi everyone! In today's video, I am going to give you an intro to 4 new API hooks React has introduced in its latest version. React 18.
These APIs will only be available if we upgrade React and use the new Root API. If you don't know how to upgrade to React 18, check this video:
https://www.youtube.com/watch?v=9uXq0sH_zsc&t=3s

useTransition() and startTransition() - Transitions allow us to split a state update into an urgent and no urgent part, the transition part. React will interrupt the transition state updates and update the urgent updates first.
useDeferredValue() -Works similarly, but it's mainly useful when we work with external libraries that we don't have control over the setState.
useId() - We can use it to generate unique IDs on the client and server.
useSyncExternalStore() - Recommended for any state management library to make it easier to integrate with React.

Don't forget to subscribe to my channel to be up to date with everything that is going on with React.

Loading comments...