Cheat Sheet

🧑‍🏫 Sabse pehle — simple mein samjho#

Ye page ek jhatpat revision hai — jaise exam se pehle woh ek chit jismein saara important cheez likha ho. Saare hooks, JSX ke rules, aur common patterns ek hi jagah, taaki interview se pehle 5 minute mein sab dohra sako. IRCTC pe tatkal book karne se pehle jaise aap sab detail ek baar check kar lete ho, waise hi yahan neeche scroll kar ke React ka poora "quick recall" mil jaata. Ratne ki zaroorat nahi — bas ek nazar maar lo aur jo bhool gaye ho woh yaad aa jaayega.

// Quick recall — sabse zaroori hooks
const [value, setValue] = useState(0);     // local state
useEffect(() => { /* side effect */ }, []); // mount pe ek baar
const memo = useMemo(() => heavy(a), [a]);  // mehnga calc cache
const ref = useRef(null);                    // DOM ya value hold karo

Yaad rakho: interview se 5 minute pehle isse ek baar upar-se-neeche dohra lo — sab taaza ho jaayega.

Built-in hooks#

JSX rules#

• Return a single root; use a Fragment <>...</> for siblings.
• Attributes are camelCase: className, htmlFor, onClick, tabIndex.
• Expressions in {}; false/null/undefined render nothing (but 0 renders 0).
• Every list item needs a stable key.
• Close every tag, including self-closing: <img />, <br />.
• style takes an object: style={{ color: "red", fontSize: 12 }}.

Controlled input snippet#

const [value, setValue] = useState("");
<input value={value} onChange={(e) => setValue(e.target.value)} />;

// checkbox
<input type="checkbox" checked={on} onChange={(e) => setOn(e.target.checked)} />;

Effect deps rules#

🟢 Include every reactive value used inside the effect (props, state, functions). Missing deps → stale closures. Wrap helper functions in useCallback or define them inside the effect. ⚠️ Effects run twice in dev StrictMode (mount→unmount→mount) to surface missing cleanup — this is intentional.

Lifecycle mapping (class → hooks)#

Render flow#

flowchart LR
  A["State/props change"] --> B["Render (build new tree)"]
  B --> C["Reconcile / diff vs previous"]
  C --> D["Commit DOM changes"]
  D --> E["useLayoutEffect (sync)"]
  E --> F["Browser paint"]
  F --> G["useEffect (async)"]

Performance checklist#

• ✅ Stable keys (ids, not index).
• ✅ Derive during render; avoid effects for computed data.
• ✅ Functional updates setX(prev => ...) to dodge stale closures.
• ✅ React.memo + useCallback/useMemo only where profiled.
• ✅ Split large contexts; memoize provider value.
• ✅ Code-split with React.lazy + <Suspense>.
• ✅ Virtualize long lists (react-window/virtual).
• ✅ Use useTransition/useDeferredValue for expensive updates.
• ✅ Keep client components at the leaves (RSC) to shrink JS.

Common patterns#

// Lazy + Suspense
const Chart = React.lazy(() => import("./Chart"));
<Suspense fallback={<Spinner />}><Chart /></Suspense>

// Ref to DOM node
const inputRef = useRef(null);
<input ref={inputRef} />; // inputRef.current.focus()

// Conditional render
{isLoading ? <Spinner /> : <List items={items} />}
{items.length > 0 && <List items={items} />}

// Custom hook
function usePrevious(value) {
  const ref = useRef();
  useEffect(() => { ref.current = value; }, [value]);
  return ref.current;
}

Interview Q&A#

Q1. useEffect vs useLayoutEffect? Both run after render; useEffect fires asynchronously after paint, useLayoutEffect fires synchronously before paint. Use useLayoutEffect to measure/mutate the DOM before the user sees it, else prefer useEffect.

Q2. Why does 0 show up in the UI but false doesn't? React renders numbers, and 0 is a number; false/null/undefined render nothing. So {count && <X/>} prints 0 — guard with {count > 0 && <X/>}.

Q3. What belongs in the dependency array? Every reactive value referenced inside the effect — props, state, and functions/objects derived from them. Omitting them causes stale reads; the exhaustive-deps lint rule enforces this.

Q4. Name a few React 19 hooks. use (read a promise/context in render, suspends), useOptimistic (optimistic UI), useActionState and useFormStatus (form action state/pending). React 19 also auto-memoizes via the Compiler.

Q5. When do you reach for useReducer over useState? When state transitions are complex, interrelated, or the next state depends on the previous in non-trivial ways — a reducer centralizes the logic and makes updates testable and predictable.