---
title: "React Fundamentals: Components, Hooks & State Management"
description: "Master React basics: components, JSX, hooks (useState, useEffect), state management, props, and event handling. Build modern interactive UIs with React."
author: "Mohammad Abu Mattar"
canonical: https://mkabumattar.com/quizzes/post/react-fundamentals-quiz
---

# React Fundamentals: Components, Hooks & State Management

Welcome to the React Fundamentals Quiz! This quiz will test your knowledge of core React concepts, including components, JSX, hooks, state management, props, and event handling. Whether you're new to React or looking to solidify your understanding of the basics, this quiz is designed to challenge you and help you master the fundamentals of building modern interactive UIs with React. Good luck!

## Questions

### 1. What is JSX?

- **A syntax extension that allows writing HTML-like code within JavaScript** ✅
  - JSX: <div>Hello</div> in JavaScript. Compiles to React.createElement(). Makes code readable.
- A specialized templating engine used to generate static HTML documents
  - JSX is JavaScript extension, not a template engine.
- The official JavaScript XML standard used for backend data processing
  - While JSX stands for "JavaScript XML", it's a React-specific syntax.
- A CSS-in-JS library used for defining component styles and animations
  - JSX is for UI structure.

**Hint:** Think about HTML-like syntax in JavaScript.

### 2. What is a React component?

- **A reusable JavaScript function or class that returns a JSX structure** ✅
  - Components: functions (preferred) or classes. Return JSX. Take props as input.
- A scoped CSS module used to apply specific styles to HTML elements
  - Components are JavaScript; CSS is separate.
- A static template file used to define the fixed layout of a web page
  - Components are JavaScript functions/classes.
- An external React plugin used to extend the functionality of the DOM
  - Components are core to React.

**Hint:** Think about reusable UI building blocks.

### 3. What is a functional component vs. class component?

- **Functional components use hooks; class components use lifecycle methods** ✅
  - Functional: simple, hooks-based. Class: complex, use lifecycle methods. Modern React uses functional.
- Class components are the newer standard replacing functional components
  - Functional is newer (with hooks added 2019).
- Functional components are compiled while class components are interpreted
  - Different syntax; functional now preferred.
- Both types are identical in syntax and only differ in their file extensions
  - Both can be tested.

**Hint:** Think about two ways to write React components.

### 4. What are props in React?

- **Read-only data passed from a parent component down to a child component** ✅
  - Props are immutable. Child receives via function argument or this.props. Unidirectional data flow.
- Mutable data variables that are managed locally within a single component
  - Props are read-only input; state is mutable.
- Global application variables accessible by every component in the tree
  - Props are component-specific, passed explicitly.
- A collection of mandatory event listeners required for every UI element
  - Props are optional.

**Hint:** Think about passing data to components.

### 5. What is React state?

- **Internal data managed by a component that triggers updates when changed** ✅
  - State: useState hook. Changing state triggers re-render. Never mutate directly.
- Immutable input data received from a parent component via props attributes
  - State is mutable, local; props are immutable inputs.
- A global storage system used to sync data between different user sessions
  - State is local to component (use context/Redux for global).
- A CSS property used to track the hover or active status of HTML elements
  - State is JavaScript data.

**Hint:** Think about mutable component data.

### 6. What is useState hook?

- **A hook used to add and manage local state within functional components** ✅
  - useState returns: current value, setter function. Setter triggers re-render.
- A method used to declare static constants that never change across renders
  - useState is for mutable state.
- A lifecycle method used exclusively within legacy React class components
  - Hooks are for functional components.
- A deprecated feature that has been removed from the React 18 core library
  - useState is current standard.

**Hint:** Think about managing state in functional components.

### 7. What is useEffect hook?

- **A hook used for handling side effects like data fetching or DOM updates** ✅
  - useEffect(fn, deps). Runs after render. Deps array controls when it runs. Replaces lifecycle methods.
- A function used to directly update the component state during rendering
  - That's useState; useEffect is for side effects.
- A tool that ensures a specific function only ever executes a single time
  - Runs based on dependency array.
- A synchronous operation used to block the browser until data is received
  - useEffect is asynchronous by design.

**Hint:** Think about side effects like API calls.

### 8. What is the dependency array in useEffect?

