Top 30 React & Next.js Concepts Quiz

30 questions. Pick an answer, or open “Show the answer” to read it.

Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.

1. Question 1 of 30

   What is the fundamental nature of a React Component?

   • aA custom, reusable HTML tag that simplifies web page structure.
   • bA class definition used to manage application-wide data and state.
   • cA separate file that holds all the styling rules for a specific UI element.
   • dA JavaScript function that returns a description of UI using JSX.
   Show the answer

   Answer: d · A JavaScript function that returns a description of UI using JSX.

   The card explicitly states, "A React component is a JavaScript function that returns a piece of UI" and that it returns "JSX" to describe the UI. While components are analogous to custom HTML tags, their core implementation is a JavaScript function.

   Read the full bite: React Components: Your UI Building Blocks

2. Question 2 of 30

   What is the fundamental nature of JSX in a React application?

   • aIt allows developers to write raw HTML directly within JavaScript files for browser interpretation.
   • bIt is a new, standalone programming language for defining user interfaces.
   • cIt is a specialized string format that React parses directly into DOM elements.
   • dIt is a syntax extension that a build tool converts into standard JavaScript function calls.
   Show the answer

   Answer: d · It is a syntax extension that a build tool converts into standard JavaScript function calls.

   The card explains that JSX is a "syntax extension" that "gets compiled into plain JavaScript objects" by a "compiler (like Babel)" into "React.createElement() function calls." Option C is incorrect because the card explicitly states JSX is "not a string, nor is it HTML."

   Read the full bite: JSX: Putting HTML Inside Your JavaScript Components

3. Question 3 of 30

   Which statement accurately describes a core principle of how React components should handle props?

   • aA child component can directly modify the props it receives to update its UI.
   • bProps facilitate a one-way data flow, allowing data to be passed from parent to child components.
   • cOnly primitive data types like strings and numbers can be passed as props to a component.
   • dProps are primarily used for managing a component's internal state that changes over time.
   Show the answer

   Answer: b · Props facilitate a one-way data flow, allowing data to be passed from parent to child components.

   The card states that props establish a 'clear, one-way data flow from parent components to child components.' This ensures predictability and reusability. Option A is incorrect because a component should never modify the props it receives; that's what state is for.

   Read the full bite: React Props: Arguments for Your Components

4. Question 4 of 30

   What is the main advantage of using a React Fragment (e.g., <></>) over a <div> when a component needs to return multiple elements?

   • aFragments ensure that the grouped elements are rendered as a single, valid HTML element in the DOM.
   • bFragments automatically attach event listeners to all child elements, simplifying interaction handling.
   • cFragments allow applying unique CSS classes to each child element more easily.
   • dFragments prevent the addition of an unnecessary wrapper DOM node, maintaining cleaner HTML structure.
   Show the answer

   Answer: d · Fragments prevent the addition of an unnecessary wrapper DOM node, maintaining cleaner HTML structure.

   React Fragments are designed to group multiple elements for React's internal processing without adding an extra DOM node to the final HTML, which is essential for valid HTML structures and avoiding unwanted styling issues. Fragments themselves do not add a DOM node, so they cannot have CSS classes or event listeners applied to them directly.

   Read the full bite: React Fragments: Group Elements Without a Wrapper

5. Question 5 of 30

   What is the immediate effect when a useState setter function, like setCount(count + 1), is invoked?

   • aThe count variable in the current component scope updates immediately.
   • bThe component's props are updated, triggering a re-render.
   • cReact schedules a re-render of the component with the new state value.
   • dThe component synchronously re-executes its function body.
   Show the answer

   Answer: c · React schedules a re-render of the component with the new state value.

   Calling a useState setter function tells React to schedule a re-render with the new state value, as stated by 'React schedules a re-render.' The 'count' variable in the current render's scope does not update immediately; this is a common 'footgun' where the new value is only available on the next render.

   Read the full bite: useState: Giving Components Memory

