Top 30 Components Interview Questions and Answers

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

   For displaying long, scrolling lists of data in React Native, which component is recommended for optimal performance?

   • aA third-party library, as core components lack advanced list virtualization.
   • bA combination of View and Text components, managed with custom state.
   • cScrollView, as it provides basic scrolling functionality for all content.
   • dFlatList, because it efficiently renders only the items currently visible on screen.
   Show the answer

   Answer: d · FlatList, because it efficiently renders only the items currently visible on screen.

   FlatList is the recommended component for long lists because it optimizes performance by only rendering items currently visible on screen. ScrollView, while providing scrolling, renders all its children at once, which can lead to performance issues with extensive content.

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

2. Question 2 of 30

   Which accurately describes the two primary ways to define a React component?

   • aArrow functions and function declarations, with arrow functions being the modern standard
   • bComponents defined with state and components defined without state, which dictates the syntax required
   • cFunction components and class components, with function components being the standard for new React 19 code
   • dClass components and function components, but class components are deprecated and removed in React 19
   Show the answer

   Answer: c · Function components and class components, with function components being the standard for new React 19 code

   Function components and class components are the two distinct definition paradigms, and function components are the React 19 default. Arrow functions and function declarations are merely alternate syntaxes for the same function component paradigm, not separate ways to define components.

   Read the full bite: What are the two main ways to define a component in React?

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

   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)

6. Question 6 of 30

   In React, when is an early return with if/else preferable to an inline ternary inside JSX?

   • aWhen branches are large, structurally different, or to reduce nesting
   • bWhen both branches are short UI elements inside the parent return statement
   • cWhen conditionally including a single element without an else branch
   • dWhen preventing unnecessary re-renders requires stopping execution before hooks
   Show the answer

   Answer: a · When branches are large, structurally different, or to reduce nesting

   Early returns improve readability when branches are large, structurally different, or deeply nested. Option B actually describes when an inline ternary is the better choice, not an early return.

   Read the full bite: Describe two patterns for conditional rendering in JSX

7. Question 7 of 30

   What is the key behavioral difference between nesting Text inside Text versus nesting components inside a View?

   • aBoth inherit styles identically, so the distinction is purely cosmetic
   • bView children inherit all parent styles automatically, while Text children do not
   • cText inside Text inherits text styles like color and fontSize, while View children do not inherit styles
   • dNeither supports nesting; you must use a single flat component tree
   Show the answer

   Answer: c · Text inside Text inherits text styles like color and fontSize, while View children do not inherit styles

   Nested Text inherits text style properties from its parent Text, which is unique to text rendering. View does not propagate styles to its children, so each child View is styled independently.

   Read the full bite: View vs Text and nesting rules

8. Question 8 of 30

   What is the primary reason styles applied to a parent View component do not directly affect text within a child Text component?

   • aOnly global stylesheet definitions can influence the appearance of Text components without direct application.
   • bText components operate within a distinct "text world" where styles must be explicitly defined or nested.
   • cReact Native's styling engine prioritizes platform-specific text rendering over inherited CSS-like properties.
   • dView components are solely for layout and cannot transmit stylistic properties to text.
   Show the answer

   Answer: b · Text components operate within a distinct "text world" where styles must be explicitly defined or nested.

   The Text component creates a special "text world" with its own layout and styling rules, meaning styles from a parent View are not inherited. Instead, styles must be applied directly to the Text component itself or through nested Text components.

   Read the full bite: React Native's Text Component: Beyond Displaying Words

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

10. Question 10 of 30

    Why should icons in a developer-facing Figma system use a single flattened path without hardcoded fills?

    • aFlattening paths is required for Figma components to be published
    • bIt reduces the Figma file size enough to speed up the editor noticeably
    • cIt lets the icon inherit color in code via currentColor, supporting theming
    • dHardcoded fills are not exportable as SVG from Figma at all
    Show the answer

    Answer: c · It lets the icon inherit color in code via currentColor, supporting theming

    A single color-agnostic path lets the icon inherit its color through currentColor, so one icon serves multiple themes. Hardcoded fills can be exported but block recoloring; flattening is not required for publishing.

    Read the full bite: Building a scalable icon system in Figma

11. Question 11 of 30

    Which characteristic primarily explains why ScrollView is discouraged for long, dynamic lists?

    • aIts scrolling performance degrades due to complex layout calculations for many off-screen elements.
    • bIt struggles to update individual items efficiently when data changes.
    • cIt renders all its child components into a single view at once, consuming significant resources.
    • dIt does not provide built-in optimizations for displaying large numbers of similar items.
    Show the answer

    Answer: c · It renders all its child components into a single view at once, consuming significant resources.

    The card explicitly states that ScrollView renders every single item, even those off-screen, leading to poor performance and high memory consumption. This simultaneous rendering of all content is the fundamental limitation, while other options describe consequences or secondary issues.

    Read the full bite: ScrollView: For Simple, Bounded Content

