React Certification Assessment — Questions and Answers

Question 1: What is an Error Boundary in React?

A component that catches JavaScript errors in its child tree and renders a fallback (Correct answer)
A CSS class for invalid forms
A built-in router guard
A hook that catches promise rejections

Correct answer: A component that catches JavaScript errors in its child tree and renders a fallback

Error Boundaries are class components that catch render-phase errors below them and show fallback UI.

Question 2: What is the value of reviewing incorrect answers on practice tests?

It only matters for the exact same questions
There is no value
It identifies knowledge gaps and helps you understand why the correct answer is right, improving future performance (Correct answer)
It wastes time

Correct answer: It identifies knowledge gaps and helps you understand why the correct answer is right, improving future performance

Analyzing mistakes reveals specific knowledge gaps and misconceptions, allowing targeted study that directly addresses your weaknesses.

Question 3: What is a controlled component?

A form element whose value is controlled by React state rather than the DOM (Correct answer)
A secure component
A restricted component
A read-only component

Correct answer: A form element whose value is controlled by React state rather than the DOM

In controlled components, React state is the single source of truth for form inputs. Every change updates state, and state drives what is displayed.

Question 4: What is the correct way to update state based on the previous state?

Use a global counter
Pass a function to the setter: setCount(prev => prev + 1) (Correct answer)
Mutate the state variable directly
Reassign with count = count + 1

Correct answer: Pass a function to the setter: setCount(prev => prev + 1)

Using the updater function form guarantees you read the latest state value.

Question 5: What is component composition in React?

Writing CSS
Mixing chemicals
Compiling code
Building complex UIs by combining simpler components together, passing children and props (Correct answer)

Correct answer: Building complex UIs by combining simpler components together, passing children and props

Composition means building complex components by combining simpler ones, rather than using inheritance. This is React's primary pattern for code reuse.

Question 6: When does a component re-render by default?

Every 16 milliseconds
When its state or props change (Correct answer)
Only when the user scrolls
Only on page load

Correct answer: When its state or props change

A component re-renders when its own state changes or it receives new props.

Question 7: What is a portal in React (ReactDOM.createPortal)?

A type of error boundary
A way to share state globally
A way to render children into a DOM node outside the parent hierarchy (Correct answer)
A server-side rendering technique

Correct answer: A way to render children into a DOM node outside the parent hierarchy

Portals render children into a different DOM node while keeping them in the React tree.

Question 8: What is the difference between state and props?

State is managed internally; props are passed from parent (Correct answer)
Props are mutable; state is not
They are identical concepts
Both are read-only

Correct answer: State is managed internally; props are passed from parent

Props are inputs passed by a parent, while state is data managed within the component.

Question 9: What is useEffect used for?

Adding visual effects
Error handling
Performing side effects like data fetching, subscriptions, or DOM manipulation after render (Correct answer)
Creating animations only

Correct answer: Performing side effects like data fetching, subscriptions, or DOM manipulation after render

useEffect runs after render and handles side effects. The dependency array controls when it re-runs. Cleanup functions handle teardown.

Question 10: What does the useLayoutEffect hook do differently from useEffect?

It runs only on the server
It runs before render
It never runs cleanup
It runs synchronously after DOM mutations but before the browser paints (Correct answer)

Correct answer: It runs synchronously after DOM mutations but before the browser paints

useLayoutEffect fires synchronously after DOM changes and before paint, useful for layout reads.

Question 11: Which React Router hook returns the current location object including pathname and search params?

usePath
useLocation (Correct answer)
useRoute
useCurrent

Correct answer: useLocation

useLocation returns the current location object with pathname, search, hash, and state.

Question 12: What is a snapshot test?

A photograph test
A performance test
A test that renders a component and compares the output to a previously saved reference to detect unintended changes (Correct answer)
A visual test only

Correct answer: A test that renders a component and compares the output to a previously saved reference to detect unintended changes

Snapshot tests capture the rendered output and compare it against a stored snapshot. Differences are flagged, alerting you to unintended UI changes.

Question 13: What is the React reconciliation process?

Fetching server data
Comparing the virtual DOM to determine minimal real DOM updates (Correct answer)
Compiling JSX to JavaScript
Bundling assets for production

Correct answer: Comparing the virtual DOM to determine minimal real DOM updates

Reconciliation diffs the virtual DOM to apply the fewest DOM mutations.

Question 14: What is a common performance benefit of virtualizing a long list (windowing)?

It removes the need for keys
Only visible rows are rendered to the DOM, reducing nodes (Correct answer)
All rows render faster simultaneously
It disables scrolling

