Frontend Web Development React & Component Frameworks Syllabus

Why should you use the functional updater form setCount(c => c + 1) instead of setCount(count + 1)?

The functional form receives the latest pending state, so multiple updates in the same event batch compose correctly. setCount(count + 1) uses the value captured at render, causing lost updates when called several times in one event.

Is React state update synchronous or asynchronous, and what is batching?

State updates are asynchronous and batched: React groups multiple setState calls within an event handler into a single re-render for performance. The state variable does not change until the next render.

When updating object or array state, why must you create a new reference?

React uses Object.is reference comparison to detect changes. Mutating the existing object/array keeps the same reference, so React may skip re-rendering. You must produce a new object/array, e.g. setUser({ ...user, name }) or setList([...list, item]).

What does passing a function to useState (lazy initialization) do?

useState(() => expensiveInit()) runs the initializer function only on the first render to compute the initial state, avoiding re-running the expensive computation on every render.

What is the purpose of useEffect?

useEffect lets you run side effects (data fetching, subscriptions, manual DOM changes, timers) after the component renders and commits to the DOM, synchronizing the component with external systems.

Explain how the useEffect dependency array controls when the effect runs.

No array: runs after every render. Empty array []: runs once after mount. Array [a, b]: runs after mount and whenever any listed dependency changes (compared with Object.is).

What is the effect cleanup function and when does it run?

A function returned from the effect callback. React runs it before the effect re-runs (on dependency change) and when the component unmounts, used to clear timers, unsubscribe, or abort requests to prevent leaks.

In terms of the class lifecycle, what does useEffect(fn, []) correspond to, and useEffect(fn) with a cleanup?

useEffect(fn, []) ≈ componentDidMount (+ cleanup ≈ componentWillUnmount). useEffect(fn) running every render with a cleanup ≈ componentDidMount + componentDidUpdate + componentWillUnmount combined.

Why can omitting dependencies from useEffect cause stale closures?

The effect closes over variables from the render in which it was created. If a used value is not in the dependency array, the effect keeps referencing the old (stale) value from that render instead of the current one.

What does useRef return and what are its two main uses?

useRef(initial) returns a mutable object { current: initial } that persists across renders without causing re-renders when changed. Uses: (1) accessing a DOM node via ref={myRef}; (2) storing mutable instance-like values (timers, previous values).

How does useRef differ from useState for storing a value?

Changing ref.current does NOT trigger a re-render and the change is visible immediately (mutable), whereas calling a state setter DOES trigger a re-render and the new value appears only on the next render.

What does useMemo do and when should you use it?

useMemo(() => compute(a, b), [a, b]) memoizes and returns a cached computed value, recomputing only when a dependency changes. Use it to avoid expensive recalculations or to keep a stable reference for object/array props.

What does useCallback do and how does it relate to useMemo?

useCallback(fn, deps) memoizes the function itself, returning the same function reference until a dependency changes. It is equivalent to useMemo(() => fn, deps). Useful to keep stable callback references for memoized children.

Why does a stable callback from useCallback matter for a child wrapped in React.memo?

React.memo skips re-rendering when props are shallowly equal. A new inline function every render is a new reference, breaking memoization. useCallback preserves the reference so the memoized child can actually skip re-rendering.

What does useContext do and what argument does it take?

useContext(MyContext) reads and subscribes to the current value of a Context object provided by the nearest matching <MyContext.Provider> above it in the tree, avoiding prop-drilling.

When a Context Provider's value changes, which components re-render?

All components that consume that context via useContext re-render when the provider's value changes (by reference), regardless of whether they use the changed part. This is why splitting contexts or memoizing the value matters.

What does useReducer return, and what are the arguments to its dispatched reducer?

useReducer(reducer, initialState) returns [state, dispatch]. Calling dispatch(action) invokes reducer(state, action), which returns the new state. Good for complex or interdependent state logic.

When should you prefer useReducer over useState?

When state is complex (multiple sub-values), when the next state depends on previous state through several update types, or when you want to centralize update logic in one testable reducer and pass dispatch down instead of many callbacks.

What are the two rules of hooks?

(1) Only call hooks at the top level, never inside loops, conditions, or nested functions. (2) Only call hooks from React function components or from custom hooks, not regular JS functions.

Why must hooks be called in the same order on every render?

React tracks hook state by call order (an internal index), not by name. Conditionally skipping or reordering hooks misaligns stored state with the wrong hook, corrupting state and causing errors.

What defines a custom hook and what naming convention is required?

A custom hook is a JavaScript function whose name starts with 'use' and that calls one or more built-in hooks to encapsulate and reuse stateful logic between components. The 'use' prefix lets React enforce the rules of hooks.

Do two components using the same custom hook share state?

No. Each call to a custom hook creates its own isolated state and effects. Custom hooks share logic, not state; the state is instantiated fresh per component that uses the hook.

How do you attach an event handler in React, and how does the syntax differ from HTML?

Pass a function to a camelCase event prop, e.g. <button onClick={handleClick}>. Unlike HTML, the name is camelCase (onClick not onclick) and you pass a function reference, not a string of code.

What is a SyntheticEvent in React?

A cross-browser wrapper around the native DOM event that React passes to handlers, providing a consistent API (e.g. e.preventDefault(), e.target) across browsers.

How do you pass an argument to an event handler without calling it immediately?

Wrap it in an arrow function: onClick={() => handleDelete(id)}. Writing onClick={handleDelete(id)} would call it during render instead of on click.

What is a controlled input in React?

