React hooks make developers' lives easy when it comes to building and maintaining complex logic within the application. There are already some popular hooks that you use in your day-to-day life in your applications to maintain state, or to perform something on side effects of components rendering cycle. Such as we use useState to manage states in the components, and useEffect for making API to fetch data. But, do you know, there are three more react inbuilt hooks that will help you to tackle some of the problems in your react application, that you have not thought of existing. So let's get right into it and I will explain these hooks.
useTransition
useTransition() is a React's built-in hook that helps you to update the state without blocking the UI rendering. useTransition takes no arguments and returns an array of two items. One item is isPending variable, and the other one is startTransition method. isPending is a boolean flag that tells you whether there is any pending transition or not. startTransition is a method that lets you register the state update.
For example, you can check out the difference between updating the state with transition and updating the state without transition on React's official guide. Example
useSyncExternalStore
useSyncExternalStore is a React hook that lets you subscribe to the external store. By this, whenever the external API has some value changes, the react will notify your components using its getSnapshot method. Although React recommends using built-in React state with useState and useReducer instead. The useSyncExternalStore API is mostly useful if you need to integrate with existing non-React code. Let's say you want to subscribe to the browser API navigator. Whenever the navigator.onLine changes, it can notify our component of the status of network connectivity.
You can see the working example of useSynceExternalStore in React's guide.
useDeferredValue
There are many occasions in the application where you do not want to process the same data again and again, if that logic is external for eg. an API call, this process can be too expensive for your application performance. Thus, you do not want to show the useless loaders and data glitches until the useful data gets loaded. For, example you have a search bar functionality, where the user types any value, and the search results appear. In this case, we do not want to load data again if the user types the same query again. To solve this problem, we can utilize the useDeferredValue hook to know if the same value comes and if there is no change from the previous value. This hook takes the value in the argument and returns the fresh value, the returned value blocks the unnecessary change and only gets updated when the actual value is changed from the previous value.
You can check the React guide's example, where the hook is used to lazy load the list of results, from typed value in the search bar.
