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

   A developer chooses Vue Single-File Components (SFCs) for a new application. What is the most significant implication regarding how their code will be processed for the browser?

   • aThe component's template, logic, and styling will be served as three distinct files to the browser for improved parallel loading.
   • bThe application's styles will automatically be globally accessible and override any external CSS.
   • cA build tool will be necessary to compile the .vue files into standard JavaScript and CSS that browsers can execute.
   • dEach .vue file will be directly interpreted by the browser as a self-contained module without any prior transformation.
   Show the answer

   Answer: c · A build tool will be necessary to compile the .vue files into standard JavaScript and CSS that browsers can execute.

   The card explicitly states that .vue files are not directly understood by browsers and require a build tool to compile them into standard JavaScript and CSS. Option D is incorrect because SFCs cannot be directly interpreted by browsers.

   Read the full bite: Vue Single-File Components (SFCs)

3. Question 3 of 30

   Why might you explicitly annotate the type of an array like "let items: Animal[] = [new Rhino(), new Elephant()];" instead of letting TypeScript infer it?

   • aTo prevent TypeScript from inferring an overly broad type like any[] for the array.
   • bTo allow the array to store any Animal subtype, not just the specific types present at initialization.
   • cTo ensure the array can only hold Rhino or Elephant instances, not other Animal types.
   • dTypeScript cannot infer types for arrays containing instances of custom classes.
   Show the answer

   Answer: b · To allow the array to store any Animal subtype, not just the specific types present at initialization.

   The card explains that TypeScript infers a 'best common type' like (Rhino | Elephant)[] for such an array. Explicitly annotating as Animal[] allows the array to hold any Animal subtype, which is a more general type than the inferred union. Option C is incorrect because the inferred type would already restrict it to Rhino or Elephant, while explicit annotation to Animal[] broadens it.

   Read the full bite: TypeScript Type Inference: How It Knows Without Being Told

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

5. Question 5 of 30

   Which CSS display value allows an element to flow horizontally with surrounding text while still permitting explicit control over its width and height?

   • ainline
   • bflex
   • cblock
   • dinline-block
   Show the answer

   Answer: d · inline-block

   Inline-block elements combine the characteristics of inline elements by flowing horizontally with text, and block elements by allowing explicit width, height, and vertical margin/padding. Inline elements flow horizontally but ignore width/height, while block elements take a new line.

   Read the full bite: CSS 'display': How Elements Occupy Space

6. Question 6 of 30

   Before narrowing, what operations are permitted on a variable declared with a Union Type (e.g., string | number)?

   • aOnly operations that are common to both the string and number types.
   • bOperations determined by TypeScript's automatic runtime type inference.
   • cAny operation valid for either the string or number type.
   • dOnly operations that explicitly cast the variable to a specific type.
   Show the answer

   Answer: a · Only operations that are common to both the string and number types.

   The card states, "When you have a value of this union type, TypeScript only allows you to perform operations that are valid for every member type." This means you can only use properties or methods common to all types in the union until you explicitly narrow the type using runtime checks. Option C is incorrect because TypeScript prevents operations specific to one type (e.g., string methods on a string | number) without narrowing, as the value might be the other type.

   Read the full bite: Union Types: When a Value Can Be One of Several Things

7. Question 7 of 30

   When a service is provided within a specific component's providers array, what is the primary outcome?

   • aAngular will always throw a NullInjectorError if the service is not also provided at the root.
   • bThe service becomes a global singleton, accessible throughout the entire application.
   • cThe service can only be injected by the component itself, and not by any of its child components.
   • dA new instance of the service is created for that component and its descendants, isolated to that part of the UI.
   Show the answer

   Answer: d · A new instance of the service is created for that component and its descendants, isolated to that part of the UI.

   Providing a service at the component level creates a new instance of that service, scoped to that component and its children, allowing for isolated state within a UI branch. This differs from `providedIn: 'root'`, which creates an application-wide singleton.

   Read the full bite: Angular's Hierarchical Dependency Injection

8. Question 8 of 30

   You set two elements to "width: 50%" and add "padding: 10px". To guarantee they fit side-by-side without wrapping, which box-sizing value is best?

   • apadding-box, to control how padding affects the element's overall size.
   • bmargin-box, to prevent margins from causing overflow issues.
   • cborder-box, as it includes padding within the element's declared width.
   • dcontent-box, as it ensures the content area remains fixed.
   Show the answer

   Answer: c · border-box, as it includes padding within the element's declared width.

   With border-box, the element's declared width (50%) includes its padding, ensuring it occupies exactly 50% of the parent's space. content-box, the default, would add the padding outside the 50% width, making each element wider than 50% and causing them to wrap.

   Read the full bite: CSS box-sizing: Predictable Element Sizing