6. Question 6 of 30

   What is the primary issue with using `onClick={myFunction()}` instead of `onClick={myFunction}` in a React component?

   • aIt prevents React from optimizing event listener attachment, leading to performance degradation.
   • bReact's event system cannot correctly pass the event object to `myFunction` when called this way.
   • cIt executes `myFunction` immediately during the component's render phase, not when the user clicks.
   • dIt causes a syntax error in JSX, preventing the component from rendering.
   Show the answer

   Answer: c · It executes `myFunction` immediately during the component's render phase, not when the user clicks.

   The card explicitly states that `onClick={handleClick()}` is incorrect because "The parentheses () execute the function immediately during the component's render phase." This means the function runs when the component is drawn, not when the user interacts with it. Option D is incorrect because it's a logical error, not a syntax error.

   Read the full bite: React Events: Pass, Don't Call

7. Question 7 of 30

   When using the logical AND operator (condition && <Component />) for conditional rendering in React, what is a crucial behavior to be aware of?

   • aIt can cause the component to re-render unnecessarily even when the condition is false.
   • bIt prevents the component from receiving props dynamically based on the condition.
   • cIt only works correctly if 'condition' is a boolean value.
   • dIf 'condition' evaluates to 0, the number 0 might be displayed in the UI.
   Show the answer

   Answer: d · If 'condition' evaluates to 0, the number 0 might be displayed in the UI.

   The card explicitly mentions this as a 'footgun': if 'condition' is the number 0, the expression '0 && <Component />' evaluates to 0, which React will render. Option C is incorrect because JavaScript's logical AND operator works with any truthy or falsy value, not just strict booleans.

   Read the full bite: Conditional Rendering: Show UI Based on State

8. Question 8 of 30

   When rendering a dynamic list, what problem does the key prop solve if items are later reordered or filtered?

   • aIt forces React to re-render every list item whenever the parent updates
   • bIt provides a stable identifier so React can distinguish individual elements as the collection changes
   • cIt passes the item's unique ID to the child component as a readable prop
   • dIt prevents React console warnings from appearing in development mode
   Show the answer

   Answer: b · It provides a stable identifier so React can distinguish individual elements as the collection changes

   The key acts as a stable name tag so React can tell one output from another when items shift, disappear, or join the line. Preventing console warnings is only a side effect of adding keys, not their core purpose.

   Read the full bite: Lists and Keys in React

9. Question 9 of 30

   Which of the following best describes the primary role of React's useEffect hook?

   • aTo synchronize the component with external systems like APIs or browser events.
   • bTo prevent unnecessary component re-renders and optimize performance.
   • cTo directly handle user interactions such as button clicks or form submissions.
   • dTo transform data received from props or state into a displayable format.
   Show the answer

   Answer: a · To synchronize the component with external systems like APIs or browser events.

   The primary role of useEffect is to synchronize a component with systems outside React's control, such as fetching data from an API or subscribing to browser events. It is explicitly stated not to be used for data transformation or handling user events, which are managed differently.

   Read the full bite: useEffect: Syncing React with the Outside World

10. Question 10 of 30

    When decomposing a UI into React components, what is the most crucial principle to follow for effective design?

    • aStructuring components to directly mirror the backend API's data model.
    • bEnsuring each component manages its own distinct piece of application state.
    • cGrouping elements that share similar styling or visual characteristics.
    • dAdhering to the single responsibility principle, where each component does one thing.
    Show the answer

    Answer: d · Adhering to the single responsibility principle, where each component does one thing.

    The card emphasizes that "a good guideline is the single responsibility principle: a component should ideally do only one thing" to avoid "god components." While other options might be considerations, they are not the primary principle for decomposition itself.

    Read the full bite: Thinking in React: Decomposing UIs into Components

11. Question 11 of 30

    In a React component, for which scenario would using a ref be the most appropriate choice over state?

    • aHolding an interval ID returned by setInterval that needs to be cleared later.
    • bStoring a user's input that directly updates a displayed text field.
    • cStoring a list of items that are rendered dynamically on the screen.
    • dManaging a boolean flag that toggles the visibility of an element.
    Show the answer

    Answer: a · Holding an interval ID returned by setInterval that needs to be cleared later.

    Refs are ideal for storing mutable values that persist across renders without triggering UI updates, such as an interval ID that is never displayed. Options A, C, and D all involve data that directly affects the UI, requiring state to ensure re-renders when the values change.

    Read the full bite: React Refs: Memory Without Re-renders

