React Cheat Sheet

Essential React hooks, components, and props.

Jump To Section
Components Hooks (State) Hooks (Perf) Lists & Props
Pro Tip

Use the Ctrl + F shortcut to quickly find specific commands in this cheat sheet.

Components

Concept / Tag Code Snippet Description
Fragements 
<> <Comp /> <Comp /> </>
 Group items without extra DOM.
Destructure 
const User = ({ name, email }) => { ... }
 Clean prop access.

Hooks (State)

Concept / Tag Code Snippet Description
useState 
const [open, setOpen] = useState(false);
 Simple state.
useReducer 
const [state, dispatch] = useReducer(reducer, init);
 Complex state logic.

Hooks (Perf)

Concept / Tag Code Snippet Description
useMemo 
const val = useMemo(() => heavy(x), [x]);
 Memoize calculations.
useCallback 
const fn = useCallback(() => ..., []);
 Memoize functions.

Lists & Props

Concept / Tag Code Snippet Description
Keys 
items.map(i => <li key={i.id}>{i.name}</li>)
 Required for list diffing.

Explore More Cheat Sheets

HTML Guide
CSS Guide
JavaScript Guide