ReactRefStateuseStateuseReduceruseActionStateuseOptimistic
EffectuseEffectuseLayoutEffectuseInsertionEffect
RefuseRefuseImperativeHandle
ContextuseContext
PerformanceuseMemouseCallback
TransitionuseTransitionuseDeferredValue
UtilityuseIduseDebugValueuseSyncExternalStoreuseFormStatus
StateuseStateuseReduceruseActionStateuseOptimistic
EffectuseEffectuseLayoutEffectuseInsertionEffect
RefuseRefuseImperativeHandle
ContextuseContext
PerformanceuseMemouseCallback
TransitionuseTransitionuseDeferredValue
UtilityuseIduseDebugValueuseSyncExternalStoreuseFormStatus
API Surface AreaThe complete React API,
The complete React API,
finally mapped.
27 hooks across 7 categories. Every method documented with TypeScript signatures, behavioral notes, and production patterns — including the ones the official docs gloss over.
0
Total Hooks
React 16.8 → 19
0
Hook Categories
State, Effect, Ref, Context, Perf, Util
0+
Production Examples
Pulled from real codebases
0
Deprecated APIs
Tracked with migration paths
State4 hooks
useStateuseReduceruseActionStateuseOptimistic
Effect3 hooks
useEffectuseLayoutEffectuseInsertionEffect
Ref2 hooks
useRefuseImperativeHandle
Context1 hooks
useContext
Performance2 hooks
useMemouseCallback
Transition2 hooks
useTransitionuseDeferredValue
Utility4 hooks
useIduseDebugValueuseSyncExternalStoreuseFormStatus
Documentation Depth
From useState to useSyncExternalStore
Each hook documented with its TypeScript signature, behavioral notes, and a production pattern that solves a real problem.
StateCore
useStateTypeScript
function useState<S>(
initialState: S | (() => S)
): [S, Dispatch<SetStateAction<S>>]
type SetStateAction<S> =
| S
| ((prevState: S) => S)
type Dispatch<A> = (value: A) => void
Optimistic UI with functional updates
Production pattern: use functional update form when new state depends on previous — prevents stale closure bugs in concurrent mode.
const [items, setItems] = useState<Item[]>([])
// ✓ Safe in concurrent mode
setItems(prev => [...prev, newItem])
// ✗ Stale closure risk
setItems([...items, newItem])
EffectCritical
useEffectTypeScript
function useEffect(
effect: EffectCallback,
deps?: DependencyList
): void
type EffectCallback = () => (
void | Destructor
)
type Destructor = () => void | {
[Symbol.dispose](): void
}
Race condition cleanup pattern
The #1 senior engineer debugging scenario: async effects with stale responses. Use an AbortController — the cleanup runs before the next effect fires.
useEffect(() => {
const ctrl = new AbortController()
fetchData({ signal: ctrl.signal })
.then(setData)
.catch(e => {
if (!ctrl.signal.aborted) throw e
})
return () => ctrl.abort()
}, [id])
RefEscape Hatch
useRefTypeScript
function useRef<T>(initialValue: T): MutableRefObject<T>
function useRef<T>(initialValue: T | null): RefObject<T>
function useRef<T = undefined>(): MutableRefObject<T | undefined>
interface MutableRefObject<T> {
current: T
}
interface RefObject<T> {
readonly current: T | null
}
Mutable value without re-render
useRef stores values that persist across renders without triggering them. Canonical use: tracking previous props, storing interval IDs, or DOM references.
const renderCount = useRef(0)
const prevValue = useRef<string>()
useEffect(() => {
renderCount.current += 1
prevValue.current = value
}) // no deps → runs every render
// Reading ref never causes re-render
console.log(renderCount.current)
ContextComposition
useContextTypeScript
function useContext<T>(
context: Context<T>
): T
interface Context<T> {
Provider: Provider<T>
Consumer: Consumer<T>
displayName?: string
}
Typed context with default guard
Production pattern: throw in the default value factory so missing providers surface at call-site with a clear error — not a silent undefined.
const Ctx = createContext<AuthState>(
null as unknown as AuthState
)
export function useAuth() {
const ctx = useContext(Ctx)
if (!ctx) throw new Error(
"useAuth must be inside AuthProvider"
)
return ctx
}
Also documented
The deep cuts engineers actually need
useSyncExternalStoreuseInsertionEffectuseFormStatususeOptimisticuseActionStateuseImperativeHandle
12,400+
Engineers on waitlist
340+
Production examples
27
Hooks documented
4.9/5
Beta tester rating
Engineer Feedback
From the engineers who matter
Beta testers who already use this at 2AM when the real work happens.
Found the exact pattern in 90 seconds
"I've been debugging a useEffect cleanup race condition for three hours. Found the exact pattern I needed in 90 seconds. The AbortController example is production-ready, not a toy."
Marcus Webb
Senior Frontend Engineer · Vercel
Examples from actual codebases
"Finally something that explains useSyncExternalStore without making me feel like I need to read the RFC first. The type signatures are precise and the examples are from actual codebases."
Priya Krishnamurthy
Tech Lead · Shopify
Every example is defensible
"I used this to write our team's internal React style guide. Every canonical example here is defensible — I can point to the behavioral reasoning, not just 'because the docs say so'."
David Chen
Principal Engineer · Linear
Early AccessLock in your seat before
Lock in your seat before
the docs ship publicly.
12,400 engineers are already on the waitlist. Early access members get lifetime free tier, private Discord, and a voice in what we document next.
Primary CTA
Get Early Access
Join the waitlist. Be among the first engineers to use ReactRef in production.
Free Resource
Download API Cheatsheet
A single-page PDF with every hook's signature, key gotchas, and the one pattern you'll actually reach for. Print it. Keep it next to your monitor.
// Preview: useState gotchas
✓ Functional updates:
setState(prev => next)
✓ Lazy init for expensive ops:
useState(() => compute())
✗ Object state: spread first
setState({...s, key: val})
... 26 more hooks inside
✓No credit card required
✓Used by engineers at Vercel, Shopify, Linear
✓React 19 coverage
✓Free forever tier planned