React Cheatsheet

Updated September 2026 · Quick reference

React builds UIs from components: functions that return JSX describing the screen.

Keep state minimal, pass data with props, and use effects for syncing with external systems—not for ordinary calculations.

Full lessons: React Tutorials

Components & JSX

Function component

A component is a function returning JSX.

function Hello() {
  return <h1>Hello</h1>;
}

JSX expressions

Wrap JS in curly braces inside JSX.

const name = "Ada";
return <p>Hi, {name}</p>;

className

Use className instead of class for CSS classes.

...

Fragments

Group children without an extra DOM node.

return (
  <>
    <h1>Title</h1>
    <p>Body</p>
  </>
);

Lists & keys

When mapping arrays, give each sibling a stable key.

{items.map((item) => (
  <li key={item.id}>{item.name}</li>
))}

Props & state

Props

Inputs passed from parent to child—treat as read-only.

function Greeting({ name }) {
  return <p>Hi, {name}</p>;
}

useState

Local state hook. Setter replaces (or functional-updates) the value.

const [count, setCount] = useState(0);
setCount((c) => c + 1);

Conditional render

Use && or ternary to show UI optionally.

{ok && <Badge />}
{ok ? <A /> : <B />}

Lifting state

Move shared state up to the closest common parent and pass props down.

Events & forms

Event handlers

Pass a function to onClick and friends—do not call it immediately.

Controlled input

Value comes from state; onChange updates state.

setText(e.target.value)} />

Prevent default

Stop form navigation with preventDefault.

function onSubmit(e) {
  e.preventDefault();
  // save
}

Pass handlers as props

Children call a parent function to lift events upward.

// Child:

Effects & data

useEffect

Synchronize with something outside React. Clean up when needed.

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);

Dependency array

[] runs after mount. Omit carefully—include values you read that can change.

useEffect(() => {
  document.title = title;
}, [title]);

Fetch peek

Load data in an effect or a data library; handle loading and errors.

useEffect(() => {
  let cancelled = false;
  fetch("/api/books")
    .then((r) => r.json())
    .then((data) => { if (!cancelled) setBooks(data); });
  return () => { cancelled = true; };
}, []);

Custom hooks

Extract reusable stateful logic into functions named use....

function useToggle(start = false) {
  const [on, setOn] = useState(start);
  return [on, () => setOn((v) => !v)];
}

Comments

One comment per signed-in account. Comments are saved with this page’s URL.