12. Question 12 of 30

    What is the main advantage of using component variants in a design system?

    • aThey enable designers to quickly build entirely new UI components for unique, non-repeatable design patterns.
    • bThey allow a single base component to represent many different forms by adjusting its properties.
    • cThey enforce strict design rules by preventing designers from making any custom modifications to components.
    • dThey automatically generate the necessary front-end code for all component states, sizes, and styles.
    Show the answer

    Answer: b · They allow a single base component to represent many different forms by adjusting its properties.

    The card states that variants allow "one core component to serve multiple, predictable purposes" by defining "properties and their possible values." This directly aligns with option B. Option A is incorrect because variants are for managing variations of existing components for repeatable patterns, not for creating new or unique, non-repeatable elements.

    Read the full bite: Component Variants: One Component, Many Forms

13. Question 13 of 30

    Which statement accurately describes a fundamental principle of using props in Vue components?

    • aProps are the primary mechanism for a child component to send data back to its parent.
    • bA child component must never directly mutate a prop it receives from its parent.
    • cProps should always be declared using a simple array of strings for maximum flexibility.
    • dProps enable a child component to directly modify data in its parent.
    Show the answer

    Answer: b · A child component must never directly mutate a prop it receives from its parent.

    The card explicitly states that a critical rule is to 'never mutate a prop directly inside the child component,' emphasizing the one-way data flow principle. Options A and B describe incorrect data flow patterns, while option C suggests a less robust declaration method than recommended.

    Read the full bite: Vue Component Props: Passing Data Downstream

14. Question 14 of 30

    For which use case would a controlled component be the most appropriate choice?

    • aA simple form input where the value is only retrieved on submission.
    • bAn accordion where opening one panel automatically closes all others.
    • cA component with complex internal state logic that doesn't affect siblings.
    • dA self-contained UI element whose state changes are isolated.
    Show the answer

    Answer: b · An accordion where opening one panel automatically closes all others.

    The card explicitly states that an accordion where expanding one panel collapses others is a canonical example requiring controlled components to coordinate state and maintain a single source of truth. Options A, B, and D describe scenarios where uncontrolled components are generally preferred because their state is self-contained or only needed at specific times, reducing boilerplate for the parent.

    Read the full bite: Controlled vs. Uncontrolled Components

15. Question 15 of 30

    Which approach should a child component use when it needs to change data received from its parent via props?

    • aDeclare a two-way binding so the prop syncs back to the parent automatically.
    • bMutate the prop directly and let the parent detect the change.
    • cUse a global state store to overwrite the parent's original variable.
    • dEmit an event or invoke a callback to ask the parent to update the data.
    Show the answer

    Answer: d · Emit an event or invoke a callback to ask the parent to update the data.

    The child should treat props as read-only and request changes through events or callbacks, preserving unidirectional data flow and predictable state ownership. Directly mutating the prop (option B) breaks the explicit contract and makes debugging difficult because the parent loses control over its own state.

    Read the full bite: Primary mechanism for passing data from parent to child component

16. Question 16 of 30

    When a child must notify its parent of a new search query, which approach preserves proper encapsulation in Vue and Angular?

    • aThe child receives a callback prop in Vue or calls a parent method through dependency injection in Angular.
    • bThe child dispatches the value through a global event bus in Vue or uses [(ngModel)] two-way binding in Angular.
    • cThe child declares an event via defineEmits in Vue or @Output EventEmitter in Angular and emits the query upward.
    • dThe child directly assigns the new value to a property on the parent instance or shared service.
    Show the answer

    Answer: c · The child declares an event via defineEmits in Vue or @Output EventEmitter in Angular and emits the query upward.

    Emitting a named, typed event through defineEmits or @Output/EventEmitter keeps the parent in control of state and follows framework conventions. Option D is tempting because direct mutation seems efficient, but it violates unidirectional data flow and breaks component encapsulation.

    Read the full bite: How do you emit events from a child to parent component?

17. Question 17 of 30

    Which statement accurately describes data passed to an Angular component using the input() function?

    • aIt is primarily designed for the child component to send data back to its parent.
    • bThe child component can directly update the input value, and the parent will be notified.
    • cIt establishes a two-way data binding, allowing both parent and child to modify the value.
    • dThe child component receives a read-only signal, preventing it from directly modifying the data.
    Show the answer

    Answer: d · The child component receives a read-only signal, preventing it from directly modifying the data.

    The card explicitly states that the `input()` function returns a "read-only signal" and that "the child cannot modify its own input." This enforces a one-way data flow from parent to child, making options suggesting two-way binding or child modification incorrect.

    Read the full bite: Angular's input() Function: Passing Data to Components

