Step-by-step articles on React, part of our Frontend Interviews collection.
Showing 10 articles
Short answer: when state changes, React calls your components to produce a new tree of plain JavaScript objects describing the UI (often called the virtual DOM). It compares this tree with the previous one ( reconciliation ) and applies only the necessary chan...
Short answer: keys tell React which list item is which between renders. With stable keys, React can move, insert and remove items correctly, keeping each item's DOM node and state attached to the right data. {todos.map((todo) => ( <TodoItem key={todo.id} todo=...
Short answer: useEffect runs after React has committed the render to the screen. With no dependency array it runs after every render; with [] only after mount; with [a, b] after mount and whenever a or b changed. The cleanup runs before the next effect and on...
Short answer: a controlled input's value comes from React state and changes through onChange . An uncontrolled input keeps its own value in the DOM; you read it when needed (via a ref or FormData ). Controlled function Search() { const [query, setQuery] = useS...
Short answer: useMemo caches a computed value , useCallback caches a function , and React.memo skips re-rendering a component when its props haven't changed. const visible = useMemo(() => products.filter((p) => p.inStock), [products]); // value const onSelect...
Short answer: a component re-renders when its own state changes, when its parent re-renders, when a context it reads changes, or when a hook it uses triggers an update. 1. Its state changes const [count, setCount] = useState(0); setCount(1); // re-render setCo...
Short answer: props are inputs passed from a parent; a component can't change them. State is data a component owns and updates over time, which triggers a re-render. function Counter({ step }) { // step is a prop const [count, setCount] = useState(0); // count...
Short answer: Server Components render only on the server. They can be async , read databases and files directly, and their code is never sent to the browser. Client Components (marked 'use client' ) handle interactivity with state, effects and event handlers....
Short answer: prop drilling is passing props through several intermediate components that don't use them, just to reach a deeply nested child. Fix it with composition first, then Context , then a state library for complex shared state. The problem <App user={u...
Short answer: useRef returns an object { current } that persists for the component's lifetime. Changing ref.current does not cause a re-render. It's used for DOM access and for mutable values that aren't part of what's displayed. 1. Accessing DOM elements func...
