useDeferredValue Performance Optimization Hook in React

The performance optimization hook useDeferredValue, like useTransition, helps speed up the GUI, but does it a little differently.

Take a look at the previous lesson and see how in the case of useTransition we wrapped the update function setFilterTerm. Now, the code for updating the state may not always be available. It may be hidden, for example, in a library that you included. In this case, we can use the useDeferredValue hook. Then we need to wrap either the state itself or the result calculated using this state, thereby lowering its priority.

Let's analyze the following piece of code from the child component ProductList:

import {useDeferredValue} from 'react'

function ProductList({ products }) {
	const deferredProducts = useDeferredValue(products);
	
	return (
		<ul>
			{deferredProducts.map((product) => (
				<li>{product}</li>
			))}
		</ul>
	);
}

Note that here we wrapped the products variable itself, which we took from the component props, in useDeferredValue. Then we wrote the result to deferredProducts, which we will work with further:

const deferredProducts = useDeferredValue(products);

Now, if we remove the line from the piece of code of the main component that we looked at in the last lesson:

const [isPending, startTransition] = useTransition();

And a line using isPending:

{isPending && <p>updating ...</p>}

And also remove the wrapper from the function setFilterTerm, then we get the same result as in the previous lesson:

function updateFilterHandler(event) {
	setFilterTerm(event.target.value);
}