React Cheat Sheet

React Architecture

Functional Components

1

EASY

JSX

Syntax pairing JS logic with declarative UI markup.

Props vs State

Props: immutable/external. State: mutable/internal.

Conditional Rendering

UI display based on boolean logic or state.

Composition

Using 'children' to build decoupled component trees.

Core Hooks

2

MEDIUM

useState

Primitive for tracking local reactive state.

useEffect

Handles side effects and system synchronization.

useContext

Consumes data from a Context Provider.

useRef

Persistent reference without triggering re-renders.

Optimization

3

HARD

useMemo

Memoizes expensive computation results.

useCallback

Memoizes function references between renders.

React.memo

Skips re-renders if props are shallowly equal.