Frontend Web Development React & Component Frameworks Flashcards

24 sample cards from the React & Component Frameworks deck

Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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 () => { ... })(); }, []).

8. 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.

9. 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.

10. 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.

11. 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();

12. 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].

13. 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.

14. 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.

15. 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.

16. 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.

17. 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().

18. 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.

19. 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.

20. 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.

21. 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.

22. 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.

23. 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.

24. 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.

What this deck covers

React & Component Frameworks flashcards FAQ