⚛️
React & React Native
Re-render rules, hooks, memoization, and RN architecture.
What triggers a re-render
- state change (setState/useState setter) — even to an equal primitive value queues a render
- parent re-renders → children re-render by default (regardless of props)
- context value change → all consumers re-render
- Prevent: React.memo (props shallow-equal), useMemo/useCallback for stable refs, lift state down
useMemo vs useCallback
| useMemo(fn, deps) | Memoizes the VALUE fn returns |
|---|---|
| useCallback(fn, deps) | Memoizes the FUNCTION itself (= useMemo(() => fn, deps)) |
| When | Only when passing to memoized children or for genuinely expensive compute |
Hooks rules
- Call hooks at the top level only — never in conditions, loops, or nested functions.
- Call from React functions only (components / custom hooks).
- useEffect deps: include every value used inside; cleanup return runs before next effect & on unmount.
Keys & reconciliation
- Keys let React match list items across renders to reuse DOM nodes.
- Use a stable unique id — NOT the array index when the list can reorder/insert.
RN architecture
| Old (bridge) | JS ↔ native via async JSON bridge — serialization bottleneck |
|---|---|
| New (JSI/Fabric) | Direct synchronous JS↔native calls, new renderer (Fabric), TurboModules |
| Threads | JS thread, native/UI thread, shadow thread (layout via Yoga) |
SDE-2 Launchpad · React & React Native cheat sheet