Top 30 Intermediate 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 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

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

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

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

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

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

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

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

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

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

11. Question 11 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

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

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

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

15. Question 15 of 30

    How does Emotion primarily ensure that component styles are scoped and avoid global conflicts?

    • aBy enforcing strict naming conventions for CSS classes to prevent accidental overrides.
    • bBy generating unique, component-specific class names and injecting their rules into the document's head.
    • cBy requiring developers to define all styles using inline style attributes on HTML elements.
    • dBy compiling all component styles into a single, optimized CSS file during the build process.
    Show the answer

    Answer: b · By generating unique, component-specific class names and injecting their rules into the document's head.

    Emotion prevents style conflicts by generating unique, scoped class names for each component's styles and injecting these rules into the document's <head>. While inline styles (option C) can prevent conflicts, Emotion's core mechanism involves generated class names, not exclusively inline styles.

    Read the full bite: Emotion: Component-Scoped Styles in JavaScript

16. Question 16 of 30

    What is the primary consequence if a parent route component, designed for nested routes, does not include an <Outlet> component?

    • aThe parent component will render, but its own content will be empty as it expects the Outlet to fill it.
    • bChild routes will render, but they will appear as top-level routes, ignoring the parent's layout.
    • cThe router will not recognize the child route paths, resulting in a 404 error.
    • dThe parent component's layout will display, but the content intended for the child routes will not be rendered.
    Show the answer

    Answer: d · The parent component's layout will display, but the content intended for the child routes will not be rendered.

    The card explicitly states that if the <Outlet> is forgotten, "child routes will match the URL but won't render." This means the parent's layout appears, but the child's content is absent, not that the URL matching fails.

    Read the full bite: Nested Routes: Composing UI with <Outlet>

17. Question 17 of 30

    A developer needs to display thousands of product pages, each with a unique ID. How should they implement this in Next.js?

    • aCreate a separate page.js file for every single product ID.
    • bStore all product data in a single app/products/page.js and filter based on query parameters.
    • cUse a dynamic route like app/products/[productId]/page.js.
    • dImplement client-side routing to fetch product data based on the URL hash.
    Show the answer

    Answer: c · Use a dynamic route like app/products/[productId]/page.js.

    Dynamic routes are designed to solve the problem of creating many pages from a single template, making them ideal for collections like product pages. Manually creating a file for each product is unscalable and explicitly advised against in the card.

    Read the full bite: Next.js Dynamic Routes: Pages on Demand

18. Question 18 of 30

    Which scenario best illustrates the primary use case for Next.js's useRouter hook over the Link component?

    • aAutomatically redirecting a user to a dashboard page after their form submission is successfully processed by an API.
    • bDisplaying a list of navigation links in a header that users can click to visit different sections.
    • cImplementing a "Go Back" button that navigates to the previously viewed page in the browser history.
    • dCreating a button that, when clicked, takes the user to a specific external website.
    Show the answer

    Answer: a · Automatically redirecting a user to a dashboard page after their form submission is successfully processed by an API.

    The useRouter hook is designed for programmatic navigation, such as redirecting after an API call or form submission, where the application's logic dictates the route change. Option B describes a static link, which is the primary use case for the Link component. While useRouter can handle history navigation (Option C), its core distinction from Link is for event-driven, application-controlled redirects.

    Read the full bite: useRouter: Programmatic Navigation in Next.js

19. Question 19 of 30

    What is the primary mechanism by which React Hook Form improves performance compared to traditional controlled components?

    • aIt automatically memoizes all form fields, preventing re-renders unless their specific value changes.
    • bIt uses a highly optimized internal state management system that is faster than React's built-in useState for forms.
    • cIt leverages uncontrolled inputs, allowing the DOM to manage input values directly and thus reducing component re-renders.
    • dIt batches all form state updates into a single re-render cycle, optimizing the update process.
    Show the answer

    Answer: c · It leverages uncontrolled inputs, allowing the DOM to manage input values directly and thus reducing component re-renders.

    React Hook Form's core performance advantage comes from using uncontrolled inputs, which means the DOM directly manages input values, drastically reducing component re-renders. This differs from controlled components, which re-render on every keystroke. While memoization (Option A) can aid performance, it's not the primary mechanism RHF employs; RHF avoids the need for many re-renders by not controlling the inputs with React state in the first place.

    Read the full bite: React Hook Form: Faster Forms with Less Code

