$devvkit resources --cheatsheet react-cheatsheet
React Cheatsheet
[frontend]
React 18/19 hooks, component patterns, state management, and best practices for modern apps.
React is the most popular UI library for building interactive interfaces. This cheatsheet focuses on hooks (the modern way to write React), component composition, data fetching patterns, and performance optimization.
All examples use React 18+ with TypeScript and functional components.
Hooks — State
$
const [state, setState] = useState(initial)Declare a state variable with its setter. Re-renders on update.Example: const [count, setCount] = useState(0)
$
const [val, setVal] = useState(() => expensive())Lazy initialization — pass a function that runs only on first render.Example: const [items, setItems] = useState(() => loadFromStorage())
Hooks — Effects & Refs
$
useEffect(() => { ... }, [deps])Run side effects after render. Return a cleanup function.Example: useEffect(() => {
const sub = api.subscribe(id, callback)
return () => sub.unsubscribe()
}, [id])
$
useEffect(() => { ... }, [])Empty deps — runs once after initial mount (like componentDidMount).Example: useEffect(() => { fetchData() }, [])
$
const ref = useRef(initial)Persist a mutable value across renders. Changing it does not re-render.Example: const inputRef = useRef<HTMLInputElement>(null)
Hooks — Performance
$
const memoized = useMemo(() => compute(a, b), [a, b])Memoize expensive computations. Recalculates only when deps change.Example: const sorted = useMemo(() => items.sort(sortFn), [items])
$
const fn = useCallback(() => { ... }, [deps])Memoize a callback so it does not change unless deps change.Example: const handleClick = useCallback(() => setCount(c => c + 1), [])
$
React.memo(Component)Prevent re-render when props are shallowly equal.Example: const ExpensiveList = React.memo(({ items }) => <ul>{items.map(...)}</ul>)
Hooks — Context & Reducers
$
const ctx = createContext(default)Create a context for passing data through the component tree without prop drilling.Example: const ThemeContext = createContext("light")
$
const val = useContext(MyContext)Consume the nearest context value above in the tree.Example: const theme = useContext(ThemeContext)
$
const [state, dispatch] = useReducer(reducer, init)For complex state logic. Dispatch actions to a reducer function.Example: const [state, dispatch] = useReducer(todoReducer, [])
Component Patterns
$
<Child onClick={handleClick}>Pass data down and events up. Never mutate props.Example: <Button onClick={() => setOpen(!open)}>Toggle</Button>
$
{children}Compose components using the children prop for flexible layouts.Example: function Card({ children }) { return <div className="card">{children}</div> }
$
const ctx = createContext<Type | null>(null)Define a strongly typed context with TypeScript.Example: const AuthCtx = createContext<{ user: User; logout: () => void } | null>(null)
Forms & Events
$
<input value={val} onChange={e => setVal(e.target.value)} />Controlled component — React controls the input value.Example: <input value={query} onChange={e => setQuery(e.target.value)} />
$
<form onSubmit={handleSubmit}>Handle form submission. Prevent default to avoid page reload.Example: <form onSubmit={e => { e.preventDefault(); submit(data) }}>
React Cheatsheet
React 18/19 hooks, component patterns, state management, and best practices for modern apps.
React is the most popular UI library for building interactive interfaces. This cheatsheet focuses on hooks (the modern way to write React), component composition, data fetching patterns, and performance optimization.
All examples use React 18+ with TypeScript and functional components.
Hooks — State
const [state, setState] = useState(initial) — Declare a state variable with its setter. Re-renders on update.Example: const [count, setCount] = useState(0)
const [val, setVal] = useState(() => expensive()) — Lazy initialization — pass a function that runs only on first render.Example: const [items, setItems] = useState(() => loadFromStorage())
Hooks — Effects & Refs
useEffect(() => { ... }, [deps]) — Run side effects after render. Return a cleanup function.Example: useEffect(() => {
const sub = api.subscribe(id, callback)
return () => sub.unsubscribe()
}, [id])
useEffect(() => { ... }, []) — Empty deps — runs once after initial mount (like componentDidMount).Example: useEffect(() => { fetchData() }, [])
const ref = useRef(initial) — Persist a mutable value across renders. Changing it does not re-render.Example: const inputRef = useRef<HTMLInputElement>(null)
Hooks — Performance
const memoized = useMemo(() => compute(a, b), [a, b]) — Memoize expensive computations. Recalculates only when deps change.Example: const sorted = useMemo(() => items.sort(sortFn), [items])
const fn = useCallback(() => { ... }, [deps]) — Memoize a callback so it does not change unless deps change.Example: const handleClick = useCallback(() => setCount(c => c + 1), [])
React.memo(Component) — Prevent re-render when props are shallowly equal.Example: const ExpensiveList = React.memo(({ items }) => <ul>{items.map(...)}</ul>)
Hooks — Context & Reducers
const ctx = createContext(default) — Create a context for passing data through the component tree without prop drilling.Example: const ThemeContext = createContext("light")
const val = useContext(MyContext) — Consume the nearest context value above in the tree.Example: const theme = useContext(ThemeContext)
const [state, dispatch] = useReducer(reducer, init) — For complex state logic. Dispatch actions to a reducer function.Example: const [state, dispatch] = useReducer(todoReducer, [])
Component Patterns
<Child onClick={handleClick}> — Pass data down and events up. Never mutate props.Example: <Button onClick={() => setOpen(!open)}>Toggle</Button>
{children} — Compose components using the children prop for flexible layouts.Example: function Card({ children }) { return <div className="card">{children}</div> }
const ctx = createContext<Type | null>(null) — Define a strongly typed context with TypeScript.Example: const AuthCtx = createContext<{ user: User; logout: () => void } | null>(null)
Forms & Events
<input value={val} onChange={e => setVal(e.target.value)} /> — Controlled component — React controls the input value.Example: <input value={query} onChange={e => setQuery(e.target.value)} />
<form onSubmit={handleSubmit}> — Handle form submission. Prevent default to avoid page reload.Example: <form onSubmit={e => { e.preventDefault(); submit(data) }}>