12. Question 12 of 30

    When creating a WelcomeDialog component that uses a generic Dialog component to display a fixed title and message, which approach best exemplifies React's "favor composition" principle?

    • aA Higher-Order Component (HOC) wraps Dialog to inject the fixed title and message props for WelcomeDialog.
    • bWelcomeDialog renders the Dialog component internally, passing it specific title and message props.
    • cWelcomeDialog extends the Dialog class component and overrides its default title and message properties.
    • dWelcomeDialog uses React's Context API to provide the fixed title and message to the Dialog component.
    Show the answer

    Answer: b · WelcomeDialog renders the Dialog component internally, passing it specific title and message props.

    The card states that for specialization, a more specific component simply renders a more generic one and configures it with props, as exemplified by WelcomeDialog rendering Dialog. Option C uses class inheritance, which the card explicitly advises against for UI component hierarchies.

    Read the full bite: React's Rule: Favor Composition Over Inheritance

13. Question 13 of 30

    When is it most appropriate to extract logic into a custom React hook?

    • aWhen multiple components require the same stateful behavior or side effects.
    • bTo define a new UI element that combines both presentation and data fetching.
    • cTo encapsulate pure, non-stateful utility functions for better organization.
    • dWhen a single component's rendering logic becomes overly complex.
    Show the answer

    Answer: a · When multiple components require the same stateful behavior or side effects.

    Custom hooks are specifically designed to package and reuse stateful logic (like useState and useEffect) across multiple components, preventing duplication. Option D describes general component refactoring, not the specific purpose of custom hooks. Option C is explicitly stated as a scenario where custom hooks should not be used, as a standard JavaScript function is more appropriate for pure calculations.

    Read the full bite: Custom Hooks: Package Component Logic for Reuse

14. Question 14 of 30

    Which scenario best indicates that useReducer would be a more suitable choice than useState for managing component state?

    • aThe component's state consists of a single boolean toggle.
    • bThe state updates must be immediately reflected in the DOM without any batching.
    • cThe state logic involves multiple interdependent transitions where the next state relies on the previous state.
    • dYou need to pass state values down to deeply nested child components.
    Show the answer

    Answer: c · The state logic involves multiple interdependent transitions where the next state relies on the previous state.

    The card states useReducer is ideal "when state logic gets complicated or when the next state depends on the previous one," and for "multiple state transitions that depend on each other." For simple, independent state like a boolean toggle (Option A), useState is preferred.

    Read the full bite: The useReducer Hook: Predictable State Updates

15. Question 15 of 30

    What is the primary reason to use useCallback for a function in React?

    • aTo ensure the function's execution is deferred until all component state updates are finalized.
    • bTo automatically memoize the return value of the function, avoiding re-computation of expensive results.
    • cTo prevent the function from being re-created in memory on every component re-render, thus stabilizing its reference.
    • dTo enable the function to access component state and props without needing to be passed them explicitly.
    Show the answer

    Answer: c · To prevent the function from being re-created in memory on every component re-render, thus stabilizing its reference.

    useCallback's main purpose is to provide a stable reference to a function across re-renders, preventing it from being re-created each time. This is crucial for optimizing child components wrapped in React.memo or when a function is a dependency of a hook like useEffect. Option B describes the purpose of useMemo, which memoizes a value, not a function instance.

    Read the full bite: React's useCallback: Cache Functions, Not Just Values

16. Question 16 of 30

    What is the primary mechanism useMemo employs to optimize React component performance?

    • aIt automatically identifies and optimizes all computationally intensive functions within a component.
    • bIt caches the result of an expensive calculation and reuses it if its dependencies remain unchanged.
    • cIt ensures that a function runs only once throughout the component's entire lifecycle.
    • dIt prevents the component from re-rendering when its props or state change.
    Show the answer

    Answer: b · It caches the result of an expensive calculation and reuses it if its dependencies remain unchanged.

    The card states useMemo caches a function's return value and reuses it if its dependencies haven't changed, preventing expensive recalculations. It does not prevent the component itself from re-rendering, which is a common misconception.

    Read the full bite: useMemo: Cache Expensive Calculations in React