- **A list of values that determines when the effect should re-run its logic** ✅
  - useEffect(fn, []): runs once (mount). useEffect(fn, [x]): runs when x changes. useEffect(fn): runs every render.
- An array of state variables that are protected from being updated by hooks
  - It's a dependency list, not state list.
- A mandatory collection of all props received by the current UI component
  - Optional, but should use it.
- A specialized internal array used by React to handle component unmounting
  - Dependency array controls execution, not cleanup.

**Hint:** Think about controlling when an effect runs.

### 9. What is event handling in React?

- **The process of attaching functions to UI events like onClick or onChange** ✅
  - React event syntax: camelCase. onClick={fn}, onChange={fn}. Synthetic events, not DOM events.
- A method for manually attaching event listeners to the browser DOM nodes
  - React abstracts with synthetic events.
- A feature used exclusively for handling submissions within HTML form tags
  - Events for any interactive element.
- A system that requires the use of the native addEventListener JS function
  - React handles through JSX attributes.

**Hint:** Think about responding to user interactions.

### 10. What is conditional rendering in React?

- **Displaying specific JSX based on logic using ternary or logical operators** ✅
  - Patterns: {condition ? <A /> : <B />} or {condition && <A />}
- Using the CSS display property to hide or show existing HTML elements
  - While similar, conditional rendering is JavaScript logic.
- A process that only allows the use of standard if-else statement blocks
  - Multiple patterns available.
- A technique that keeps all elements in the DOM regardless of their visibility
  - Conditionally rendered elements aren't in the DOM.

**Hint:** Think about showing/hiding elements based on conditions.

### 11. What is list rendering in React?

- **Generating multiple UI elements from an array using the .map() method** ✅
  - {items.map(item => <li key={item.id}>{item.name}</li>)}. Keys help React identify which items changed.
- Using standard for-loops to push JSX elements into a local result array
  - For loops aren't allowed directly in JSX; use .map().
- A method that only works for displaying static data that never changes
  - Lists can be dynamic.
- A specific React feature used only for rendering HTML table structures
  - .map() works for any list.

**Hint:** Think about rendering multiple elements from an array.

### 12. What are keys in React lists?

- **Unique identifiers that help React track and update specific list items** ✅
  - Keys: use ID, not index (breaks when list reorders). Without keys, performance degrades, state gets confused.
- A standard HTML id attribute used for selecting elements in CSS or JS
  - While related, keys are React-specific.
- An optional optimization that only affects the performance of the app
  - Keys are important for correctness, not just performance.
- A value that should always be set to the current array index of the item
  - Using index causes bugs when list reorders.

**Hint:** Think about identifying elements for React optimization.

### 13. What is the virtual DOM in React?

- **An in-memory representation of the DOM used to calculate efficient updates** ✅
  - Virtual DOM speeds up updates by batching changes. React compares old/new virtual DOM, updates only changed elements.
- A mirrored copy of the real DOM used exclusively for automated unit testing
  - Virtual DOM is an optimization, not just for testing.
- A browser API that allows developers to manipulate DOM nodes directly
  - Virtual DOM is abstraction for performance.
- A development tool that only operates when running React in debug mode
  - Virtual DOM used in production.

**Hint:** Think about how React optimizes updates.

### 14. What is lifting state up?

- **Moving shared state to a common parent component to sync sibling data** ✅
  - Child1 and Child2 share parent state. Parent passes state + setter via props. Enables synchronization.
- Injecting local component state into an external CSS-in-JS styling library
  - That's state management library; lifting state is React pattern.
- The process of converting all local component state into global context
  - Lifting state is local solution.
- A mandatory React pattern required for every application during build
  - Pattern used when needed.

**Hint:** Think about sharing state between sibling components.

### 15. What are controlled components?

- **Form elements whose values are managed and updated by React state** ✅
  - <input value={value} onChange={e => setValue(e.target.value)} />. React is source of truth.
- UI components that do not accept any user input or interactive events
  - Typically used for forms.
- Elements that rely on the native DOM refs to manage their internal values
  - Opposite; controlled has state.
- A specific type of component that is protected from triggering re-renders
  - Uncontrolled (refs) can work but controlled preferred.

**Hint:** Think about form inputs with state.

### 16. What is React Context?