A form input whose value is driven by React state via the value (or checked) prop and updated through an onChange handler. React state is the single source of truth for the input's value.

What is an uncontrolled input, and how do you read its value?

An input that keeps its own value in the DOM rather than in React state. You read its value when needed via a ref (e.g. inputRef.current.value), often using defaultValue for the initial value.

Contrast controlled vs uncontrolled inputs on the source of truth and typical access.

Controlled: React state is the source of truth, value set by state, updated via onChange (enables instant validation/formatting). Uncontrolled: the DOM is the source of truth, initialized with defaultValue, read on demand via a ref.

What core problem does React Hook Form solve, and how does it minimize re-renders?

It manages form state, validation, and submission with minimal boilerplate. It primarily uses uncontrolled inputs via register() and refs, so keystrokes don't trigger component re-renders, improving performance versus fully controlled forms.

In React Hook Form, what do register, handleSubmit, and formState.errors do?

register('name') wires an input to the form (returns props incl. ref/onChange). handleSubmit(onValid) validates then calls your submit handler with the values. formState.errors holds validation error messages per field.

What is a common pattern for fetching data on mount with useEffect, including avoiding state updates after unmount?

Call the async fetch inside useEffect(() => {...}, []) with an AbortController or an 'ignore/cancelled' flag; in cleanup, abort or set the flag so the response handler doesn't setState after the component has unmounted.

Why can't the useEffect callback itself be declared async, and what is the workaround?

An async function returns a Promise, but useEffect expects its return value to be a cleanup function (or nothing). Workaround: define an async function inside the effect and call it, e.g. useEffect(() => { (async () => { ... })(); }, []).

In React Router (v6+), what components define the router and a route mapping a path to an element?

Wrap the app in <BrowserRouter>. Inside, use <Routes> containing <Route path="/users" element={<Users/>} /> entries. The first matching Route renders its element.

What component does React Router provide for client-side navigation instead of an <a> tag, and why?

<Link to="/path"> (or <NavLink> for active styling). It updates the URL and renders the matched route without a full page reload, preserving SPA state, whereas a plain <a> triggers a full document reload.

How do you define a nested route in React Router, and how does the parent render its child?

Nest <Route> elements inside a parent <Route>. The parent component renders <Outlet/> where the matched child route's element should appear. Index routes (<Route index .../>) render at the parent's exact path.

How do you declare a URL parameter in a route and read it in the component?

Declare it with a colon: <Route path="/users/:id" .../>. Read it with the useParams hook: const { id } = useParams();

What is the difference between route params and query string parameters, and which hook reads the query string?

Route params are part of the path pattern (/users/:id) and identify a resource. Query params (?sort=asc) are optional key-value pairs after '?'. Read the query string with useSearchParams(), which returns [searchParams, setSearchParams].

How do you navigate programmatically in React Router v6?

Call the useNavigate hook to get a navigate function, then navigate('/path') to go there, navigate('/path', { replace: true }) to replace history, or navigate(-1) to go back one entry.

How do you implement a simple route guard (protected route) in React Router v6?

Create a wrapper that checks auth; if not authenticated, return <Navigate to="/login" replace />, otherwise render <Outlet/> (or children). Wrap protected routes in this guard component.

What does the <Navigate> component do compared to the useNavigate hook?

<Navigate to="..."/> declaratively redirects when it renders (useful in JSX/guards). useNavigate returns an imperative function to call inside handlers/effects. Both change the current location.

What is 'lifting state up' and when do you do it?

Moving shared state to the closest common ancestor of the components that need it, then passing it down via props (and passing setters/callbacks down). You do it when two or more sibling components must stay in sync on the same data.

Describe the standard Context API pattern for sharing state across a tree.

Create a context with createContext(default); wrap the tree in <Context.Provider value={sharedValue}>; consume it in descendants with useContext(Context). Often the value combines state and updater functions, sometimes exposed via a custom hook like useAuth().

Why is it a common pattern to memoize the value passed to a Context Provider?

Passing an inline object/array (value={{ user, setUser }}) creates a new reference every render, forcing all consumers to re-render. Wrapping it in useMemo (with proper deps) gives a stable reference so consumers re-render only when the data actually changes.

What is a common way to combine useReducer with Context to build a lightweight global store?

Put useReducer's state and dispatch into a Context Provider value; components read state via useContext and trigger updates by calling dispatch(action). This centralizes complex state and avoids prop-drilling without an external library.

When passing data upward from child to parent, what mechanism does React use?

React data flow is one-way (parent to child), so a child cannot push data up directly. The parent passes a callback prop down; the child calls that callback (e.g. onChange(value)) to send data back up to the parent.

What is the difference between defaultValue and value on an input in React?

value makes the input controlled (React state owns it; needs onChange to be editable). defaultValue only sets the initial value for an uncontrolled input, after which the DOM manages the value.

Why does React.memo help, and what kind of comparison does it perform?

React.memo wraps a component so it skips re-rendering when its props haven't changed, performing a shallow comparison of props. It helps avoid unnecessary renders of expensive children whose props are stable.

What is the correct way to update one field of an object stored in state?

Spread the existing object and override the field, then set a new object: setForm(prev => ({ ...prev, email: newEmail })). This preserves other fields while creating a new reference so React re-renders.

What is the correct immutable way to add and remove items from an array in state?

Add: setList(prev => [...prev, item]). Remove: setList(prev => prev.filter(x => x.id !== id)). Avoid mutating methods like push/splice on the state array; always produce a new array.