17. Question 17 of 30

    When a useEffect with an empty dependency array sets up a setInterval that needs to log the latest component state, what is the primary benefit of using useEffectEvent?

    • aIt allows the setInterval to run only once, preventing unnecessary re-creations on state changes.
    • bIt ensures the setInterval callback always receives the initial state captured at mount time.
    • cIt automatically adds the setInterval callback to the useEffect's dependency array, resolving linter warnings.
    • dIt enables the setInterval's callback to access the most current state without forcing the useEffect to re-execute.
    Show the answer

    Answer: d · It enables the setInterval's callback to access the most current state without forcing the useEffect to re-execute.

    useEffectEvent provides a stable function that, when called, always accesses the latest props and state from the component's current render, even if the useEffect it's called from has an empty dependency array and thus doesn't re-run. This directly solves the stale closure problem. Option B describes the stale closure problem itself, not the benefit of the solution. Option A describes the behavior of an empty dependency array, not the specific benefit of useEffectEvent. Option C is incorrect as useEffectEvent is used to avoid adding functions to the dependency array.

    Read the full bite: React's Stale Closure Problem in Hooks

18. Question 18 of 30

    When is useLayoutEffect the most appropriate choice over useEffect?

    • aTo perform data fetching operations immediately after a component renders.
    • bTo optimize performance for non-visual updates by ensuring they run synchronously.
    • cTo execute code that must run after the browser has finished painting the screen.
    • dTo measure a DOM element's dimensions and update its position before the user sees any intermediate layout.
    Show the answer

    Answer: d · To measure a DOM element's dimensions and update its position before the user sees any intermediate layout.

    useLayoutEffect is specifically designed for scenarios where you need to read DOM layout and make synchronous updates to prevent visual flickers before the browser paints. Option D directly describes this primary use case. Option C describes useEffect, which runs asynchronously after the browser has painted.

    Read the full bite: useLayoutEffect: Synchronous Effects Before Browser Paint

19. Question 19 of 30

    Which scenario best illustrates the primary purpose of useImperativeHandle?

    • aA child component needs to receive and process all props passed down from its parent in a declarative manner.
    • bA parent component needs to directly access and modify the child's internal state variables.
    • cA parent component needs to call a specific method on a child, like focus() or reset(), without exposing the child's entire DOM node.
    • dA child component needs to trigger a re-render of its parent when its internal data changes.
    Show the answer

    Answer: c · A parent component needs to call a specific method on a child, like focus() or reset(), without exposing the child's entire DOM node.

    Option C is correct because useImperativeHandle allows a child to expose a limited, intentional API (like specific methods) to a parent via a ref, preventing the parent from accessing the child's full internal DOM or state. Option B describes an anti-pattern that useImperativeHandle is designed to prevent, as it breaks encapsulation and top-down data flow.

    Read the full bite: useImperativeHandle: Expose a Custom Ref API

20. Question 20 of 30

    Which scenario best illustrates a situation where a React controlled component is the most appropriate choice?

    • aBuilding a basic form where input values are only read when the user clicks a submit button.
    • bCreating a search bar that provides real-time suggestions as the user types.
    • cHandling a file upload input where the file object is accessed only after selection.
    • dIntegrating a legacy HTML form element that manages its own state internally.
    Show the answer

    Answer: b · Creating a search bar that provides real-time suggestions as the user types.

    A search bar with live suggestions requires the input's value to be constantly monitored and updated in React state to trigger suggestion fetching and rendering, which is a key characteristic of controlled components. A basic form only needing values on submission is a prime use case for uncontrolled components, as React doesn't need to manage the input's state continuously.

    Read the full bite: React's Controlled vs. Uncontrolled Components

