useTransition() and useDeferredValue() in React Native

here we Learn about the useDeferredValue() and useTransition Hooks and its uses

useTransition()

useTransition() can be used to tell React that certain state updates have a lower priority (i.e., all other state updates or UI rendering triggers have a higher priority).

When calling useTransition(), you get back an array with exactly two elements: An isPending boolean value, telling you whether the low-priority state update is still pending, and a startTransition() function that can be wrapped around a state update to tell React, that it is a low-priority update.

const [isPending, startTransition] = useTransition();

Returns a stateful value for the pending state of the transition, and a function to start it.

startTransition lets you mark updates in the provided callback as transitions:

startTransition(() => {
 setCount(count + 1);
})
// isPending indicates when a transition is active to show a pending state:

Here’s how the useTransition() hook could be used:

import React, {useState, useTransition } from "react";
import { ActivityIndicator, Button, SafeAreaView, Text, TextInput, TextInputComponent } from "react-native";
const App =()=>{
const [isPending, startTransition] = useTransition();
    const [count, setCount] = useState(0);
    
    function handleClick() {
      startTransition(() => {
        setCount(count => count+ 1);
      })
    }
return(
    <SafeAreaView
 style={{flex:1,alignItems:"center",justifyContent:"center"}}>
      
      {isPending && <ActivityIndicator />}
      <Text>{count}</Text>
        <Button  title="Count" onPress={()=>handleClick()} />
</SafeAreaView>)
}
export default App

useDeferredValue()

useDeferredValue accepts a value and returns a new copy of the value that will defer to more urgent updates. If the current render is the result of an urgent update, like user input, React will return the previous value and then render the new value after the urgent render has completed.

This hook is similar to user-space hooks which use debouncing or throttling to defer updates. The benefits to using useDeferredValue is that React will work on the update as soon as other work finishes (instead of waiting for an arbitrary amount of time), and like startTransition, deferred values can suspend without triggering an unexpected fallback for existing content.

Memoizing deferred children
useDeferredValue only defers the value that you pass to it. If you want to prevent a child component from re-rendering during an urgent update, you must also memoize that component with React.memo or React.useMemo:

useTransition() gives you full control since you decide which code should be wrapped and treated as “low priority”. Sometimes though, you might not have access to the actual state updating code (e.g., because it’s performed by some third-party library). Or, for some reason, you can’t use useTransition().

In such cases, you could use useDeferredValue() instead.

With useDeferredValue(), you don’t wrap the state updating code but instead the value that’s in the end generated or changed because of the state update (either the state value itself or some value that’s computed based on the state value, as in the demo app shown in the video).

A basic example could look like this:

function ProductList({ products }) {
 const deferredProducts = useDeferredValue(products);
 return (
 <View>
 {deferredProducts.map((product) => (
 <Text>{product}</Text>
 ))}
 </View>
 );
}
```
Here, useDeferredValue() is used to wrap products. As a result, React will perform other state or UI updates with a higher priority than updates related to the products value.

Conclusion

As mentioned above, the difference is that useTransition() wraps the state updating code, while useDeferredValue() wraps a value that’s affected by the state update. You don’t need to use both together, since they achieve the same goal in the end.

Instead, it makes sense to prefer useTransition(), if you have some state update that should be treated with a lower priority and you have access to the state updating code. If you don’t have that access, use useDeferredValue().

hope this article is useful for you!🙂🙂

If you enjoyed this article, share it with your friends and colleagues!😇