18. Question 18 of 30

    Why must every Activity, Service, BroadcastReceiver, and ContentProvider be declared in AndroidManifest.xml?

    • aTo declare which dangerous permissions the user must grant at runtime before each component launches
    • bTo enable the Android system to discover, instantiate, and route requests to them at install time
    • cTo provide the build system with the applicationId and target SDK for APK generation
    • dTo let the Play Store filter downloads by required hardware features like camera or GPS
    Show the answer

    Answer: b · To enable the Android system to discover, instantiate, and route requests to them at install time

    The manifest serves as the install-time contract with the Android system, allowing it to know what components exist and how to route intents to them. Option A is tempting because permissions are listed in the manifest, but declaring components is unrelated to runtime permission requests and the manifest is read by the system, not just used for runtime checks.

    Read the full bite: What is AndroidManifest.xml and what key elements does it declare?

19. Question 19 of 30

    You are building a responsive Figma card with Auto Layout that must fill its container width and expand vertically when the description text grows. Which setup achieves this?

    • aNest the text in a vertical Auto Layout frame with hug height, set the parent to hug contents vertically, and use absolute positioning for the image
    • bPlace all elements in a single flat vertical Auto Layout, set the text layers to fixed height, and set the parent to fill container width
    • cNest the headline and description in a vertical Auto Layout frame with hug height, set the parent card to hug contents vertically and fill container horizontally, and set the image to fill width
    • dSet the parent card to fixed height, nest the text with hug height, and set the image to fill width
    Show the answer

    Answer: c · Nest the headline and description in a vertical Auto Layout frame with hug height, set the parent card to hug contents vertically and fill container horizontally, and set the image to fill width

    Nesting the text in a hug-height frame allows the parent to expand vertically as copy grows, while fill-width on the image and fill-container on the parent handle horizontal responsiveness. Option D is tempting because fixed height seems to help grid alignment, but it prevents the card from growing and will clip content when the text expands.

    Read the full bite: How do you build a responsive card with Auto Layout?

20. Question 20 of 30

    Which best explains why two-way binding syntax in Vue and Angular is considered syntactic sugar rather than true bidirectional flow?

    • aIt expands into a one-way property binding plus an event binding so the parent can update its own state.
    • bIt creates a dedicated two-way reactive tunnel that bypasses normal props and events.
    • cIt relies on framework-level watchers to detect changes and silently update the parent property.
    • dIt allows the child component to directly mutate the parent's bound property without an explicit event.
    Show the answer

    Answer: a · It expands into a one-way property binding plus an event binding so the parent can update its own state.

    v-model sugars value and input while ngModel sugars a property binding and ngModelChange, preserving unidirectional data flow by requiring the parent to handle the event and mutate canonical state. The first option is wrong because the child never directly mutates the parent; it only emits a change notification.

    Read the full bite: What bindings do v-model and ngModel sugar, and why?

21. Question 21 of 30

    Which configuration lets a Figma button with an icon and text automatically resize when the label changes?

    • aUse grid auto layout on the icon and text with a fixed-width button frame
    • bApply horizontal auto layout, set text and frame to hug contents, and use fixed padding
    • cSet the text to fill container and the frame to a fixed width with no auto layout
    • dGroup the icon and text, then manually nudge elements when the label changes
    Show the answer

    Answer: b · Apply horizontal auto layout, set text and frame to hug contents, and use fixed padding

    Horizontal auto layout with hug contents on the text and parent frame lets the button expand or shrink dynamically as the label changes, while fixed padding keeps spacing consistent. Grouping layers and manually nudging them is wrong because the layout breaks as soon as the text is edited, defeating the purpose of a responsive component.

    Read the full bite: How would you use Auto Layout for a button with optional icon?

22. Question 22 of 30

    When content is projected into a Vue slot, what is true regarding its data scope?

    • aIt can access data properties defined within the child component where the slot is located.
    • bIt can access data properties from both the parent and the child components simultaneously.
    • cIt can access data properties defined within the parent component that provides the content.
    • dIt operates in an isolated scope, unable to access data from either the parent or child.
    Show the answer

    Answer: c · It can access data properties defined within the parent component that provides the content.

    The card explicitly states that "the slot content is defined in the parent, so it has access to the parent's data scope, not the child's." This means expressions within the slot content resolve against the parent's data, not the child's.

    Read the full bite: Vue Slots: Projecting Content into Components