Correct answer: Only visible rows are rendered to the DOM, reducing nodes

List virtualization renders only items currently in the viewport, drastically reducing DOM nodes.

Question 15: Which React event fires when the value of an input, textarea, or select element changes?

onUpdate
onChange (Correct answer)
onModify
onInput

Correct answer: onChange

React's onChange event fires whenever the value of a form element changes, and behaves similarly to the native DOM oninput event.

Question 16: Which React Router component creates a navigation link without a full page reload?

<Goto>
<a>
<Link> (Correct answer)
<Anchor>

Correct answer: <Link>

<Link> performs client-side navigation, updating the URL without a full page reload.

Question 17: In useReducer, what does the dispatch function do?

Sends an action to the reducer to compute new state (Correct answer)
Re-renders all components
Directly mutates state
Resets state to initial

Correct answer: Sends an action to the reducer to compute new state

dispatch passes an action object that the reducer uses to produce new state.

Question 18: What does passing a function to useState's initial argument (lazy initialization) accomplish?

Runs the function on every render
Memoizes the component
Disables state updates
Computes the initial state only once on mount (Correct answer)

Correct answer: Computes the initial state only once on mount

Lazy initialization runs the function once to compute the initial state.

Question 19: What is the effect of an empty dependency array ([]) in useEffect?

The effect runs before render
The effect runs after every render
The effect runs only once after the initial render (Correct answer)
The effect never runs

Correct answer: The effect runs only once after the initial render

An empty dependency array makes the effect run only once after the component mounts.

Question 20: In React, what is a controlled component?

A form input whose value is driven by React state (Correct answer)
A component wrapped in memo
A class component with refs
A component rendered by a portal

Correct answer: A form input whose value is driven by React state

A controlled component's value is controlled by React state via value and onChange.

Question 21: What is the Profiler in React?

A code formatter
A testing utility
A criminal investigation tool
A tool that measures how often a React application renders and the cost of rendering, helping identify performance bottlenecks (Correct answer)

Correct answer: A tool that measures how often a React application renders and the cost of rendering, helping identify performance bottlenecks

The Profiler API measures rendering performance, showing which components rendered, how long they took, and what caused them to render.

Question 22: What is the second argument to useEffect?

A dependency array controlling when it runs (Correct answer)
A ref object
The initial state
A cleanup callback

Correct answer: A dependency array controlling when it runs

The dependency array tells React which values to watch to decide when the effect re-runs.

Question 23: What is a React fragment used for?

Creating a portal
Styling elements
Memoizing a component
Grouping children without adding extra DOM nodes (Correct answer)

Correct answer: Grouping children without adding extra DOM nodes

Fragments let you return multiple elements without wrapping them in an extra DOM element.

Question 24: What is the purpose of the useRef hook?

To trigger re-renders when a value changes
To manage global application state
To memoize expensive computations
To persist a mutable value across renders without causing re-renders (Correct answer)

Correct answer: To persist a mutable value across renders without causing re-renders

useRef returns a mutable ref object whose .current property persists across renders and does not cause re-renders when changed.

Question 25: How do events behave inside a React portal?

They only fire on the portal's DOM parent
They do not propagate at all
They bubble through the React tree, not the DOM tree (Correct answer)
They are blocked by Suspense

Correct answer: They bubble through the React tree, not the DOM tree

Even though a portal renders elsewhere in the DOM, events bubble up the React component tree.

Question 26: What is useReducer?

A size reducer
A performance tool
A file compressor
A hook for managing complex state logic with a reducer function, similar to Redux patterns (Correct answer)

Correct answer: A hook for managing complex state logic with a reducer function, similar to Redux patterns

useReducer is an alternative to useState for complex state logic. It uses a reducer function that takes current state and an action, returning new state.

Question 27: What is a React fragment?

A partial render
A code snippet
A wrapper (<></> or <Fragment>) that groups multiple elements without adding extra DOM nodes (Correct answer)
A broken component

Correct answer: A wrapper (<></> or <Fragment>) that groups multiple elements without adding extra DOM nodes

Fragments let you group multiple children without adding unnecessary wrapper divs to the DOM, keeping the HTML structure clean.

Question 28: How do you evaluate the quality of your professional work?

By measuring against established standards, gathering feedback, tracking outcomes, and comparing to best practices (Correct answer)
Only clients evaluate quality
Quality does not matter if the work is done
By how fast you complete it

Correct answer: By measuring against established standards, gathering feedback, tracking outcomes, and comparing to best practices