20. Question 20 of 30

    Which statement best characterizes Formik's role in a React application?

    • aIt primarily focuses on server-side validation, reducing the need for client-side checks.
    • bIt functions as a dedicated state machine for form data and logic, independent of UI presentation.
    • cIt offers a comprehensive UI component library for building visually consistent forms.
    • dIt integrates form state directly into a global application state management solution like Redux.
    Show the answer

    Answer: b · It functions as a dedicated state machine for form data and logic, independent of UI presentation.

    Formik is described as a "dedicated state manager just for your form" that handles "data and logic" but "not the presentation." It explicitly avoids providing UI components and is designed to keep form state local, not integrated with global state managers.

    Read the full bite: Formik: Taming React Form State

21. Question 21 of 30

    What core limitation of TypeScript does Zod primarily address in an application?

    • aTypeScript's type system being entirely erased at runtime.
    • bThe absence of a standard way to manage database schema changes.
    • cThe complexity of defining nested object types and arrays in TypeScript.
    • dThe inability to automatically generate API client code from server-side types.
    Show the answer

    Answer: a · TypeScript's type system being entirely erased at runtime.

    Zod's primary purpose, as detailed in the card, is to provide runtime validation because "TypeScript types are erased at compile time," making applications vulnerable to untrusted data. Option D describes a benefit Zod enables in certain ecosystems, not the fundamental limitation of TypeScript's type system that Zod directly addresses.

    Read the full bite: Zod: Validate Data, Infer Types

22. Question 22 of 30

    When a user selects a file using an <input type="file">, what should be stored in React state to prepare for upload?

    • aThe full path to the selected file on the user's local machine.
    • bThe raw binary data of the selected file.
    • cA base64 encoded string of the file's content.
    • dA reference to the File object from e.target.files[0].
    Show the answer

    Answer: d · A reference to the File object from e.target.files[0].

    The card states that you should "store this file object in your component's state" from e.target.files[0]. React cannot hold the raw file data directly (B) for security and performance, nor can it access the local file path (A). While base64 encoding (C) is a way to represent file content, it's not what the card suggests storing directly from the event for a FormData upload.

    Read the full bite: Handling File Uploads in React

23. Question 23 of 30

    For an autosave feature that should trigger only after a user stops typing for a short period, which technique is most appropriate?

    • aA direct event listener, as it provides immediate feedback.
    • bDebouncing, to execute the save function only after a pause in user input.
    • cA combination of both, to handle both frequent and infrequent typing.
    • dThrottling, to ensure the save function runs at a consistent interval.
    Show the answer

    Answer: b · Debouncing, to execute the save function only after a pause in user input.

    Debouncing is ideal for scenarios like autosave because it waits for a period of user inactivity before executing the function, ensuring the save occurs only after the user has finished typing. Throttling, conversely, would execute the save function at a maximum frequency during typing, which is not the desired behavior for an 'after pause' autosave.

    Read the full bite: Debouncing vs. Throttling in React

24. Question 24 of 30

    For which task is the React DevTools Profiler primarily designed?

    • aIdentifying components that cause excessive re-renders or slow commits during development.
    • bAnalyzing the memory footprint and garbage collection cycles of a large React application.
    • cBenchmarking the final, real-world performance of a deployed React application.
    • dDetecting JavaScript runtime errors and warnings within React component lifecycles.
    Show the answer

    Answer: a · Identifying components that cause excessive re-renders or slow commits during development.

    The Profiler's core purpose is to diagnose performance issues like slow renders and unnecessary updates in development mode. Option C is incorrect because the card explicitly states it's not for absolute, real-world performance metrics or production benchmarking.

    Read the full bite: React DevTools Profiler: Find Performance Bottlenecks

25. Question 25 of 30

    Which statement best describes how list virtualization optimizes performance for large datasets?

    • aIt creates new DOM elements only for visible items and destroys them when they scroll out of view.
    • bIt loads data in batches as the user scrolls, minimizing initial data transfer.
    • cIt renders all items but hides those outside the visible viewport using CSS.
    • dIt reuses a fixed number of DOM elements, updating their content and position as items scroll into and out of view.
    Show the answer

    Answer: d · It reuses a fixed number of DOM elements, updating their content and position as items scroll into and out of view.

    The card explains that virtualization "recycles DOM nodes, replacing the content of items moving out of view with the content of items moving into view" and "updates the style... and content of the existing elements." Option B describes infinite scrolling, which focuses on data fetching, not DOM management, and option A incorrectly suggests constant creation/destruction rather than efficient recycling.

    Read the full bite: List Virtualization: Render the Window, Not the World