21. Question 21 of 30

    What is the primary benefit of using the Compound Component pattern in React?

    • aIt allows child components to manage their own independent state without parent interference.
    • bIt provides a declarative API for complex UI, where a parent manages shared state for its nested children.
    • cIt optimizes component rendering performance by reducing the number of props passed down the tree.
    • dIt simplifies prop passing for simple components by using a global state solution.
    Show the answer

    Answer: b · It provides a declarative API for complex UI, where a parent manages shared state for its nested children.

    The Compound Component pattern's main advantage is offering a clean, declarative API for complex UI by centralizing shared state and logic in a parent, which its children then consume. Option A is incorrect because children in this pattern are coupled to the parent's state via context, not independent.

    Read the full bite: Compound Components: Build Flexible APIs via Shared State

22. Question 22 of 30

    For which scenario would a developer choose a template.js file instead of a layout.js file in Next.js?

    • aTo define a persistent navigation bar that retains its state across different routes.
    • bTo embed global HTML structure like <html> and <body> tags for the entire application.
    • cTo create a shared UI shell, such as a sidebar, that wraps multiple child pages.
    • dTo ensure a component re-renders and resets its internal state upon every page navigation.
    Show the answer

    Answer: d · To ensure a component re-renders and resets its internal state upon every page navigation.

    The card states that a template.js file should be used when a component needs to re-render and reset its state on every navigation, for example, to trigger a useEffect hook or an enter animation. Layouts, in contrast, are designed to persist state and avoid re-rendering across navigations, making options A, C, and D incorrect as they describe typical layout use cases.

    Read the full bite: Next.js Layouts: Shared UI That Survives Navigation

23. Question 23 of 30

    When is next/dynamic most effectively used in a Next.js application?

    • aTo ensure all components are pre-rendered on the server for SEO benefits.
    • bAs a general optimization for every component to reduce overall application complexity.
    • cFor small, essential components that are always visible above the fold.
    • dTo load large, non-critical components or those relying on browser-specific APIs only when needed.
    Show the answer

    Answer: d · To load large, non-critical components or those relying on browser-specific APIs only when needed.

    The card states that next/dynamic is ideal for large components not critical for initial paint or for integrating components dependent on browser-specific APIs, loading them only when required. It explicitly advises against using it for small, simple components or for universal server-side rendering.

    Read the full bite: next/dynamic: Defer Loading Heavy Components

24. Question 24 of 30

    How does useTransition primarily ensure a responsive UI when handling a slow state update?

    • aBy executing the expensive update in a background thread, separate from the main UI thread.
    • bBy automatically memoizing all components affected by the state change to prevent unnecessary re-renders.
    • cBy pausing all other state updates until the slow transition has fully completed its rendering.
    • dBy allowing urgent user interactions to render immediately while the slow update proceeds in a lower-priority lane.
    Show the answer

    Answer: d · By allowing urgent user interactions to render immediately while the slow update proceeds in a lower-priority lane.

    useTransition creates two rendering lanes: an urgent lane for immediate feedback and a non-urgent 'transition' lane for slower updates, allowing the UI to remain interactive. Option A is incorrect because useTransition manages priority on the main thread, it does not move work to a separate background thread.

    Read the full bite: useTransition: Keep Your UI Responsive During State Changes

25. Question 25 of 30

    Which best describes how useDeferredValue maintains UI responsiveness during an expensive update?

    • aIt postpones the state update until the user interaction ceases, similar to debouncing.
    • bIt prevents the component from re-rendering until all background computations are fully completed.
    • cIt caches the expensive computation results to display them instantly on subsequent renders.
    • dIt first renders with the previous deferred value at high priority, then with the new value at low priority.
    Show the answer

    Answer: d · It first renders with the previous deferred value at high priority, then with the new value at low priority.

    Option D correctly describes the mechanism: React performs an immediate, high-priority render with the old deferred value to keep the UI snappy, then schedules a low-priority, interruptible render with the new value. Option A describes debouncing, which the card explicitly states useDeferredValue is not a replacement for.

    Read the full bite: useDeferredValue: Keep UI Responsive During Renders

