React interviews check whether you know why keys exist, when a component re-renders, and how data flows (props down, events up). Be ready to explain hooks rules, useEffect cleanup, and that the virtual DOM is a description React diffs — not a performance magic wand for bad lists.
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
- Virtual DOM: A tree of elements in memory. React diffs it and updates the real DOM (or native views).
- Re-render: State/props/context change. Children re-render by default unless memoized.
- Keys: Identity across renders for lists. Stable ids, not index if the list reorders.
- State vs props: State is owned. Props are passed. Lifting state means moving ownership up.
- Controlled: Input
value+onChangefrom React state. Uncontrolled uses refs. - Effects: Synchronize. Cleanup. Do not use them as lifecycle soup for derived data.
- Memo:
React.memo,useMemo,useCallback— measure first. - Batching: React 18 batches state updates in events and timeouts. One paint for several
setState.
Copy-paste examples
Lifted state sketch
The parent owns query so sibling results can filter. Interviewers look for this instinctively.
function Search({ query, onChange, results }) {
return (
<>
<input value={query} onChange={(e) => onChange(e.target.value)} />
<ul>
{results.map((r) => (
<li key={r.id}>{r.title}</li>
))}
</ul>
</>
);
}Common mistakes
- Saying “virtual DOM is faster than DOM” as a slogan with no mention of diffing or keys.
- Cannot explain a stale closure in
useEffect. - Putting all app data in one Context and calling that “Redux but simple.”
- No opinion on controlled vs uncontrolled inputs.
FAQ
- Why not index as key? If the list inserts/reorders, React reuses the wrong component state (inputs, animations). Indexes are OK for static lists.
- What triggers a re-render? The component’s state changed, its parent re-rendered and passed (possibly new) props, or a context it reads updated.
- useMemo vs useEffect?
useMemocomputes a value during render.useEffectruns after and is for side effects. Do notsetStatein effect just to format a string.
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.