What is the difference between useTransition and useDeferredValue?

React hooks and effects · Experienced

Model answer

Both keep the UI responsive during heavy updates. useTransition wraps a state update you control (startTransition(() => setQuery(x))) and marks it as non-urgent, giving you an isPending flag. useDeferredValue takes a value you receive, such as a prop, and returns a version that lags behind during urgent updates.

Use the first when you own the setter, the second when you only have the value.

Learn this topic

React useEffect Explained: Side Effects, Dependencies and Cleanup in the course React.js Full Course: Beginner to Advanced.

Sign in to add your own answer.

More questions

• What are hooks, and what are the rules of hooks?
• What does useEffect do?
• What does the dependency array of useEffect mean?
• Why does an effect run twice in development?
• What is the cleanup function in useEffect, and when does it run?
• How do you fetch data in a React component with useEffect?