React Cheatsheet - Hooks & Components
All essential React commands organized by use case, with 39+ entries you can copy and run directly. Find the right command fast when you need it.
Back to LanguagesCore 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
Commands are compiled from the official docs below. Click to verify the latest usage.
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.
Contact Us