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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Quizzes

Prev in FrontendJavaScript: Language Fundamentals & Modern Features Next in FrontendResponsive Web Design: Mobile-First & Breakpoints

Frontend React JavaScript

React Fundamentals: Components, Hooks & State Management

Mohammad Abu Mattar20 QuestionsBeginnerPublished: 03 Mar, 2026

Markdown for AI

React Fundamentals: Components, Hooks & State Management

Up to 20 questions, shuffled on every run

Quiz Configuration

Enterto start

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!

Answer key and explanations20 questions

The quiz above draws 20 questions at random from these 31, so a second attempt will not be the same run. Everything in the pool is listed here.

What is JSX?
AnswerA syntax extension that allows writing HTML-like code within JavaScript
What is a React component?
AnswerA reusable JavaScript function or class that returns a JSX structure
What is a functional component vs. class component?
AnswerFunctional components use hooks; class components use lifecycle methods
What are props in React?
AnswerRead-only data passed from a parent component down to a child component
What is React state?
AnswerInternal data managed by a component that triggers updates when changed
What is useState hook?
AnswerA hook used to add and manage local state within functional components
What is useEffect hook?
AnswerA hook used for handling side effects like data fetching or DOM updates
What is the dependency array in useEffect?
AnswerA list of values that determines when the effect should re-run its logic
What is event handling in React?
AnswerThe process of attaching functions to UI events like onClick or onChange
What is conditional rendering in React?
AnswerDisplaying specific JSX based on logic using ternary or logical operators
What is list rendering in React?
AnswerGenerating multiple UI elements from an array using the .map() method
What are keys in React lists?
AnswerUnique identifiers that help React track and update specific list items
What is the virtual DOM in React?
AnswerAn in-memory representation of the DOM used to calculate efficient updates
What is lifting state up?
AnswerMoving shared state to a common parent component to sync sibling data
What are controlled components?
AnswerForm elements whose values are managed and updated by React state
What is React Context?
AnswerAn API for sharing state across the component tree without prop drilling
What is component composition?
AnswerDesigning UIs by combining multiple smaller components into a larger unit
What is React lazy loading / code splitting?
AnswerAsynchronously loading components only when they are needed by the user
What is React Fragment?
AnswerA tool for grouping multiple elements without adding extra nodes to the DOM
What is React StrictMode?
AnswerA development tool that highlights potential problems in an application
What is the React developer tools?
AnswerA browser extension for inspecting the component tree and tracking state
What is React reconciliation?
AnswerThe algorithm React uses to diff the virtual DOM and update the real DOM
What is the key difference between React and vanilla JavaScript?
AnswerReact is declarative (UI-focused) while vanilla JS is imperative (DOM-focused)
What is useCallback hook?
AnswerA hook that memoizes functions to prevent unnecessary child re-renders
What is useMemo hook?
AnswerA hook that memoizes expensive calculations to avoid repeating them
What is useRef hook?
AnswerA hook for creating persistent references that do not trigger re-renders
What are custom hooks?
AnswerFunctions that combine built-in hooks to share logic between components
What is React.memo?
AnswerA higher-order component that prevents re-rendering if props are unchanged
What are PropTypes?
AnswerA library for checking the data types of props during the app runtime
What is an Error Boundary?
AnswerA class component that catches JavaScript errors in its child components
What is the purpose of React Suspense?
AnswerA component that shows a fallback UI while waiting for content to load