A React cheat sheet covers function components that return JSX, data flowing down via props, and UI state via useState. Lists need stable keys. useEffect syncs with the outside world. In 2026 you still start here whether you later add Next.js, a bundler, or a design system.
This React cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.
Quick reference
- Component:
function Hello({ name }) { return <p>Hi {name}</p>; }— capital name. - Props: Read-only input. Parent owns the data; child renders it.
- State:
useStatefor values that change on events. Do not mutate arrays in place. - JSX: Looks like HTML.
className,htmlFor, close every tag,{}for expressions. - Lists:
items.map((item) => <Row key={item.id} />)— key is not a prop you use in the child by default. - Events:
onClick={(e) => ...}camelCase.preventDefaulton forms. - Effect:
useEffect(() => { ...; return cleanup }, [deps]). - Children: Compose:
<Card><Title /></Card>instead of boolean soup when you can.
Copy-paste examples
List with state
Keys must be stable ids. Functional updates avoid stale closures on fast clicks.
import { useState } from 'react';
export function Todos({ initial }) {
const [items, setItems] = useState(initial);
const [text, setText] = useState('');
function add(e) {
e.preventDefault();
const title = text.trim();
if (!title) return;
setItems((prev) => [...prev, { id: crypto.randomUUID(), title }]);
setText('');
}
return (
<form onSubmit={add}>
<input value={text} onChange={(e) => setText(e.target.value)} />
<ul>
{items.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
</form>
);
}Common mistakes
- Mutating
state.pushand wondering why the list did not re-render. - Using array index as
keyon a list that inserts at the top. - Fetching in the component body (infinite loop) instead of an effect or a library.
- Prop drilling seven levels instead of lifting state or using context for true globals (theme/auth).
FAQ
- React vs React Native? Same component model. Web React targets the DOM; Native targets native views. This cheat sheet is the web one.
- Do I need Redux in 2026? Not to start. Context, URL state, and a small library (Zustand, TanStack Query) cover most apps.
- Class components? Legacy. Learn functions and hooks. Read classes only to maintain old code.
Related React cheat sheets
Build with this stack
When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.
Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.