hooks: core signatures

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

useDeferredValue hook signature and parameters

useDeferredValue(value, initialValue?) is a React Hook that lets you defer updating a part of the UI. The value parameter is the value you want to defer and can have any type. The optional initialValue parameter is a value to use during the initial render of a component. If initialValue is omitted, useDeferredValue will not defer during the initial render because there's no previous version of value that it can render instead.

useDeferredValue return value behavior

useDeferredValue returns a deferred value that behaves differently during initial render versus updates. During the initial render, the returned deferred value will be the initialValue if provided, or the same as the value you provided if initialValue is omitted. During updates, React will first attempt a re-render with the old value so it returns the old value, and then try another re-render in the background with the new value so it returns the updated value.

useDeferredValue integrates with Suspense

useDeferredValue is integrated with Suspense. If the background update caused by a new value suspends the UI, the user will not see the fallback. They will see the old deferred value until the data loads.

useDeferredValue has no fixed delay

There is no fixed delay caused by useDeferredValue itself. As soon as React finishes the original re-render, React will immediately start working on the background re-render with the new deferred value. Any updates caused by events like typing will interrupt the background re-render and get prioritized over it.

useDeferredValue search example with Suspense

Example showing useDeferredValue with Suspense boundary: import { Suspense, useState, useDeferredValue } from 'react'; import SearchResults from './SearchResults.js'; export default function App() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); return ( <> <label> Search albums: <input value={query} onChange={e => setQuery(e.target.value)} /> </label> <Suspense fallback={<h2>Loading...</h2>}> <SearchResults query={deferredQuery} /> </Suspense> </> ); } The query updates immediately for responsiveness, while deferredQuery lags behind, keeping stale results visible until new results load.

useDeferredValue indicating stale content with opacity

Example showing visual indication of stale content: <div style={{ opacity: query !== deferredQuery ? 0.5 : 1, }}> <SearchResults query={deferredQuery} /> </div> This dims the stale result list when query differs from deferredQuery. Adding a transition property can delay the dimming for a gradual effect.

useDeferredValue performance optimization with memo

Example showing useDeferredValue as performance optimization: function App() { const [text, setText] = useState(''); const deferredText = useDeferredValue(text); return ( <> <input value={text} onChange={e => setText(e.target.value)} /> <SlowList text={deferredText} /> </> ); } const SlowList = memo(function SlowList({ text }) { // ... }); This prioritizes updating the input over re-rendering the slow list. The SlowList must be wrapped in memo to skip re-rendering when props haven't changed.

Give your agent this brain