26. Question 26 of 30

    What critical characteristic must the getSnapshot function in useSyncExternalStore possess to ensure correct behavior and prevent issues like tearing?

    • aIt must directly invoke a re-render of the component when the external data changes.
    • bIt must execute a deep equality check on the external store's current data.
    • cIt must return a new object reference whenever the external state is modified.
    • dIt must return an immutable, cached value for React's comparison.
    Show the answer

    Answer: d · It must return an immutable, cached value for React's comparison.

    The card states that "your getSnapshot function must return an immutable, cached value." This is crucial because React uses Object.is to compare the returned value, and a stable, cached reference allows React to efficiently determine if a re-render is truly necessary. Option C is incorrect because returning a new reference unnecessarily would cause React to re-render even if the underlying data hasn't logically changed, defeating the purpose of the comparison.

    Read the full bite: useSyncExternalStore: Safely Read from External State

27. Question 27 of 30

    For which primary purpose is useDebugValue most effectively utilized in a custom React hook?

    • aTo enhance the performance of state updates within complex custom hooks.
    • bTo replace traditional console.log statements for debugging all custom hook logic.
    • cTo automatically format and display the raw state of every custom hook in the DevTools for easier inspection.
    • dTo display a meaningful, human-readable label for the hook's state in React DevTools, especially for complex shared library hooks.
    Show the answer

    Answer: d · To display a meaningful, human-readable label for the hook's state in React DevTools, especially for complex shared library hooks.

    useDebugValue's core purpose is to provide a custom, more meaningful representation of a hook's state in React DevTools, aiding debugging for complex or shared library hooks. It does not affect application logic or runtime performance; its optional formatting function only optimizes DevTools display performance.

    Read the full bite: useDebugValue: Label Your Custom Hooks in DevTools

28. Question 28 of 30

    What is the primary benefit of using TypeScript to define the shape of React component props?

    • aIt simplifies the process of creating default values for optional component props.
    • bIt ensures that data passed to a component matches its expected structure during compilation.
    • cIt enables components to automatically adapt their behavior based on prop types at runtime.
    • dIt reduces the overall amount of code required to define and use component props.
    Show the answer

    Answer: b · It ensures that data passed to a component matches its expected structure during compilation.

    The card emphasizes that TypeScript adds a static type system to catch mismatches "before the code even runs," which means during compilation. This prevents runtime bugs by ensuring prop data conforms to the defined shape. Option C describes dynamic runtime behavior, which is not what TypeScript's static type checking provides.

    Read the full bite: Typing React Component Props with TypeScript

29. Question 29 of 30

    What is the main advantage of using CSS Modules for component-specific styling in a Next.js application?

    • aIt ensures that styles defined for one component do not unintentionally affect other components.
    • bIt significantly reduces the total CSS file size by only including necessary styles at runtime.
    • cIt enables the use of global utility classes like those from Tailwind CSS within any component.
    • dIt allows styles to be dynamically changed based on component state or props.
    Show the answer

    Answer: a · It ensures that styles defined for one component do not unintentionally affect other components.

    The card emphasizes that CSS Modules prevent global conflicts by scoping styles to individual components, ensuring encapsulation. Dynamic styling (Option D) is typically a feature of CSS-in-JS libraries, not the primary benefit of CSS Modules.

    Read the full bite: Global vs. Component CSS in React/Next.js

30. Question 30 of 30

    What is the essential initial step to enable Sass/SCSS compilation in a Next.js project?

    • aConfigure next.config.js with sassOptions to define Sass paths
    • bManually add a Sass loader to the project's webpack configuration
    • cChange the file extension of all existing CSS files to .scss
    • dInstall the sass npm package as a development dependency
    Show the answer

    Answer: d · Install the sass npm package as a development dependency

    The card explicitly states that you 'must install the sass package' as the first step, and Next.js then automatically handles compilation. Manual webpack configuration is not required, and sassOptions are for advanced configuration after Sass is enabled.

    Read the full bite: Integrating Sass/SCSS in Next.js