23. Question 23 of 30

    In a reusable DataList component, what is the primary architectural benefit of using scoped slots instead of having the parent manage the iteration?

    • aIt allows the child to own data fetching, filtering, and iteration while the parent controls only the visual template for each row.
    • bIt eliminates the need for the child to hold any state, since all data logic moves to the parent.
    • cIt lets the parent access the child's internal variables directly inside projected content without explicit prop passing.
    • dIt improves rendering performance by avoiding the creation of separate component instances for each row.
    Show the answer

    Answer: a · It allows the child to own data fetching, filtering, and iteration while the parent controls only the visual template for each row.

    Scoped slots preserve encapsulation by keeping data fetching and iteration inside the child while letting the parent determine markup. Option C is a common misconception because slot content uses lexical scope and cannot see child data unless the child explicitly exposes it through slot props or template context.

    Read the full bite: Implement a scoped slot pattern in a reusable DataList

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

25. Question 25 of 30

    Which statement accurately describes a critical behavior or limitation of Angular's ng-content?

    • aIt allows for dynamic addition or removal of content slots at runtime based on component logic.
    • bIt can only be used to project plain HTML elements, not other Angular components.
    • cIt always instantiates and renders the projected content, even if the ng-content element is hidden by a conditional directive.
    • dIt prevents the parent component from passing any data to the projected content.
    Show the answer

    Answer: c · It always instantiates and renders the projected content, even if the ng-content element is hidden by a conditional directive.

    The card explicitly warns that 'Angular always instantiates the projected content, even if the <ng-content> tag is inside a hidden block,' making it a performance concern with conditional directives. A common misconception is that conditional directives like @if would prevent rendering, but for projected content, this is not the case.

    Read the full bite: Angular Content Projection with ng-content

26. Question 26 of 30

    Which method correctly architects a responsive Figma nav bar to preserve component links and handle breakpoint-specific layouts without detaching instances?

    • aUse absolute positioning for all elements across breakpoints to avoid Auto Layout resizing conflicts.
    • bBuild separate desktop and mobile components to isolate responsive behaviors and simplify overrides.
    • cCreate one component set with variants, horizontal Auto Layout with wrap for links, and a nested vertical overlay for mobile.
    • dDuplicate the nav frame per breakpoint and detach instances to edit link visibility and spacing independently.
    Show the answer

    Answer: c · Create one component set with variants, horizontal Auto Layout with wrap for links, and a nested vertical overlay for mobile.

    A single variant-driven component set with Auto Layout preserves maintainability and link propagation across states, whereas creating separate components breaks those links and creates maintenance debt.

    Read the full bite: Structure a responsive nav bar using variants and Auto Layout

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

28. Question 28 of 30

    When would you primarily use Svelte slot props?

    • aTo allow a child component to define the visual appearance of its content while the parent supplies the data.
    • bWhen a child component needs to trigger a method in its parent component based on an internal event.
    • cWhen a parent needs to pass a complex object as a prop to a child component's default slot.
    • dTo enable a generic child component to provide data for each item, letting the parent customize the rendering of those items.
    Show the answer

    Answer: d · To enable a generic child component to provide data for each item, letting the parent customize the rendering of those items.

    Slot props allow a child component to pass its internal data up to the parent for custom rendering, enabling the parent to control the presentation of items managed by the child. Option A describes the inverse control flow, where the child defines rendering and the parent supplies data, which is not the primary purpose of slot props.

    Read the full bite: Svelte Slot Props: Child Informs, Parent Renders

29. Question 29 of 30

    You need a single button instance to switch between default, hover, and disabled states automatically. What should you do?

    • aBuild a component set with a State property and wire Change to interactions between variants
    • bCreate three separate components and manually swap the instance on the canvas
    • cUse auto-layout on one frame to cycle through the different state layers
    • dDuplicate the button frame on the canvas and link them with overlay interactions
    Show the answer

    Answer: a · Build a component set with a State property and wire Change to interactions between variants

    Component sets group related states under one property, and Change to interactions let an instance switch variants automatically without manual swaps. Option B is wrong because separate components create duplication and require designers to swap instances by hand, which is exactly the red flag the card warns against.

    Read the full bite: Create a button component with default, hover, and disabled variants

30. Question 30 of 30

    Which scenario represents an anti-pattern when utilizing Angular's ViewEncapsulation.None?

    • aEnsuring true, bulletproof style isolation for a widely distributed library component.
    • bSupporting legacy browsers that do not fully implement the native Shadow DOM specification.
    • cApplying global base styles and CSS variables from the root application component.
    • dOverriding the default styles of a child component directly from its parent component.
    Show the answer

    Answer: d · Overriding the default styles of a child component directly from its parent component.

    The card explicitly states, "Do not use ViewEncapsulation.None to override a child component's styles from a parent. This is an anti-pattern." Option C describes a valid, albeit sparing, use case for None. Options C and D relate to considerations for ShadowDom encapsulation, not None.

    Read the full bite: Angular View Encapsulation: Walling Off Your Component Styles