React Cheatsheet - Hooks & Components

This reference is for React developers who write function components and Hooks. It moves from the state/effect core to advanced hooks such as useReducer, context, and useId, then component patterns like forwardRef and render props, before controlled forms, state via Context, and performance optimizations like React.memo and lazy. Each entry is a copy-ready snippet with the deps array and edge cases called out. After reading you should be able to drive async data with useEffect, share state across components with Context, and stop wasted re-renders with memo/useCallback.

Languages·39 commands·Last updated 2026-07-21

Core Hooks 6

const [count, setCount] = useState(0)

Basic state

const [user, setUser] = useState({ name: "", age: 0 })

Object state initial value

useEffect(() => { fetchData() }, [])

Run once on mount

useEffect(() => { subscribe(id); return () => unsubscribe() }, [id])

Side effect with cleanup

const ref = useRef(null)

Ref for DOM or persistent value

const memoized = useMemo(() => compute(a, b), [a, b])

Memoize a computed value

Advanced Hooks 6

const [state, dispatch] = useReducer(reducer, initialState)

Complex state (useReducer)

const value = useContext(MyContext)

Cross-tree data sharing (useContext)

useLayoutEffect(() => { measure() }, [deps])

Sync DOM measurement (useLayoutEffect)

useImperativeHandle(ref, () => ({ focus: () => {} }))

Expose child methods (useImperativeHandle)

const id = useId()

Unique id (SSR-safe)

const [isPending, startTransition] = useTransition()

Non-blocking update (React 18)

Component Patterns 6

function App({ name, children }) { return <div>{children}</div> }

Props and children

const Button = forwardRef((props, ref) => <button ref={ref} />)

Forward a ref (forwardRef)

function withAuth(Component) { return (props) => <Component {...props} /> }

Higher-order component (HOC)

function List({ render }) { return items.map(render) }

Render props pattern

const Memo = React.memo(Component)

Memoize to skip re-render

const Lazy = React.lazy(() => import("./Comp"))

Lazy-load a component

Events & Forms 5

<button onClick={(e) => handleClick(e)}>Click</button>

Click event

<input value={val} onChange={e => setVal(e.target.value)} />

Controlled component

<form onSubmit={e => { e.preventDefault(); submit() }}>

Submit without page reload

e.stopPropagation()

Stop event bubbling

e.preventDefault()

Prevent default behavior

State Management 5

setCount(prev => prev + 1)

Update from previous value

setUser(prev => ({ ...prev, name: "new" }))

Immutable object update

const ThemeContext = createContext("light")

Create a context

<ThemeContext.Provider value="dark">

Provide a context value

const value = useContext(ThemeContext)

Consume a context

Performance 5

const MemoComp = React.memo(MyComponent)

Memoize a component

const value = useMemo(() => expensive(a, b), [a, b])

Memoize a computed value

const handler = useCallback(() => {}, [deps])

Memoize a callback

<Suspense fallback={<Loading />}><Lazy /></Suspense>

Lazy load + code splitting

const [deferred] = useDeferredValue(value)

Defer non-critical updates

Common Patterns 6

{isLoading ? <Loading /> : <Content />}

Conditional rendering

{show && <Menu />}

Short-circuit rendering

{items.map(item => <li key={item.id}>{item.name}</li>)}

List rendering needs a key

class ErrorBoundary extends React.Component { static getDerivedStateFromError(e) {} }

Error boundary for children

ReactDOM.createPortal(<Modal />, document.body)

Portal outside the tree

<Comp {...defaultProps} {...props} />

Merge default and passed props

Tips

An empty [] deps array runs the effect once on mount, like componentDidMount.
useMemo/useCallback optimize by avoiding needless recompute and re-render.
React 18 StrictMode double-invokes effects in dev to surface side-effect bugs.
Suspense + React.lazy enables lazy loading and code splitting.
Always give list items a stable key; avoid using array index.

Official References

Each command links to its official documentation below, so you can verify the latest usage and read deeper.

Node.js Docs

Maintained by LaoHand

Publicly updated on Jul 21, 2026, continuously proofread against official docs.

Contact Us

Wrong command or description? Send us corrections, business inquiries or product feedback by email.