Top 30 Easy React & Next.js Concepts Quiz for Beginners
30 easy multiple-choice React & Next.js concept questions, the vocabulary and first principles, the parts you need before anything else makes sense. They come from 30 bites in the React & Next.js library, the gentlest slice of the 146 React & Next.js concept questions in the library. Answer them here or read straight down. Every question carries the correct option, why it is correct, and a link to the bite it came from.
React, Next.js, Remix, RSC, React ecosystem
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.
Question 1 of 30
What is the fundamental nature of a React Component?
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
Question 2 of 30
What is the fundamental nature of JSX in a React application?
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
Question 3 of 30
Which statement accurately describes a core principle of how React components should handle props?
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
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?
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
Question 5 of 30
Which scenario best illustrates a situation where a React controlled component is the most appropriate choice?
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
Question 6 of 30
What is the primary benefit of using TypeScript to define the shape of React 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
Question 7 of 30
What is the main advantage of using CSS Modules for component-specific styling in a Next.js application?
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
Question 8 of 30
What is the main advantage of using the FormData API when submitting an HTML form via JavaScript?
Show the answer
Answer: d · It automatically handles the correct encoding and Content-Type header for complex data, including file uploads.
The FormData API was created to automate the tedious and error-prone process of collecting, encoding (especially multipart/form-data for files), and setting the correct Content-Type headers for AJAX form submissions. While it is often used with asynchronous requests that prevent page reloads, FormData itself doesn't enable the no-reload aspect; it simplifies the data preparation for such requests.
Read the full bite: FormData: Package Form Data for HTTP Requests
Question 9 of 30
What is a common reason React.memo might fail to prevent unnecessary re-renders, even when applied to a component?
Show the answer
Answer: b · The parent component passes new object or function references as props during each re-render.
React.memo performs a shallow comparison of props. If new object or function references are passed as props on each render, even if their content is identical, the shallow comparison will fail, causing the component to re-render. Option A is incorrect because React.memo only optimizes based on prop changes, not internal state changes.
Read the full bite: React.memo: Skip Unnecessary Component Renders
Question 10 of 30
Which scenario best demonstrates an appropriate use case for React.lazy?
Show the answer
Answer: a · A complex data visualization chart displayed within a tab that users might click later.
React.lazy is designed for components that are not critical for the initial render, such as complex charts or content "below the fold," to improve initial load performance. Components that are always visible or critical for immediate display should not be lazy-loaded, nor should small, simple components where the overhead outweighs the benefit.
Question 11 of 30
What is the primary architectural advantage of using React Suspense?
Show the answer
Answer: b · It replaces manual isLoading state management with a declarative boundary for showing loading fallbacks.
The card states Suspense replaces manual isLoading state management with a declarative approach, moving fallback orchestration to React. Option C is incorrect as Suspense aims to avoid prop-drilling isLoading flags. Option A is incorrect because Suspense is not for all async operations; useTransition is for user input-driven state updates.
Read the full bite: React Suspense: Manage Loading States Declaratively
Question 12 of 30
What is the main advantage of implementing a Single Source of Truth (SSoT) in an application?
Show the answer
Answer: c · It centralizes shared application data, making state changes predictable and easier to trace.
The card states that SSoT "consolidates all application state into one central object... makes state predictable and easier to debug" and solves "bugs that are difficult to trace." Option D is incorrect because components cannot directly modify state; they dispatch actions. Option A is incorrect as local component state typically does not belong in the global store.
Read the full bite: Single Source of Truth: Centralized App State
Question 13 of 30
What is a critical rule for Redux reducers to ensure predictable and traceable state changes?
Show the answer
Answer: d · They must return a new state object when changes occur, never mutating the original.
The card emphasizes that reducers must return a new state object instead of modifying the existing state directly, calling direct mutation a 'footgun'. Option C describes this exact anti-pattern, making it incorrect. Reducers handle actions; they do not dispatch them, making option A incorrect. Actions, not reducers, describe 'what' happened, making option B incorrect.
Read the full bite: Redux: Actions are Events, Reducers are Event Handlers
Question 14 of 30
What is the primary benefit of adopting React Testing Library's philosophy for component testing?
Show the answer
Answer: c · It ensures tests remain robust and relevant even after significant code refactors.
The card emphasizes that RTL's philosophy prevents tests from breaking during refactors by focusing on user-observable behavior, unlike tests coupled to internal implementation. Option A is a general testing goal, not the specific benefit of RTL's philosophy.
Read the full bite: Test Like a User: The React Testing Library Philosophy
Question 15 of 30
What is the main advantage of Jest's "batteries-included" design for JavaScript projects?
Show the answer
Answer: b · It provides a complete testing environment, eliminating the need to integrate separate runners, assertion libraries, and mocking tools.
The card explains that Jest's "batteries-included" approach means it provides a single, integrated solution, avoiding the need to combine separate test runners, assertion libraries, and mocking tools. While Jest is a default for React, it is explicitly stated to be a general-purpose tool for any JavaScript project, making option D incorrect.
Read the full bite: Jest: The 'Batteries-Included' JavaScript Test Runner
Question 16 of 30
Which React Testing Library query type is best for asserting a success message appears after an asynchronous API call?
Show the answer
Answer: d · findByText
findBy queries are specifically designed to wait for elements that appear asynchronously, such as after an API call, by retrying until the element is found. Synchronous queries like getByText or queryByText would fail or return null immediately if the element isn't present at the time of the query.
Read the full bite: React Testing Library Queries: Find Elements Like a User
Question 17 of 30
Which of the following correctly uses a Jest matcher to assert that a function's output is 'hello'?
Show the answer
Answer: c · expect(myFunction()).toBe('hello')
The card specifies the pattern as expect(value_from_your_code).matcher(expected_value). Option C correctly places the actual value from myFunction() inside expect() and the expected value 'hello' inside the .toBe() matcher. Option B is a common error, swapping the actual and expected values, as highlighted in the 'WHEN NOT TO USE IT' section.
Read the full bite: Jest Matchers: Asserting Values in Your Tests
Question 18 of 30
What is a primary advantage of the App Router's "component-centric" mental model compared to the Pages Router's "page-centric" approach?
Show the answer
Answer: b · It allows individual components to fetch their own data and supports nested layouts.
The card states the App Router is "component-centric" where "server-side components can fetch their own data independently" and "provides superior features like nested layouts." Distractor B is incorrect because the App Router heavily utilizes server-side components and data fetching, not eliminating it.
Question 19 of 30
What is the main advantage of using next/link for navigation within a Next.js application?
Show the answer
Answer: c · It facilitates fast, client-side page transitions by prefetching and avoiding full page reloads.
next/link's primary benefit is enabling fast, client-side navigation by intercepting clicks, prefetching content, and updating the DOM without a full page refresh. Programmatic redirects are handled by the useRouter hook, not next/link.
Question 20 of 30
A Next.js developer needs to group several pages to share a specific layout, but these pages should appear directly under the root URL path (e.g., /settings instead of /dashboard/settings). How should they structure their files?
Show the answer
Answer: d · Place the pages in a folder like app/(dashboard)/settings/page.tsx and add app/(dashboard)/layout.tsx.
Route Groups, indicated by parentheses around the folder name, allow for file organization and shared layouts without including the group name in the URL path. Option B would include 'dashboard' in the URL.
Read the full bite: Next.js Route Groups: Invisible Folders for Routes
Question 21 of 30
What type of information should NEVER be placed directly into next.config.js?
Show the answer
Answer: c · Private API keys or sensitive database credentials
The card explicitly states, "Do not put secrets or private API keys directly into next.config.js" because anything in the env block is exposed to the client-side browser bundle. While environment variables can be made available to the client, this should only be for non-sensitive public variables, not private secrets.
Read the full bite: next.config.js: Your Next.js App's Control Panel
Question 22 of 30
What is the primary purpose of declaring 'use client' at the top of a Next.js component file?
Show the answer
Answer: d · To allow the component to use React Hooks like useState or handle user events.
'use client' is essential for components that require interactivity, such as using state, effects, or event listeners, as Server Components cannot handle these. It does not prevent server-side pre-rendering, nor does it inherently reduce the client bundle size; in fact, it adds JavaScript to it.
Read the full bite: 'use client': The Boundary Between Server and Client
Question 23 of 30
In which context would Next.js's `next` and `cache` options for `fetch` be disregarded?
Show the answer
Answer: d · When making a `fetch` call from a Client Component.
The card explicitly states that the `next` and `cache` options are server-side features and are ignored when `fetch` is called from a Client Component. In other server-side contexts like Server Components or Route Handlers, these options are processed by Next.js. If no options are provided, Next.js applies default caching behavior, it doesn't "disregard" provided options.
Read the full bite: Next.js Extends `fetch` for Server-Side Caching
Question 24 of 30
Which task is NOT a suitable use case for a Next.js Route Handler?
Show the answer
Answer: c · Generating and serving a full HTML page to the browser.
Route Handlers are designed to return data, typically JSON, and are explicitly stated as not suitable for rendering HTML pages. That functionality is handled by Page Components. The other options are all valid uses for Route Handlers.
Read the full bite: Next.js Route Handlers: One File, Multiple Methods
Question 25 of 30
For which scenario is NextResponse.json() specifically designed in Next.js?
Show the answer
Answer: d · Sending structured JSON data from a Route Handler to a client.
NextResponse.json() is purpose-built for sending JSON data from server-side Route Handlers, handling the necessary stringification and header settings automatically. Option A describes returning HTML, which would typically use a standard Response object with a different Content-Type.
Read the full bite: NextResponse.json(): The Standard for API Responses in Next.js
Question 26 of 30
What critical attribute pair must be provided to the next/image component to prevent Cumulative Layout Shift (CLS)?
Show the answer
Answer: a · The width and height attributes
The card explicitly states that next/image requires 'width and height attributes to prevent Cumulative Layout Shift (CLS) by reserving the correct space'. While other attributes are important, they do not directly address CLS prevention.
Read the full bite: Next.js `next/image`: Stop Shipping Giant Images
Question 27 of 30
What is the main advantage of using next/font over traditional <link> tags for web fonts?
Show the answer
Answer: a · It bundles fonts at build time, serving them locally to prevent layout shifts and third-party requests.
next/font's core benefit is bundling fonts at build time and serving them from your own domain, which eliminates layout shift through optimized CSS and enhances privacy by removing external network requests. Option D describes a scenario where next/font is explicitly not recommended, making it a tempting but incorrect distractor.
Question 28 of 30
What is the main benefit of using next/script for third-party scripts like analytics or chat widgets?
Show the answer
Answer: d · It prevents third-party scripts from blocking the initial page content from rendering.
The card states that next/script "prevents third-party scripts from blocking your page's initial render" to improve performance. While other options relate to performance or security, they are not the primary function of next/script.
Question 29 of 30
What is the main responsibility a developer takes on when implementing the Auth.js Credentials provider?
Show the answer
Answer: d · Ensuring the security and correctness of the custom login validation logic.
The card emphasizes that the developer is "entirely responsible for the security of the login logic" and must "control the authentication logic directly" when using the Credentials provider. This means the developer handles the validation and security of the custom login process. Distractor D is incorrect because the developer assumes significant security responsibility, rather than offloading it.
Read the full bite: Auth.js: Authenticate with Custom Credentials
Question 30 of 30
What critical security consideration must be kept in mind when designing JWT payloads?
Show the answer
Answer: b · Sensitive information should not be stored in the payload as it is readable.
The card explicitly warns that the JWT payload is readable because it's only Base64Url encoded, not encrypted, making it crucial to avoid storing sensitive information there. Option C is incorrect as JWTs do not encrypt the payload.
Read the full bite: JSON Web Tokens (JWTs): Stateless API Passports
Could you explain these out loud?
That is what an interview actually tests. Tezvyn gives you questions like these with what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.