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>
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
Advertisement
Sri Hayavadhana Info-Tech
Professional Web Designing Services
- Responsive Websites
- E-commerce Solutions
- SEO Friendly Design
- Fast & Secure
- Support & Maintenance