Quality evaluation uses multiple metrics including professional standards, client satisfaction, outcome measurement, and comparison with industry best practices.

Question 29: Which tool helps identify why a component re-rendered during performance debugging?

Babel
React DevTools Profiler (Correct answer)
Webpack
ESLint

Correct answer: React DevTools Profiler

The React DevTools Profiler records renders and shows what triggered each component update.

Question 30: What are props in React?

Mutable state values
CSS properties
API endpoints
Read-only inputs passed from parent to child components to configure their behavior and display (Correct answer)

Correct answer: Read-only inputs passed from parent to child components to configure their behavior and display

Props (properties) flow down from parent to child components, allowing parents to pass data and callbacks to customize child behavior.

Question 31: What is JSX?

A JavaScript library
A syntax extension that looks like HTML but is actually JavaScript, used to describe UI structure in React (Correct answer)
A testing tool
A CSS framework

Correct answer: A syntax extension that looks like HTML but is actually JavaScript, used to describe UI structure in React

JSX combines HTML-like syntax with JavaScript, making it easy to write UI code that describes what the rendered output should look like.

Question 32: What happens if you call a state setter with the same value as current state?

It throws an error
It always forces a re-render
It resets all other state
React may bail out and skip re-rendering (Correct answer)

Correct answer: React may bail out and skip re-rendering

If the new state is identical (Object.is) to the current state, React can bail out of re-rendering.

Question 33: What problem does debouncing an input handler primarily solve for performance?

Prevents the input from accepting text
Forces synchronous rendering
Limits how often an expensive handler runs during rapid input (Correct answer)
Encrypts the input value

Correct answer: Limits how often an expensive handler runs during rapid input

Debouncing delays execution until input pauses, reducing the frequency of expensive operations.

Question 34: What is the difference between a functional and class component?

Functional components are functions that return JSX; class components extend React.Component with a render method (Correct answer)
Functional components cannot have state
There is no difference
Class components are faster

Correct answer: Functional components are functions that return JSX; class components extend React.Component with a render method

Functional components are simpler JavaScript functions. With hooks, they have the same capabilities as class components, which is why they are now preferred.

Question 35: What are React Server Components?

Components on a server room
API endpoints
Components that render exclusively on the server, reducing client-side JavaScript and enabling direct backend data access (Correct answer)
Server monitoring tools

Correct answer: Components that render exclusively on the server, reducing client-side JavaScript and enabling direct backend data access

Server Components render on the server and send only the rendered output to the client, eliminating the need to send component code to the browser.

Question 36: What is React Testing Library?

A debugging tool
A testing utility that encourages testing components the way users interact with them, focusing on behavior over implementation (Correct answer)
A code linting tool
A library of test examples

Correct answer: A testing utility that encourages testing components the way users interact with them, focusing on behavior over implementation

React Testing Library encourages tests that mirror user behavior, using queries like getByText and getByRole rather than testing internal component details.

Question 37: What is conditional rendering in React?

Rendering CSS conditionally
A performance optimization
Rendering on specific devices
Showing different UI elements based on conditions using JavaScript operators like if, ternary, or && (Correct answer)

Correct answer: Showing different UI elements based on conditions using JavaScript operators like if, ternary, or &&

Conditional rendering uses JavaScript logic within JSX to determine which elements to display based on state, props, or other conditions.

Question 38: What is Jest?

A CSS framework
A build tool
A comedian
A JavaScript testing framework commonly used with React that provides assertions, mocking, and code coverage (Correct answer)

Correct answer: A JavaScript testing framework commonly used with React that provides assertions, mocking, and code coverage

Jest is the default testing framework for React projects, offering zero-config setup, snapshot testing, mocking capabilities, and built-in code coverage.

Question 39: What is concurrent rendering in React?

Rendering on multiple screens
A CSS feature
Running multiple React apps
A rendering strategy that allows React to prepare multiple versions of the UI simultaneously without blocking the main thread (Correct answer)

Correct answer: A rendering strategy that allows React to prepare multiple versions of the UI simultaneously without blocking the main thread

Concurrent rendering lets React work on multiple tasks, pause and resume work, and prioritize user interactions over less urgent updates.

Question 40: What is the virtual DOM?

A testing environment
A lightweight JavaScript representation of the real DOM that React uses to efficiently determine what needs to change (Correct answer)
A hidden webpage
A real DOM in a virtual machine

Correct answer: A lightweight JavaScript representation of the real DOM that React uses to efficiently determine what needs to change

