Refs are an escape hatch for imperative cases, and `forwardRef` lets a parent pass a ref through a component boundary intentionally.
- Use refs sparingly
- Prefer declarative state for visible UI
- forwardRef is for deliberate imperative access
Rendering means React calls your component to produce the next UI description, and re-renders happen when inputs that affect output change.
- State, props, and context can trigger re-renders
- Rendering is not the same as DOM mutation
- Parent re-renders can cause child re-renders too
Single-page applications need client-side routing so different URL paths map to different UI states without full page reloads.
- React Router is the common library
- Routes, Route, Link, NavLink, and useNavigate are core concepts
- Protected routes add auth-aware navigation guards
Some class lifecycle methods exist for optimization, derived state, or pre-commit DOM reads, and hooks do not map one-to-one with every lifecycle scenario.
- shouldComponentUpdate controls update skipping
- getDerivedStateFromProps is niche and often misused
- getSnapshotBeforeUpdate captures DOM info before commit
React can render on the client, the server, or ahead of time, and hydration connects server-rendered HTML with interactive client behavior.
- CSR renders mostly in the browser
- SSR sends initial HTML from the server
- Hydration mismatch happens when client and server output differ
React state stores data that changes over time and affects rendering, but not everything in a component needs to become state.
- Use state for data that drives UI
- Keep state local when possible
- Do not store what can be derived cheaply
State management choices in React depend on scale, coordination needs, debugging requirements, and how widely state must be shared.
- Local state is often enough
- Flux-inspired tools centralize updates
- A single source of truth reduces contradictory copies
State updates are asynchronous in effect, batched for efficiency, and should be performed immutably.
- Do not mutate state directly
- Batching reduces extra renders
- Lift state up when multiple siblings depend on the same source
React supports several styling approaches, and interviews often care more about trade-offs than a single correct answer.
- Inline styles are simple but limited
- CSS modules scope styles locally
- Dynamic styling often comes down to class management
React testing usually focuses on component behavior, user-observable output, and managing async flows cleanly.
- Jest is common for running tests and assertions
- React Testing Library emphasizes user-facing behavior
- Async UI needs waiting and cleanup patterns
TypeScript helps React codebases by making props, events, state, refs, and reusable abstractions safer and easier to navigate.
- Type props and state explicitly where helpful
- Events and refs have useful built-in types
- Generic components support reusable typed abstractions
useContext shares values across a tree, while useReducer is useful when state transitions are more structured than simple setters.
- Context helps avoid prop drilling
- Reducers centralize transition logic
- useReducer is useful for complex state transitions