- **An API for sharing state across the component tree without prop drilling** ✅
  - Context: createContext, Provider, useContext. Solves prop drilling for global data (theme, user, language).
- An external library used for managing complex application side effects
  - Context is built-in; Redux is external.
- A specialized tool used only for building very large enterprise applications
  - Useful in any app.
- A feature that completely replaces the need for using props in React
  - Context supplements, not replaces props.

**Hint:** Think about avoiding prop drilling.

### 17. What is component composition?

- **Designing UIs by combining multiple smaller components into a larger unit** ✅
  - Composition > inheritance (React prefers composition). Build complex from simple reusable components.
- The practice of using class inheritance to share logic between components
  - React uses composition, rarely inheritance.
- A method for defining component structures using only external CSS files
  - That's CSS; this is component structure.
- An optimization technique used to reduce the size of the final JS bundle
  - Composition is best practice but performance depends on implementation.

**Hint:** Think about building complex UIs from simple components.

### 18. What is React lazy loading / code splitting?

- **Asynchronously loading components only when they are needed by the user** ✅
  - React.lazy() + Suspense: load heavy components on-demand, show fallback while loading. Reduces bundle size.
- Artificially delaying the render of a component to improve perceived speed
  - While related, lazy loading is code splitting.
- A technique used to load all application assets at the initial page load
  - Helpful for any app with multiple routes.
- A feature that requires the installation of the Webpack optimization plugin
  - Built into React.

**Hint:** Think about loading components only when needed.

### 19. What is React Fragment?

- **A tool for grouping multiple elements without adding extra nodes to the DOM** ✅
  - <div><A /><B /></div> becomes <><A /><B /></>. Avoids extra DOM nodes, cleaner HTML.
- A method for splitting a large component into several smaller sub-sections
  - Fragment is grouping, not splitting.
- A specialized div element used to apply grid or flexbox styles to children
  - Fragment doesn't create DOM node.
- A technique for rendering only a small piece of a much larger data set
  - Fragment is structural.

**Hint:** Think about grouping multiple elements without wrapper div.

### 20. What is React StrictMode?

- **A development tool that highlights potential problems in an application** ✅
  - <StrictMode> wraps app in development, doubles render to catch bugs, doesn't affect production.
- A production security feature that prevents cross-site scripting attacks
  - Development-only tool.
- A mode that prevents all runtime errors from crashing the browser tab
  - Highlights issues; not prevention.
- A mandatory configuration required for publishing apps to the internet
  - Optional but recommended.

**Hint:** Think about development-only warnings and checks.

### 21. What is the React developer tools?

- **A browser extension for inspecting the component tree and tracking state** ✅
  - React DevTools: inspect components, track state changes, profile performance. Available for Chrome, Firefox.
- A command-line interface tool used to create and scaffold new React apps
  - DevTools is browser-based.
- A built-in console window that appears automatically during render errors
  - Works in production too (with some limitations).
- A cloud-based service used to monitor the performance of production apps
  - Essential debugging tool.

**Hint:** Think about debugging React in the browser.

### 22. What is React reconciliation?

- **The algorithm React uses to diff the virtual DOM and update the real DOM** ✅
  - Reconciliation: React's diffing algorithm. Identifies minimal DOM changes for optimal performance.
- A process for resolving code conflicts during a git merge or pull request
  - That's version control; reconciliation is React DOM updates.
- A method for merging multiple state objects into a single global store
  - Reconciliation is diffing and updating.
- The manual process of updating DOM nodes using the querySelector API
  - React automates reconciliation.

**Hint:** Think about how React updates the DOM.

### 23. What is the key difference between React and vanilla JavaScript?

- **React is declarative (UI-focused) while vanilla JS is imperative (DOM-focused)** ✅
  - React: "What should it look like?"; Vanilla: "How do I update DOM?" React handles rendering optimization.
- React code executes much slower than standard vanilla JavaScript logic
  - React's optimization often makes it faster.
- They are identical tools that only differ in their branding and naming
  - Different approaches.
- Vanilla JavaScript requires the use of a virtual DOM to render UI nodes
  - React better for complex, interactive UIs.

**Hint:** Think about declarative vs. imperative.

### 24. What is useCallback hook?

- **A hook that memoizes functions to prevent unnecessary child re-renders** ✅
  - useCallback(fn, deps). Prevents unnecessary re-renders of child components receiving callback as prop.