React keeps a virtual copy of the DOM in memory. When state changes, it compares the virtual DOM to the real DOM and updates only what changed (reconciliation).

Question 41: What is error boundary in React?

A component that catches JavaScript errors in child components, preventing them from crashing the entire app (Correct answer)
An error type
A debugging tool
A fence around errors

Correct answer: A component that catches JavaScript errors in child components, preventing them from crashing the entire app

Error boundaries catch errors during rendering and display fallback UI instead of crashing. They use componentDidCatch and static getDerivedStateFromError.

Question 42: What is a React component?

A CSS class
A server endpoint
A database table
A reusable piece of UI that can accept inputs (props) and return JSX describing what should appear on screen (Correct answer)

Correct answer: A reusable piece of UI that can accept inputs (props) and return JSX describing what should appear on screen

Components are the building blocks of React applications, encapsulating UI logic and presentation into reusable, independent pieces.

Question 43: What are React DevTools?

Physical development tools
A build system
A browser extension that lets you inspect React component hierarchy, props, state, and performance (Correct answer)
A code editor

Correct answer: A browser extension that lets you inspect React component hierarchy, props, state, and performance

React DevTools provides a visual interface to inspect component trees, examine props and state, profile performance, and debug React applications.

Question 44: Why might overusing useMemo and useCallback hurt performance?

They add memoization overhead and memory cost that can outweigh the savings (Correct answer)
They disable React's concurrent features
They prevent state updates
They block the main thread permanently

Correct answer: They add memoization overhead and memory cost that can outweigh the savings

Memoization itself has a cost, so applying it unnecessarily can be slower than recomputing.

Question 45: What problem does the useRef hook commonly solve?

Replacing useEffect
Holding a mutable value that persists without causing re-renders (Correct answer)
Memoizing component output
Subscribing to a Redux store

Correct answer: Holding a mutable value that persists without causing re-renders

useRef returns a mutable object whose .current persists across renders without triggering re-renders.

Question 46: How does React Router v6's relative routing treat a route path that does not start with a slash?

It opens in a new tab
It always points to the domain root
It throws an error
It is resolved relative to the parent route (Correct answer)

Correct answer: It is resolved relative to the parent route

Paths without a leading slash are relative and resolve against the closest parent route.

Question 47: What does a custom hook allow you to do?

Override React's internal scheduler
Extract and reuse stateful logic across components (Correct answer)
Render outside the root DOM node
Bypass the virtual DOM

Correct answer: Extract and reuse stateful logic across components

Custom hooks package reusable stateful logic into a function whose name starts with 'use'.

Question 48: What makes effective communication important in professional settings?

It is not important if you have technical skills
Clear communication prevents errors, builds client trust, improves teamwork, and ensures expectations are met (Correct answer)
Only written communication matters
Only verbal communication matters

Correct answer: Clear communication prevents errors, builds client trust, improves teamwork, and ensures expectations are met

Effective communication across all channels prevents misunderstandings, builds relationships, and ensures everyone has the information needed to do their job well.

Question 49: What is a trailing stop order?

A permanent stop order
An order placed at market close
A stop order that follows you
A stop-loss that automatically adjusts upward as the price rises, locking in profits while protecting against reversals (Correct answer)

Correct answer: A stop-loss that automatically adjusts upward as the price rises, locking in profits while protecting against reversals

Trailing stops move with the price in a favorable direction but stay fixed when the price moves against you, automatically locking in gains.

Question 50: How do you define a URL parameter in a React Router v6 path?

Use brackets like /users/[id]
Use a question mark like /users/?id
Use a colon prefix like /users/:id (Correct answer)
Use braces like /users/{id}

Correct answer: Use a colon prefix like /users/:id

React Router uses a colon prefix (:id) to declare a dynamic URL segment.

Question 51: When using useReducer, what is an 'action'?

An object describing what change to make, usually with a type (Correct answer)
The current state value
The reducer function itself
A side effect function

Correct answer: An object describing what change to make, usually with a type

An action is typically an object with a type property that tells the reducer how to update state.

React Certification Assessment

The React Certification Assessment evaluates proficiency in React, including components, hooks, state management, routing, testing, and modern development patterns for building production-grade applications.

Questions

60 min

Time Limit

70%

To Pass

Checking for saved progress...

Exam Rules

You can skip questions and return to them later
Flag questions for review before submitting
No feedback shown until you submit the entire exam
Unanswered questions count as wrong — answer everything
10 pretest questions are mixed in and don't affect your score
Timer auto-submits when time runs out
Your progress is auto-saved every 30 seconds