9. Question 9 of 30

   How does Svelte fundamentally differ from Virtual DOM-based frameworks in its approach to updating the user interface?

   • aSvelte tracks component state changes at runtime and then uses a custom diffing algorithm to update the real DOM.
   • bSvelte uses a highly optimized, lightweight Virtual DOM that performs diffing only on critical changes.
   • cSvelte relies on browser-native Shadow DOM features to manage updates, avoiding manual DOM manipulation.
   • dSvelte compiles components into vanilla JavaScript that directly modifies the DOM based on state changes, eliminating runtime diffing.
   Show the answer

   Answer: d · Svelte compiles components into vanilla JavaScript that directly modifies the DOM based on state changes, eliminating runtime diffing.

   Svelte is a compiler that generates highly optimized JavaScript to directly update the DOM when state changes, completely bypassing the Virtual DOM and its runtime diffing process. Option B is incorrect because Svelte eliminates the VDOM entirely, it doesn't optimize it.

   Read the full bite: Why Svelte Skips the Virtual DOM

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

11. Question 11 of 30

    When an object is assigned to a TypeScript interface, what happens if the object contains properties not defined in the interface?

    • aTypeScript will issue a compile-time error due to the exact shape mismatch.
    • bThe extra properties are ignored and effectively removed by the type checker.
    • cIt is only permitted if the interface explicitly marks those extra properties as optional.
    • dThe assignment is valid, provided all properties required by the interface are present.
    Show the answer

    Answer: d · The assignment is valid, provided all properties required by the interface are present.

    TypeScript interfaces use structural typing, meaning an object only needs to have the properties specified by the interface to be considered compatible. Extra properties are allowed and do not cause a type error, as long as the required contract is fulfilled. Option A is incorrect because TypeScript does not enforce an exact match; it only checks for the presence of required properties.

    Read the full bite: TypeScript Interfaces: Naming the Shape of Your Data

12. Question 12 of 30

    When developing a complex Vue component with intertwined logic for a single feature (e.g., data fetching and its related states), which API is generally preferred and why?

    • aComposition API, because it enables grouping all related logic for a feature together, enhancing co-location and reusability.
    • bOptions API, as its clear separation of data, methods, and computed properties simplifies debugging in large components.
    • cOptions API, because it offers superior TypeScript inference and type safety for intricate component structures.
    • dComposition API, as it primarily focuses on managing global application state rather than local component state.
    Show the answer

    Answer: a · Composition API, because it enables grouping all related logic for a feature together, enhancing co-location and reusability.

    The Composition API is preferred for complex components because it allows grouping all related logic for a specific feature, like data fetching and its states, in one place, improving co-location and reusability. The Options API, conversely, tends to scatter such related logic across different sections (data, methods, mounted), making complex components harder to manage and debug.

    Read the full bite: Vue: Options API vs. Composition API

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

14. Question 14 of 30

    What is the primary role of a CSS pseudo-class?

    • aTo group multiple style declarations under a single, reusable name for cleaner code.
    • bTo apply styles to a specific, non-structural part of an element, such as its first line.
    • cTo dynamically change an element's content or attributes based on user interaction.
    • dTo define styles that activate when an element is in a particular state or position, like being hovered over.
    Show the answer

    Answer: d · To define styles that activate when an element is in a particular state or position, like being hovered over.

    Pseudo-classes are designed to style elements based on their temporary state or structural position, such as when a user hovers over them or when an input is invalid. Option B describes pseudo-elements, which style specific parts of an element, a key distinction mentioned in the card.

    Read the full bite: CSS Pseudo-classes: Style Elements Based on State

15. Question 15 of 30

    When using position: absolute on a child element, why might its direct parent be set to position: relative?

    • aTo establish a specific positioning context for the child, preventing it from positioning relative to the viewport or document body.
    • bTo ensure the parent element itself is removed from the normal document flow.
    • cTo make the parent element's dimensions automatically adjust to contain the absolutely positioned child.
    • dTo allow the child to adjust its position based on its own original spot within the parent.
    Show the answer

    Answer: a · To establish a specific positioning context for the child, preventing it from positioning relative to the viewport or document body.

    Setting a parent to position: relative creates a positioning context, ensuring that its position: absolute children will position themselves relative to that parent. This prevents the absolutely positioned child from positioning relative to the <body> or another distant ancestor. Position: relative on the parent does not remove it from the normal document flow.

    Read the full bite: CSS Positioning: Taking Elements Out of Normal Flow

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