26. Question 26 of 30

    When using a bundle analyzer to optimize web application performance, which metric is most critical to focus on for identifying load time issues?

    • aThe raw, uncompressed size of each module.
    • bThe parsed size, reflecting the code size after minification.
    • cThe gzipped size, representing the actual data transferred to the user.
    • dThe total number of dependencies included in the bundle.
    Show the answer

    Answer: c · The gzipped size, representing the actual data transferred to the user.

    The card explicitly states that the 'footgun' is to focus on gzipped size, not raw size. This is because gzipped size accurately reflects the amount of data transferred over the network, which directly impacts load times, unlike raw or parsed sizes.

    Read the full bite: Bundle Analysis: An X-Ray for Your App's Weight

27. Question 27 of 30

    Which application type is best suited for Next.js Static Site Generation (SSG)?

    • aA user dashboard displaying personalized, real-time data
    • bA social media feed that updates frequently with new posts
    • cA web application requiring server-side computation for every user request
    • dAn e-commerce product page with content determined at build time
    Show the answer

    Answer: d · An e-commerce product page with content determined at build time

    SSG is ideal for content that can be determined at build time and doesn't change on a per-user basis, such as e-commerce product listings. The other options describe scenarios requiring live, personalized, or per-request dynamic data, for which SSG is unsuitable due to its pre-rendering nature.

    Read the full bite: Next.js SSG: Pre-render Pages for Maximum Speed

28. Question 28 of 30

    Which scenario requires careful configuration of tree shaking to prevent unexpected application behavior?

    • aAn application with a very large number of dependencies
    • bCode written using CommonJS 'require()' statements
    • cA module that modifies a global object upon import
    • dA library that exports only pure functions
    Show the answer

    Answer: c · A module that modifies a global object upon import

    Modules that have 'side effects'—meaning they do something just by being imported, like modifying global objects—must be explicitly configured to be preserved. Otherwise, tree shaking might incorrectly remove them, leading to application breakage. Pure functions (option D) are ideal for tree shaking, and a large number of dependencies (option A) is precisely why tree shaking is beneficial. CommonJS modules (option B) are not effectively tree-shaken, but this is a limitation of the mechanism, not a scenario that causes breakage due to incorrect removal of tree shaking configuration.

    Read the full bite: Tree Shaking: Shipping Only the Code You Use

29. Question 29 of 30

    What crucial mechanism within createSlice enables developers to write reducer logic that appears to directly modify the state?

    • aThe requirement that all state properties are primitive values, allowing direct assignment.
    • bIts built-in ability to automatically detect and optimize state changes.
    • cA special compiler that transforms mutable JavaScript into immutable Redux operations.
    • dThe internal integration of the Immer library, which ensures immutability behind the scenes.
    Show the answer

    Answer: d · The internal integration of the Immer library, which ensures immutability behind the scenes.

    The card states, "Crucially, createSlice uses Immer internally, so you can write code that looks like it's mutating state directly... and Immer will handle creating a correct, immutable update behind the scenes." Option B is tempting because Immer does optimize updates, but its primary role in this context is enabling the mutable-looking syntax while preserving immutability.

    Read the full bite: Redux Toolkit: `createSlice` Bundles Your Redux Logic

30. Question 30 of 30

    Which statement accurately describes the behavior of the 'get' function within a Jotai derived atom's definition?

    • aThe 'get' function is only available in the read part; the write part uses 'set' exclusively.
    • bThe 'get' function in the read part tracks dependencies, but the 'get' function in the write part does not.
    • cThe 'get' function in the write part is used to set the derived atom's initial value.
    • dBoth the 'get' function in the read part and the 'get' function in the write part track dependencies.
    Show the answer

    Answer: b · The 'get' function in the read part tracks dependencies, but the 'get' function in the write part does not.

    The card explicitly states that 'the get in your read function is reactive, but the get in your write function.' This means the 'get' in the read function tracks dependencies, while the 'get' in the write function does not. Option D is a common misconception, assuming 'get' always behaves reactively.

    Read the full bite: Jotai Derived Atoms: Computed State from Other Atoms