React Cheat Sheet
React hooks, components, lifecycle methods, and common patterns.
2 PagesIntermediateMay 16, 2026
Function Component
A basic React component using JSX.
jsx
function Greeting({ name }) { return <h1>Hello, {name}!</h1>;}export default Greeting;
useState
Add local state to a function component.
jsx
const [count, setCount] = useState(0);<button onClick={() => setCount(c => c + 1)}> Count: {count}</button>
useEffect
Run side effects after render.
jsx
useEffect(() => { const id = setInterval(() => setTick(t => t + 1), 1000); return () => clearInterval(id); // cleanup}, []); // empty deps = run once on mount
Common Hooks
Built-in hooks you’ll use most often.
- useState- Local component state
- useEffect- Side effects & lifecycle
- useContext- Read context value
- useRef- Mutable value / DOM ref
- useMemo- Memoize a computed value
- useCallback- Memoize a function reference
Rendering Lists
Render arrays with a stable key.
jsx
<ul> {items.map(item => ( <li key={item.id}>{item.label}</li> ))}</ul>
useReducer
Manage complex state with a reducer function.
jsx
function reducer(state, action) { switch (action.type) { case 'inc': return { count: state.count + 1 }; case 'set': return { count: action.value }; default: return state; }}function Counter() { const [state, dispatch] = useReducer(reducer, { count: 0 }); return <button onClick={() => dispatch({ type: 'inc' })}>{state.count}</button>;}
Context API
Share state without prop drilling.
jsx
const ThemeContext = createContext('light');function App() { return ( <ThemeContext.Provider value="dark"> <Toolbar /> </ThemeContext.Provider> );}function Toolbar() { const theme = useContext(ThemeContext); return <div className={theme}>Themed</div>;}
Custom Hooks
Extract reusable stateful logic.
jsx
function useToggle(initial = false) { const [on, setOn] = useState(initial); const toggle = useCallback(() => setOn(o => !o), []); return [on, toggle];}function Panel() { const [open, toggle] = useToggle(); return <button onClick={toggle}>{open ? 'Hide' : 'Show'}</button>;}
Performance: memo, useMemo, useCallback
Avoid unnecessary re-renders and recomputation.
jsx
const Child = memo(function Child({ onClick, items }) { return <ul onClick={onClick}>{items.length}</ul>;});function Parent({ data }) { const sorted = useMemo(() => [...data].sort(), [data]); const handle = useCallback(() => console.log('hi'), []); return <Child items={sorted} onClick={handle} />;}
Controlled Forms & Events
Handling inputs and synthetic events.
- value + onChange- controlled input: React state is the single source of truth
- e.preventDefault()- stop default form submission / link navigation
- e.target.value- read the current input value inside an onChange handler
- htmlFor / className- JSX attribute names replacing HTML for and class
- defaultValue- set initial value for an uncontrolled input
Pro Tip
Always give list items a stable, unique key prop — never the array index if the list can reorder.
Was this cheat sheet helpful?
Explore Topics
#React#ReactCheatSheet#WebDevelopment#Intermediate#FunctionComponent#UseState#UseEffect#CommonHooks#Functions#CheatSheet#SkillVeris
