React Mastery Quiz: Hooks, State & Beyond — How Well Do You Know React? (32)

A A. A CSS framework for building responsive layouts B B. A JavaScript library for building fast, interactive UIs using a component-based architecture and a virtual DOM C C. A full-stack framework that handles both frontend and backend D D. A JavaScript runtime like Node.js

A A. A new programming language that compiles to JavaScript B B. A JavaScript XML syntax extension that lets you write HTML-like code inside JavaScript, which Babel compiles to React.createElement() calls C C. A templating engine similar to Handlebars or EJS D D. A special file format used only by React Native

A A. Controlled components use class syntax; uncontrolled use function syntax B B. Controlled components have their form state managed by React via useState; uncontrolled components store state in the DOM and are accessed via refs C C. Uncontrolled components cannot be used with React Hooks D D. Controlled components are faster; uncontrolled components are used for large forms only

A A. A single state object with a built-in update method B B. An array with two elements: the current state value and a setter function that triggers a re-render when called C C. A Promise that resolves to the new state after update D D. A ref object with a .value property for the current state

A A. To replace the return statement in functional components B B. To perform side effects (data fetching, subscriptions, DOM manipulation, timers) after the component renders C C. To memoize expensive function results between renders D D. To create derived state from props without re-rendering

A A. A hidden iframe that renders components in isolation B B. An in-memory JavaScript representation of the real DOM — React diffs it with the previous version and only updates the actual DOM where changes occurred C C. A server-side copy of the DOM used for SSR only D D. A browser API that React uses to speed up DOM queries

A A. Props are mutable internal data; state is immutable external data B B. Props are read-only data passed from a parent component to a child; state is mutable data managed internally by a component C C. They are the same thing — just different naming conventions D D. State is passed between siblings; props flow from child to parent

A A. A prop used to reference a DOM element, similar to ref B B. A unique identifier that helps React efficiently identify which list items have changed, been added, or removed during reconciliation C C. A security token required for rendering external data D D. An accessibility attribute that labels list items for screen readers

A A. Only for storing references to DOM elements B B. Creating a mutable container (.current) that persists across renders without causing re-renders — used for DOM refs, storing previous values, and holding timers/intervals C C. A way to create reactive variables that auto-update the UI D D. Referencing props from a parent component inside a child

A A. A hook for sharing logic between components using composition B B. A hook that reads from a React Context, solving prop drilling — passing data through many component layers without manually threading props at each level C C. A hook for managing global server state D D. A replacement for Redux in all use cases

A A. Memoizes a component so it never re-renders B B. Caches the result of an expensive calculation between renders, recomputing only when its dependencies change C C. Memoizes callback functions to maintain referential equality between renders D D. Replaces useState for derived values that are computed from other state

A A. There is no difference — they are aliases for the same hook B B. useMemo caches a computed value; useCallback caches a function reference — both recompute/recreate only when dependencies change C C. useCallback is for async functions; useMemo is for synchronous ones D D. useMemo is for class components; useCallback is for function components

A A. A hook that memoizes state inside a component B B. A Higher-Order Component that wraps a component and skips re-rendering if its props have not changed (shallow comparison) C C. A way to memoize context values to prevent unnecessary re-renders D D. A React DevTools feature for inspecting memoized components

A A. A hook for making HTTP requests with a reducer function B B. An alternative to useState for complex state logic — manages state via a (state, action) => newState reducer function, similar to Redux but local to the component C C. A hook that combines multiple useState calls into a single object D D. A performance optimization hook that batches multiple state updates

A A. Hooks do not support lifecycle methods — only class components have lifecycles B B. Mount = useEffect(() => {}, []), Update = useEffect(() => {}, [dep]), Unmount = the cleanup function returned from useEffect C C. React Hooks have their own separate lifecycle unrelated to class components D D. Only componentDidMount and componentWillUnmount have Hook equivalents

A A. Moving state from a child to a global Redux store B B. Moving shared state up to the closest common ancestor component so multiple children can read and update it via props C C. Using useState at the top of the file instead of inside the component D D. Migrating class component state to function component hooks

A A. A class method decorated with @Hook that extends React Component B B. A regular JavaScript function whose name starts with "use" and can call other Hooks — used to extract and reuse stateful logic across components C C. A built-in React Hook that can be customized via configuration options D D. A hook that only works in custom component libraries, not in app code