17. Question 17 of 30

    When should a TypeScript call signature be used instead of a function type expression?

    • aWhen defining a function type that can also be used as a class constructor.
    • bWhen you need to define a function type without explicitly naming its parameters.
    • cWhen the function's return type needs to be separated from its parameters using a colon (:) instead of an arrow (=>).
    • dWhen the function type needs to specify properties that the function itself possesses.
    Show the answer

    Answer: d · When the function type needs to specify properties that the function itself possesses.

    The card states that a call signature is used "for describing a value that is callable but also has its own properties." Function type expressions are for simple callbacks without properties. Option C describes a syntactic difference, not the functional reason for choosing one over the other.

    Read the full bite: TypeScript Function Types: Expressions vs. Signatures

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

19. Question 19 of 30

    According to the card, what is the primary design intention behind CSS margin collapsing?

    • aTo optimize browser rendering performance by minimizing the number of distinct spacing values.
    • bTo ensure a consistent and predictable vertical rhythm in document typography.
    • cTo prevent margins from adding up, thereby simplifying margin calculations for developers.
    • dTo reduce the overall memory footprint required for rendering complex layouts.
    Show the answer

    Answer: b · To ensure a consistent and predictable vertical rhythm in document typography.

    The card explicitly states that margin collapsing "was designed to create consistent vertical rhythm in documents." While it does prevent margins from adding up, that is a mechanism to achieve the primary goal of aesthetic consistency, not the goal itself.

    Read the full bite: CSS Margin Collapsing: The Largest Margin Wins

20. Question 20 of 30

    When using the 'extends' property in tsconfig.json, how are compilerOptions and file-related properties handled?

    • acompilerOptions are completely replaced, while file-related properties are merged recursively.
    • bcompilerOptions are merged recursively, while file-related properties are completely replaced.
    • cBoth compilerOptions and file-related properties are merged recursively.
    • dBoth compilerOptions and file-related properties are completely replaced by the extending config.
    Show the answer

    Answer: b · compilerOptions are merged recursively, while file-related properties are completely replaced.

    The card states that "compilerOptions are merged recursively, but file-related properties like include are completely replaced, not combined." This means that an extending configuration will add to or override specific compiler options, but its file-related arrays will entirely supersede those from the base configuration. Option C is a common misconception, as it incorrectly assumes all properties are merged.

    Read the full bite: tsconfig.json: The Rulebook for Your TypeScript Project

21. Question 21 of 30

    What is the main reason vite.config.js is designed as a Node.js script capable of exporting a function?

    • aTo provide a standardized format for all build tools to consume configuration.
    • bTo enable programmatic configuration adjustments based on the current command or environment mode.
    • cTo allow for type-checking and autocompletion through the defineConfig helper.
    • dTo ensure that configuration values are always loaded asynchronously for better performance.
    Show the answer

    Answer: b · To enable programmatic configuration adjustments based on the current command or environment mode.

    The card emphasizes that vite.config.js is a dynamic script allowing conditional logic based on context like 'command' or 'mode', which is the core purpose of exporting a function. While defineConfig (Option C) is a benefit, it's not the primary reason for the dynamic script design itself.

    Read the full bite: Vite Config: The Control Panel for Your Build

22. Question 22 of 30

    For what primary purpose is a SvelteKit adapter indispensable?

    • aTo translate the built application for a specific production hosting environment.
    • bTo integrate external APIs or databases into the application.
    • cTo enable server-side rendering for better search engine optimization.
    • dDuring local development to preview the final build output.
    Show the answer

    Answer: a · To translate the built application for a specific production hosting environment.

    SvelteKit adapters are essential for bridging the gap between SvelteKit's platform-agnostic build and the specific requirements of a production hosting environment. The card explicitly states that adapters are not needed during local development, as the vite dev server handles everything.

    Read the full bite: SvelteKit Adapters: Bridge Your App to Production

23. Question 23 of 30

    When configuring a Vite plugin, for what primary reason would you use the 'enforce' property?

    • aTo define the specific options or parameters the plugin should use.
    • bTo specify whether the plugin runs during development or production builds.
    • cTo indicate that the plugin should only apply to certain file types or assets.
    • dTo control the plugin's execution order relative to other plugins and Vite's core.
    Show the answer

    Answer: d · To control the plugin's execution order relative to other plugins and Vite's core.

    The card states that 'enforce: 'pre' or enforce: 'post' forces a plugin to run before or after Vite's core plugins, which is crucial for resolving compatibility issues.' The 'apply' property is used to restrict a plugin to run only during development or production builds.

    Read the full bite: Vite's Plugin System: Extending Dev and Build

