80%
React Components, rendering, hooks, state management and performance0/27 questions known
1. What React does
DefinitionReact is a library for building UIs from components — functions that return what the UI should look like for the current data.
FlowFlowState / props change→Component re-renders→New element tree→Reconcile (diff)→Commit minimal DOM changes
Declarative: describe the result, React works out the DOM updates.
One-way data flow: props go down, events go up through callbacks.
Reconciliation: different element type → replace the subtree; same type → update props; lists are matched by key.
2. JSX, components and props
JSX compiles to jsx() / React.createElement calls that return plain objects.
Props are read-only.
Rules: one root (or a Fragment <>), className, htmlFor, camelCase events, {} for expressions.
3. State and rendering
State updates are batched and applied on the next render — the variable doesn't change immediately.
Never mutate state (todos.push(x)): React compares references, so it won't re-render.
Derive values during render instead of storing them in extra state.
Lift state up to the closest common parent when siblings need it.
Common mistakeUsing an array index as key for a list that can be reordered or filtered — input state ends up on the wrong row.
4. useEffect
DefinitionuseEffect synchronises a component with something outside React (network, subscriptions, timers, the DOM).
none: after every render
[]: once after mount (twice in dev Strict Mode, to catch missing cleanups)
[a, b]: after mount and whenever a or b changes
TipYou might not need an effect: derive data during render, handle user actions in event handlers, and use a data library (TanStack Query / SWR) for…
5. Other hooks
useRef: a mutable value that survives renders without re-rendering; DOM refs
useMemo: cache an expensive calculation
useCallback: cache a function identity (for memoised children / effect deps)
useContext: read a context value without prop drilling
Common mistakeRules of hooks: call them at the top level of components or custom hooks — never inside conditions or loops.
6. State management
Local UI state (open, input value): useState / useReducer
Shared, rarely changing (theme, user, locale): Context
Server data (lists, details, caching): TanStack Query / SWR
Complex global client state: Redux Toolkit / Zustand
Context re-renders every consumer when its value changes — split contexts and memoise values.
Redux Toolkit: createSlice (reducers with Immer), configureStore, useSelector picks just what a component needs, RTK Query for…
7. Performance
Measure first with the React DevTools Profiler.
React.memo skips re-rendering a child when its props are shallow-equal (pair with useCallback/useMemo for function/object props).
Code-split routes and heavy widgets with lazy() + <Suspense>.
Virtualise long lists (TanStack Virtual / react-window).
React 19 adds Actions (useActionState, useFormStatus, useOptimistic), the use() hook for promises and context, ref as a normal prop, and document…
ReviseUI = f(state).
Most asked (10)
QWhat is the virtual DOM and how does reconciliation work?The virtual DOM is a lightweight tree of plain JavaScript objects describing what the UI should look like.
QWhy do list items need a key, and why is the array index a bad key?A key gives each list item a stable identity so React can match items between renders.
QWhat is the difference between props and state?Props are inputs passed from a parent.
QControlled vs uncontrolled components?A controlled input gets its value from React state and updates it through onChange.
QWhy does calling setCount(count + 1) three times only add 1? What is batching?State updates are not applied immediately.
QHow does useEffect work: dependencies, cleanup, and why does it run twice in development?useEffect runs code after React has painted, to sync with something outside React (subscriptions, timers, the DOM, network).
QuseMemo vs useCallback vs React.memo?- useMemo(() => value, deps) caches a computed value between renders - useCallback(fn, deps) caches a function (it is useMemo(() => fn…
QWhat is a custom hook? Write one.A custom hook is a function whose name starts with use and that calls other hooks.
QWhat is Context, and what is its performance cost?Context passes a value deep into the tree without threading props through every level.
QWhat causes a component to re-render, and how do you optimise it?A component re-renders when: - its state changes - its parent re-renders (props changing or not, unless it is memoised) - a context it…