---
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
- A specialized templating engine used to generate static HTML documents
- The official JavaScript XML standard used for backend data processing
- A CSS-in-JS library used for defining component styles and animations

**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
- A scoped CSS module used to apply specific styles to HTML elements
- A static template file used to define the fixed layout of a web page
- An external React plugin used to extend the functionality of the DOM

**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
- Class components are the newer standard replacing functional components
- Functional components are compiled while class components are interpreted
- Both types are identical in syntax and only differ in their file extensions

**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
- Mutable data variables that are managed locally within a single component
- Global application variables accessible by every component in the tree
- A collection of mandatory event listeners required for every UI element

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

### 5. What is React state?

- Internal data managed by a component that triggers updates when changed
- Immutable input data received from a parent component via props attributes
- A global storage system used to sync data between different user sessions
- A CSS property used to track the hover or active status of HTML elements

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

### 6. What is useState hook?

- A hook used to add and manage local state within functional components
- A method used to declare static constants that never change across renders
- A lifecycle method used exclusively within legacy React class components
- A deprecated feature that has been removed from the React 18 core library

**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
- A function used to directly update the component state during rendering
- A tool that ensures a specific function only ever executes a single time
- A synchronous operation used to block the browser until data is received

**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
- An array of state variables that are protected from being updated by hooks
- A mandatory collection of all props received by the current UI component
- A specialized internal array used by React to handle component unmounting

**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
- A method for manually attaching event listeners to the browser DOM nodes
- A feature used exclusively for handling submissions within HTML form tags
- A system that requires the use of the native addEventListener JS function

**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
- Using the CSS display property to hide or show existing HTML elements
- A process that only allows the use of standard if-else statement blocks
- A technique that keeps all elements in the DOM regardless of their visibility

**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
- Using standard for-loops to push JSX elements into a local result array
- A method that only works for displaying static data that never changes
- A specific React feature used only for rendering HTML table structures

**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
- A standard HTML id attribute used for selecting elements in CSS or JS
- An optional optimization that only affects the performance of the app
- A value that should always be set to the current array index of the item

**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
- A mirrored copy of the real DOM used exclusively for automated unit testing
- A browser API that allows developers to manipulate DOM nodes directly
- A development tool that only operates when running React in debug mode

**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
- Injecting local component state into an external CSS-in-JS styling library
- The process of converting all local component state into global context
- A mandatory React pattern required for every application during build

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

### 15. What are controlled components?

- Form elements whose values are managed and updated by React state
- UI components that do not accept any user input or interactive events
- Elements that rely on the native DOM refs to manage their internal values
- A specific type of component that is protected from triggering re-renders

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

### 16. What is React Context?

- An API for sharing state across the component tree without prop drilling
- An external library used for managing complex application side effects
- A specialized tool used only for building very large enterprise applications
- A feature that completely replaces the need for using props in React

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

### 17. What is component composition?

- Designing UIs by combining multiple smaller components into a larger unit
- The practice of using class inheritance to share logic between components
- A method for defining component structures using only external CSS files
- An optimization technique used to reduce the size of the final JS bundle

**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
- Artificially delaying the render of a component to improve perceived speed
- A technique used to load all application assets at the initial page load
- A feature that requires the installation of the Webpack optimization plugin

**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
- A method for splitting a large component into several smaller sub-sections
- A specialized div element used to apply grid or flexbox styles to children
- A technique for rendering only a small piece of a much larger data set

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

### 20. What is React StrictMode?

- A development tool that highlights potential problems in an application
- A production security feature that prevents cross-site scripting attacks
- A mode that prevents all runtime errors from crashing the browser tab
- A mandatory configuration required for publishing apps to the internet

**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
- A command-line interface tool used to create and scaffold new React apps
- A built-in console window that appears automatically during render errors
- A cloud-based service used to monitor the performance of production apps

**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
- A process for resolving code conflicts during a git merge or pull request
- A method for merging multiple state objects into a single global store
- The manual process of updating DOM nodes using the querySelector API

**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 code executes much slower than standard vanilla JavaScript logic
- They are identical tools that only differ in their branding and naming
- Vanilla JavaScript requires the use of a virtual DOM to render UI nodes

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

### 24. What is useCallback hook?

- A hook that memoizes functions to prevent unnecessary child re-renders
- A method for updating state variables within functional component bodies
- A specialized tool used for catching and handling rendering error events
- A mandatory hook required for every function passed to a button element

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

### 25. What is useMemo hook?

- A hook that memoizes expensive calculations to avoid repeating them
- A function that manages the execution of asynchronous side effect logic
- A specialized component used to wrap and optimize individual JSX nodes
- A performance feature that is automatically applied to every variable

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

### 26. What is useRef hook?

- A hook for creating persistent references that do not trigger re-renders
- A tool for managing component state that updates the UI on every change
- A specialized hook used for applying inline styles to functional components
- A feature designed exclusively for handling values within HTML form tags

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

### 27. What are custom hooks?

- Functions that combine built-in hooks to share logic between components
- A set of official hooks that are provided directly by the React library
- A feature that is only used to manage state in large-scale applications
- A specialized tool that requires the use of the legacy class syntax

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

### 28. What is React.memo?

- A higher-order component that prevents re-rendering if props are unchanged
- A standard hook like useState used to manage component-level data state
- The same feature as the useMemo hook but used for functional components
- A mandatory wrapper required for every component defined in a React app

**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
- A static type system that prevents code compilation during type errors
- A mandatory feature required for running React apps in production mode
- A tool used exclusively for managing state within class-based 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
- A standard try-catch block used inside functional component render logic
- A specialized hook provided by React to handle asynchronous error events
- A tool that automatically resolves and fixes all runtime JavaScript bugs

**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
- An external library used to manage complex data loading and caching logic
- A feature used exclusively for loading heavy image and video assets
- A mandatory React wrapper required for every single route in the app

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