24. Question 24 of 30

    Which scenario best illustrates why direct DOM manipulation is often avoided in favor of frontend frameworks for UI updates?

    • aWhen the application requires frequent and complex updates to many parts of the user interface.
    • bWhen a developer needs to change the text content of a single paragraph element.
    • cWhen the webpage is designed to be completely static with no interactive elements.
    • dWhen the JavaScript code needs to be executed before the HTML document is fully parsed by the browser.
    Show the answer

    Answer: a · When the application requires frequent and complex updates to many parts of the user interface.

    The card explicitly states that direct, frequent DOM manipulation is computationally expensive due to browser reflows and repaints, making it unsuitable for complex applications with many state changes. Frameworks like React and Vue were developed to address this performance issue. Option B describes a simple, infrequent update where direct DOM manipulation is appropriate, not avoided.

    Read the full bite: DOM Manipulation: Treating Your Webpage Like a Live Object

25. Question 25 of 30

    What is a key consideration when using nextSibling for DOM traversal?

    • aIt exclusively returns element nodes, ignoring text or comment nodes.
    • bIt requires the current element to possess a unique ID for proper function.
    • cIt can return a text node if whitespace exists between elements in the HTML.
    • dIt is primarily designed for navigating elements within the document's body.
    Show the answer

    Answer: c · It can return a text node if whitespace exists between elements in the HTML.

    The card explicitly states that nextSibling can return a text node (representing whitespace) if there is whitespace between elements in the HTML source, calling this a 'classic footgun.' Option A is a common misconception; nextSibling operates on all node types, not just element nodes.

    Read the full bite: DOM Traversal: Navigating the HTML Tree

26. Question 26 of 30

    What is the primary trade-off a developer considers when deciding between a custom font via @font-face and a standard system font?

    • aEnsuring consistent typography across devices versus relying on browser-specific font rendering.
    • bThe ability to use vector-based icon fonts versus traditional text characters.
    • cThe complexity of defining font properties versus the simplicity of pre-installed fonts.
    • dAchieving a unique brand aesthetic versus optimizing for faster page load times.
    Show the answer

    Answer: d · Achieving a unique brand aesthetic versus optimizing for faster page load times.

    The card emphasizes that @font-face is used for specific branding and aesthetics, but warns that "Every custom font adds to the page weight and increases load time." This highlights the core trade-off between design uniqueness and performance. While defining @font-face adds some CSS, the primary decision factor is not the syntax complexity, but the impact on user experience due to load times.

    Read the full bite: @font-face: Ship Custom Fonts with Your CSS

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

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

29. Question 29 of 30

    What is the primary reason developers encounter cross-browser compatibility issues when using the Browser Object Model (BOM)?

    • aThe BOM is designed for server-side operations, not client-side browser interaction.
    • bThe BOM is an outdated technology, largely replaced by the more modern Document Object Model (DOM).
    • cThe BOM's security restrictions prevent consistent access to browser features across different origins.
    • dEach browser vendor implements the BOM differently, as it lacks a universal standard.
    Show the answer

    Answer: d · Each browser vendor implements the BOM differently, as it lacks a universal standard.

    The card explicitly states that the BOM is a collection of non-standard APIs whose implementation is 'up to each vendor,' leading to significant differences and compatibility issues across browsers. Option D directly captures this core problem. Option C is incorrect because the card identifies the lack of standardization, not security restrictions, as the primary cause of BOM's cross-browser inconsistency.

    Read the full bite: Browser Object Model: The Browser's Unruly API

30. Question 30 of 30

    What is the primary advantage of using CSS gradients for visual effects like button backgrounds over traditional image files?

    • aThey reduce HTTP requests and maintain quality across various screen resolutions.
    • bThey provide better browser compatibility across older web browsers.
    • cThey are exclusively used for background-image properties, simplifying styling.
    • dThey allow for more intricate and detailed visual patterns.
    Show the answer

    Answer: a · They reduce HTTP requests and maintain quality across various screen resolutions.

    The card states CSS gradients solve issues like added HTTP requests, increased page weight, and pixelation on high-DPI screens by generating effects directly in the browser. Option D is incorrect because the card advises against using gradients for complex, photorealistic textures.

    Read the full bite: CSS Gradients: Dynamic Images from Code