- A method for updating state variables within functional component bodies
  - useState manages state; useCallback memoizes functions.
- A specialized tool used for catching and handling rendering error events
  - That's error boundaries; useCallback is optimization.
- A mandatory hook required for every function passed to a button element
  - Optional; use when passing callbacks to optimized children.

**Hint:** Think about memoizing callback functions.

### 25. What is useMemo hook?

- **A hook that memoizes expensive calculations to avoid repeating them** ✅
  - useMemo(() => expensiveCalculation(), [deps]). Returns memoized result. Use sparingly; adds overhead.
- A function that manages the execution of asynchronous side effect logic
  - useEffect handles side effects; useMemo caches values.
- A specialized component used to wrap and optimize individual JSX nodes
  - That's React.memo; useMemo is for value memoization.
- A performance feature that is automatically applied to every variable
  - Can add overhead; benchmark before using.

**Hint:** Think about caching expensive calculations.

### 26. What is useRef hook?

- **A hook for creating persistent references that do not trigger re-renders** ✅
  - useRef for: DOM access (ref={ref}), storing mutable data. Current property holds actual value.
- A tool for managing component state that updates the UI on every change
  - useState triggers re-render; useRef does not.
- A specialized hook used for applying inline styles to functional components
  - useRef is for references, not styling.
- A feature designed exclusively for handling values within HTML form tags
  - useRef has multiple uses.

**Hint:** Think about accessing DOM elements directly.

### 27. What are custom hooks?

- **Functions that combine built-in hooks to share logic between components** ✅
  - Custom hooks: functions starting with "use". Examples: useLocalStorage, useFetch, useDebounce. Promote code reuse.
- A set of official hooks that are provided directly by the React library
  - Custom hooks are user-defined using built-in hooks.
- A feature that is only used to manage state in large-scale applications
  - Useful for any app.
- A specialized tool that requires the use of the legacy class syntax
  - Custom hooks are your own function.

**Hint:** Think about reusing stateful logic.

### 28. What is React.memo?

- **A higher-order component that prevents re-rendering if props are unchanged** ✅
  - React.memo(Component). Shallow prop comparison. Use for expensive renders. Similar to PureComponent class.
- A standard hook like useState used to manage component-level data state
  - React.memo is HOC, not hook.
- The same feature as the useMemo hook but used for functional components
  - React.memo memoizes component; useMemo memoizes value.
- A mandatory wrapper required for every component defined in a React app
  - Use only when re-renders become expensive.

**Hint:** Think about preventing unnecessary re-renders of pure components.

### 29. What are PropTypes?

- **A library for checking the data types of props during the app runtime** ✅
  - PropTypes: PropTypes.string, PropTypes.number, PropTypes.func. Development-only checks. TypeScript alternative.
- A static type system that prevents code compilation during type errors
  - PropTypes is runtime; TypeScript is static.
- A mandatory feature required for running React apps in production mode
  - Warnings only in development; stripped from production.
- A tool used exclusively for managing state within class-based components
  - Works with functional and class components.

**Hint:** Think about type-checking component props at runtime.

### 30. What is an Error Boundary?

- **A class component that catches JavaScript errors in its child components** ✅
  - Error Boundaries: use componentDidCatch(). Catch rendering, lifecycle, constructor errors. Display fallback UI.
- A standard try-catch block used inside functional component render logic
  - try-catch misses React errors; Error Boundaries are React-specific.
- A specialized hook provided by React to handle asynchronous error events
  - Error Boundaries must be class components.
- A tool that automatically resolves and fixes all runtime JavaScript bugs
  - Only catches rendering errors; network errors, event handlers need try-catch.

**Hint:** Think about catching rendering errors in child components.

### 31. What is the purpose of React Suspense?

- **A component that shows a fallback UI while waiting for content to load** ✅
  - <Suspense fallback={<Loader />}><LazyComponent /></Suspense>. Works with lazy(), fetch API, server rendering.
- An external library used to manage complex data loading and caching logic
  - Suspense is built-in React component.
- A feature used exclusively for loading heavy image and video assets
  - Also works with async operations.
- A mandatory React wrapper required for every single route in the app
  - Optional; use when async operations present.

**Hint:** Think about handling loading states for lazy components.