React19 Hooks FAQ & Answers

useTransition returns [isPending, startTransition] for non-blocking updates: import { useTransition } from 'react'; const [isPending, startTransition] = useTransition(); function handleClick() { startTransition(async () => { const data = await fetchData(); setResults(data); }); }. React 19 supports async callbacks in startTransition (new feature). isPending is true during transition, false after completion. Benefits: keeps UI responsive, urgent updates (typing, clicks) zoom through while non-urgent (filtering, rendering) wait. Use for: search filtering, tab switching, form submissions. Async transitions immediately set isPending=true, make requests, then set isPending=false. Replaces manual loading states. Wrap expensive state updates to prevent UI blocking. Production: combine with Suspense for data fetching, show loading indicators via isPending. Works with concurrent rendering for smooth UX.

use() reads promises during render with Suspense integration: import { use, Suspense } from 'react'; function UserProfile({ userPromise }) { const user = use(userPromise); return

useFormStatus provides form submission status (must call in child component): import { useFormStatus } from 'react-dom'; function SubmitButton() { const { pending, data, action, method } = useFormStatus(); return {pending ? 'Submitting...' : 'Submit'}; }. Parent:

useDeferredValue defers expensive renders without fixed delay: import { useDeferredValue, useState } from 'react'; const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); <input onChange={e => setQuery(e.target.value)} />. Advantages over debouncing: no fixed delay (adapts to device speed), interruptible (React abandons render if new input arrives), deeply integrated with concurrent rendering. Fast devices render immediately, slow devices defer gracefully. Fixed 300ms debounce either wastes time (fast) or insufficient (slow). React reschedules deferred updates so urgent work (keystrokes) gets through first. Filtering 10K items still takes 500ms but won't block UI. Use for: search results, charts, previews, large lists. Avoid for: immediate updates (input masks, SSN, ZIP, currency). Production: combine with memo() for expensive components, use with Suspense for async data.

React 19 allows ref as standard prop - forwardRef deprecated: function MyInput({ ref }) { return ; }. Parent: const ref = useRef(); . No wrapper needed. forwardRef still works but will be deprecated in future versions. Codemod available for migration. Callback ref cleanup (new in React 19): function MyInput({ ref }) { <div ref={(node) => { console.log('mounted', node); return () => console.log('cleanup'); }} />; }. Cleanup function called on unmount (replaces ref(null) pattern). TypeScript: ref prop typed as RefObject | RefCallback | null. Benefits: simpler API, less boilerplate, consistent with other props. Production: migrate existing forwardRef components, use cleanup for event listener removal, DOM observation cleanup. ESLint rule: no-forward-ref warns about deprecated usage.

Use directly instead of <Context.Provider>: import { createContext } from 'react'; const ThemeContext = createContext('light'); function App() { return ; }. Child: const theme = use(ThemeContext) or useContext(ThemeContext). Old syntax still works: <ThemeContext.Provider value='dark'>{children}</ThemeContext.Provider> but will be deprecated in future React versions. Benefits: less boilerplate, cleaner syntax, consistent with component patterns. Codemod available for automatic migration. Both syntaxes work in React 19 (transition period). use() hook can read context: const value = use(MyContext). Production: migrate gradually using codemod, maintain backward compatibility during transition. No behavioral changes - just syntax simplification. Nested contexts work same as before: .

useTransition returns [isPending, startTransition] for non-blocking updates: import { useTransition } from 'react'; const [isPending, startTransition] = useTransition(); function handleClick() { startTransition(async () => { const data = await fetchData(); setResults(data); }); }. React 19 supports async callbacks in startTransition (new feature). isPending is true during transition, false after completion. Benefits: keeps UI responsive, urgent updates (typing, clicks) zoom through while non-urgent (filtering, rendering) wait. Use for: search filtering, tab switching, form submissions. Async transitions immediately set isPending=true, make requests, then set isPending=false. Replaces manual loading states. Wrap expensive state updates to prevent UI blocking. Production: combine with Suspense for data fetching, show loading indicators via isPending. Works with concurrent rendering for smooth UX.

use() reads promises during render with Suspense integration: import { use, Suspense } from 'react'; function UserProfile({ userPromise }) { const user = use(userPromise); return

useFormStatus provides form submission status (must call in child component): import { useFormStatus } from 'react-dom'; function SubmitButton() { const { pending, data, action, method } = useFormStatus(); return {pending ? 'Submitting...' : 'Submit'}; }. Parent: . Properties: pending (boolean, true during submit), data (FormData object or null), action (function reference or null), method ('get' or 'post'). Important: must be called from component inside

useDeferredValue defers expensive renders without fixed delay: import { useDeferredValue, useState } from 'react'; const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); <input onChange={e => setQuery(e.target.value)} />. Advantages over debouncing: no fixed delay (adapts to device speed), interruptible (React abandons render if new input arrives), deeply integrated with concurrent rendering. Fast devices render immediately, slow devices defer gracefully. Fixed 300ms debounce either wastes time (fast) or insufficient (slow). React reschedules deferred updates so urgent work (keystrokes) gets through first. Filtering 10K items still takes 500ms but won't block UI. Use for: search results, charts, previews, large lists. Avoid for: immediate updates (input masks, SSN, ZIP, currency). Production: combine with memo() for expensive components, use with Suspense for async data.

React 19 allows ref as standard prop - forwardRef deprecated: function MyInput({ ref }) { return ; }. Parent: const ref = useRef(); . No wrapper needed. forwardRef still works but will be deprecated in future versions. Codemod available for migration. Callback ref cleanup (new in React 19): function MyInput({ ref }) { <div ref={(node) => { console.log('mounted', node); return () => console.log('cleanup'); }} />; }. Cleanup function called on unmount (replaces ref(null) pattern). TypeScript: ref prop typed as RefObject | RefCallback | null. Benefits: simpler API, less boilerplate, consistent with other props. Production: migrate existing forwardRef components, use cleanup for event listener removal, DOM observation cleanup. ESLint rule: no-forward-ref warns about deprecated usage.

Use directly instead of <Context.Provider>: import { createContext } from 'react'; const ThemeContext = createContext('light'); function App() { return ; }. Child: const theme = use(ThemeContext) or useContext(ThemeContext). Old syntax still works: <ThemeContext.Provider value='dark'>{children}</ThemeContext.Provider> but will be deprecated in future React versions. Benefits: less boilerplate, cleaner syntax, consistent with component patterns. Codemod available for automatic migration. Both syntaxes work in React 19 (transition period). use() hook can read context: const value = use(MyContext). Production: migrate gradually using codemod, maintain backward compatibility during transition. No behavioral changes - just syntax simplification. Nested contexts work same as before: .