A A. Hooks can only be used in class components B B. Only call Hooks at the top level (not inside conditions, loops, or nested functions) and only call them from React function components or custom hooks C C. Hooks must always be imported from a separate hooks file D D. You can only use a maximum of 10 hooks per component

A A. The process of merging two separate React apps into one B B. The algorithm React uses to diff the previous and new Virtual DOM trees and determine the minimal set of real DOM updates needed C C. Synchronizing React state with an external database D D. Resolving conflicts between useState and useReducer in the same component

A A. useLayoutEffect only works in class components B B. useLayoutEffect fires synchronously after all DOM mutations but BEFORE the browser paints — useEffect fires asynchronously after the browser paints C C. useEffect runs on the server; useLayoutEffect runs only on the client D D. They are identical — useLayoutEffect is just an alias

A A. A component that delays rendering for performance testing B B. A mechanism that lets components "wait" for something (data, code) before rendering, showing a fallback UI in the meantime C C. A tool for suspending and resuming animations in React D D. An error handling component similar to Error Boundaries

A A. A hook for lazy-initializing state with a factory function B B. A function that enables code-splitting by dynamically importing a component — the component's JavaScript bundle is only loaded when the component is first rendered C C. A way to delay component mounting for animation purposes D D. A method to lazily evaluate expensive prop calculations

A A. Context is best for all global state — it is a full replacement for Redux in every scenario B B. Best for low-frequency global data (theme, auth user, locale); limitation is that all consumers re-render whenever the context value changes, making it inefficient for high-frequency updates C C. Context only works with class components using static contextType D D. Context is only for styling and theming — it cannot hold application data

A A. A try-catch block inside a useEffect hook B B. A class component that catches JavaScript errors in its child component tree and displays a fallback UI instead of crashing the entire app C C. A Suspense boundary that catches data fetching errors D D. A middleware function that catches Redux action errors

A A. Derived state is state stored in a parent component; regular state is stored locally B B. State is the source of truth stored with useState/useReducer; derived state is computed from existing state/props during render — no need to store it separately C C. Derived state requires useMemo; regular state requires useState D D. They are the same thing — derived is just an older term for state

A A. Grouping components into batches for code-splitting B B. Grouping multiple state updates into a single re-render for performance — React 18 introduced Automatic Batching that extends this to async operations, timeouts, and native events C C. A React 18 feature that batches network requests automatically D D. Rendering multiple components in parallel using concurrent mode

A A. A hook for creating CSS transition animations in React B B. A hook that marks a state update as non-urgent — React can interrupt and deprioritize it to keep the UI responsive while expensive updates happen in the background C C. A hook for transitioning between React Router routes D D. A replacement for useEffect for handling side effects during render

A A. Generating unique IDs for database records inside components B B. Generating stable, unique IDs that are consistent between server and client renders — used for accessibility attributes like htmlFor/aria-describedby C C. Creating unique keys for list items to replace the index D D. Generating unique component instance identifiers for debugging

A A. A way to forward props from a parent to a grandchild component automatically B B. A function that allows a parent component to pass a ref through a component to access a DOM element or imperative method inside that component C C. A hook for forwarding context values across component boundaries D D. A method for sharing reducers between sibling components

A A. Imperatively setting state without causing a re-render B B. Customizing the instance value (ref handle) exposed to parent components when using forwardRef — lets you expose only specific methods instead of the full DOM node C C. Directly manipulating the DOM imperatively without refs D D. Bypassing React's declarative rendering for performance-critical sections

A A. Composing multiple third-party libraries together in one component B B. A design pattern where a parent component shares implicit state with its children via Context, allowing flexible and expressive component APIs like <Select><Option /></Select> C C. A pattern for splitting one large component into multiple smaller files D D. Using React.memo on every component in a compound hierarchy

A A. Optimistic updates use a different hook; regular updates use useState B B. Optimistic updates immediately reflect the expected result in the UI before the server confirms — rolling back if the operation fails — making the app feel instantly responsive C C. Optimistic updates skip React re-rendering for maximum performance D D. Optimistic updates are only used with WebSockets for real-time apps