RCT

React Cheatsheet

Core React syntax - hooks, JSX patterns, and the component structures used in nearly every app.

Hooks

const [x, setX] = useState(0)

Component state

useEffect(() => {}, [dep])

Side effects, re-runs when dep changes

useEffect(() => {}, [])

Runs once on mount

const ref = useRef(null)

Mutable ref that persists across renders

const val = useMemo(() => x, [dep])

Memoize an expensive calculation

const fn = useCallback(() => {}, [dep])

Memoize a function reference

JSX patterns

{condition && <p>Text</p>}

Conditional rendering

{condition ? <A /> : <B />}

Conditional with else branch

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

Render a list (key is required)

<>...</>

Fragment - group elements without a wrapper

Props & components

function Comp({ name }) {}

Functional component with destructured props

export default function

Default export for a component

children

Special prop for nested content

<Comp {...props} />

Spread props onto a component