React Survival Kit

You’re a backend developer who occasionally gets asked React questions. This page assumes you won’t have time to re-read 20 deep-dive docs - it’s the 10-minute version. Follow the links only for what a follow-up question actually needs.

Hooks: Which One?

Need	Hook	One-liner if asked “why”
Local UI state that should trigger a re-render	`useState`	Updates are async, immutable, and batched by React
Side effect after render (API call, subscription, timer)	`useEffect`	Runs after paint; dependency array controls when
Cache an expensive computed value	`useMemo`	Memoizes a value, not a function
Cache a function reference (for `React.memo` children)	`useCallback`	Memoizes a function, not a value
Mutable value that must NOT trigger a re-render (DOM ref, timer ID, previous value)	`useRef`	Updating `.current` never re-renders
Share data across the tree without prop drilling	`useContext`	Re-renders every consumer when the Provider value changes

If asked “difference between useMemo and useCallback”: both take a dependency array; useMemo returns the result of calling a function, useCallback returns the function itself, unevaluated.

The Three Hook Gotchas You Will Get Asked About

Stale closures - an effect/callback captures an old value of a variable because it wasn’t in the dependency array.
```
useEffect(() => {
  setInterval(() => console.log(count), 1000); // always logs the initial count
}, []); // missing [count]
```
Fix: add the dependency, or use useRef to always read the latest value.
Infinite re-render loop - setting state inside an effect that depends on that same state without a guard.
```
useEffect(() => {
  setCount(count + 1); // triggers itself again on every render
}, [count]);
```
React.memo doesn’t stop the re-render it looks like it should - because the parent passes a new object/array/function reference every render, so the shallow prop comparison always sees “changed.”
```
<Child config={{ theme: "dark" }} />  // new object every render, memo does nothing
```
Fix: wrap the object/function in useMemo/useCallback on the parent side.

Full depth: useEffect guide, useMemo guide, useCallback guide, React.memo guide

Virtual DOM / Reconciliation - Say This With Confidence

React keeps a lightweight in-memory copy of the DOM (Virtual DOM). On a state/props change, it builds a new Virtual DOM tree, diffs it against the previous one (reconciliation), and applies only the changed nodes to the real DOM - avoiding expensive full-DOM reflows/repaints.

Keys tell the diffing algorithm which list items moved vs. which are new/removed. Using array index as a key breaks this when items are inserted/removed/reordered.
React Fiber (React 16+) is the engine that makes this incremental and interruptible/prioritizable, instead of one blocking pass.
Common trap question: “Does Virtual DOM make React fast?” - No, that’s a misconception. It doesn’t make rendering inherently faster; it reduces how often you touch the expensive real DOM.

Full depth: Virtual DOM guide, Reconciliation guide

Context API vs Redux

	Context API	Redux
Built in?	Yes	External library
Scale	Small/medium apps, simple global state (theme, auth, locale)	Large apps, complex shared/business state
Re-renders	Every consumer re-renders on Provider value change	Optimized via `useSelector` (selective re-renders)
Middleware/DevTools/time-travel	No	Yes (Redux Toolkit, Redux DevTools)

One-liner: “Context API is for sharing state, not for managing complex state - Redux (or Zustand) is for that.”

Full depth: Context API guide, Redux basics guide

React + Spring Boot Integration (the question you’re most likely to actually get)

Communication: REST APIs via Axios/Fetch. Enable CORS on the Spring Boot side (@CrossOrigin or a global WebMvcConfigurer) whenever frontend and backend run on different ports/origins.
JWT auth flow: login → backend issues JWT → React stores it → Axios request interceptor attaches Authorization: Bearer <token> to every call → Axios response interceptor catches 401 and either logs out or refreshes the token.
Storage trade-off: Local Storage is simple but XSS-vulnerable; HttpOnly Secure Cookies are the production-recommended choice (needs CSRF protection in exchange).
Centralized error handling: an Axios response interceptor for global error/401 handling on the frontend, @RestControllerAdvice for global exception handling on the backend.
Deployment: either a single Spring Boot JAR serving the React build from src/main/resources/static, or (more common in enterprise) React on Nginx/CDN and Spring Boot on Docker/Kubernetes separately.

Full depth: React + Spring Boot Integration guide, JWT Authentication in React guide, Axios Interceptors guide

Routing One-Liners

BrowserRouter (clean URLs, needs server config) vs HashRouter (# in URL, works on static hosting with no server config).
useNavigate to redirect programmatically, useParams to read route params (/user/:id), useSearchParams for query strings (?page=1).
Protected routes: wrap the route element in a component that checks auth state and renders <Navigate to="/login" /> if not authenticated.

Full depth: Routing guide

Performance One-Liners

React.memo skips re-rendering a component when its props are shallow-equal to last time.
Code splitting + React.lazy/Suspense load route/page bundles on demand instead of one giant upfront bundle.
For huge lists, use virtualization (react-window) so only visible rows are actually rendered.
If asked “how would you debug a slow React app”: React DevTools Profiler first, then look for unstable prop references, missing memoization, and unnecessary re-renders - not guesswork.

Full depth: Performance Optimization guide, Code Splitting guide

Component Design One-Liners

Prefer composition over inheritance - build UI by nesting components (<Card><Header/><Body/></Card>), not by extending base classes.
Smart (container: fetches data, holds state) vs Dumb (presentational: renders props only) is still a commonly asked split.
Share logic across components with custom hooks, not copy-pasted useEffect blocks.

Full depth: Component Design guide

If You Get Asked Something Deeper Than This Page

Every topic above links to a full guide under Frontend in the sidebar. This page exists so you don’t have to find the right one under time pressure - skim this first, then jump to exactly one linked doc if a follow-up question needs more than a one-liner.

Key Takeaways

You will most likely be asked about hooks (especially useEffect/useMemo/useCallback gotchas) and React+Spring Boot integration (CORS, JWT, Axios interceptors) - know those two sections cold.
Virtual DOM/reconciliation and Context vs Redux are close seconds - common “explain this concept” questions, not usually deep-dive.
When in doubt, answer with the one-liner and offer to go deeper - interviewers testing a backend-primary candidate on React are usually checking for exposure, not expert-level depth.