React Skills Test Practice Questions

Question 1

What does JSX compile to?

Accepted Answer

Calls to React.createElement (or jsx() with the modern transform)

Answer

HTML strings

Answer

Template literals

Answer

Web Components

Question 2

Why must a component name start with a capital letter?

Accepted Answer

JSX treats lowercase names as built-in DOM tags and capitalized names as component references

Answer

React enforces it via a linter rule only

Answer

It is only a style convention with no functional effect

Answer

Lowercase names break TypeScript

Question 3

What is the virtual DOM?

Accepted Answer

An in-memory tree of JavaScript objects that React diffs to decide what to change in the real DOM

Answer

A browser API for faster rendering

Answer

A copy of the entire HTML document stored as a string

Answer

A separate rendering thread

Question 4

Which statement about React's reconciliation is correct?

Accepted Answer

React uses heuristics that assume different element types produce different trees, giving roughly O(n)

Answer

React compares every node against every other node, giving O(n³) complexity

Answer

React re-renders the whole DOM on every state change

Answer

Reconciliation only runs on the server

Question 5

Why is className used instead of class in JSX?

Accepted Answer

class is a reserved word in JavaScript, and JSX props map to DOM properties where the property is named className

Answer

Both work identically

Answer

class only works in TypeScript

Answer

React chose it arbitrarily

Question 6

What does a React Fragment do?

Accepted Answer

Groups multiple children without adding an extra node to the DOM

Answer

Lazily loads a component

Answer

Renders a div with no styles

Answer

Creates a portal to another part of the tree

Question 7

When do you need to use instead of the shorthand <>?

Accepted Answer

When you need to pass a key prop, such as when mapping over a list

Answer

When rendering more than three children

Answer

When using TypeScript

Answer

The shorthand is always equivalent

Question 8

What does {0 && <Message />} render?

Accepted Answer

The literal 0

Answer

Nothing

Answer

It throws an error

Answer

The Message component

Question 9

How does React protect against XSS in JSX expressions?

Accepted Answer

It escapes embedded values before rendering, treating them as text rather than markup

Answer

It does not; you must sanitize manually in every case

Answer

It runs a virus scanner on the string

Answer

It blocks all user input

Question 10

Which is the correct way to write an inline style in JSX?

Accepted Answer

style={{ color: 'red' }}

Answer

style="color: red"

Answer

style={color: 'red'}

Answer

css={{ color: 'red' }}

Question 11

What is the primary difference between a controlled and an uncontrolled component?

Accepted Answer

In a controlled component React state is the single source of truth for the input value; in an uncontrolled component the DOM holds it

Answer

There is no functional difference

Answer

Controlled components use classes; uncontrolled use functions

Answer

Uncontrolled components cannot be styled

Question 12

What are props in React?

Accepted Answer

Read-only inputs passed from a parent to a child component

Answer

A replacement for state

Answer

Mutable variables owned by the component

Answer

Global values available to all components

Question 13

What is children in the context of props?

Accepted Answer

A special prop containing whatever was placed between a component's opening and closing tags

Answer

A deprecated API

Answer

A reference to child DOM nodes

Answer

An array of all nested components in the tree

Question 14

What problem does prop drilling describe?

Accepted Answer

Threading a prop through many intermediate components that do not use it, purely to reach a deep descendant

Answer

Passing functions as props

Answer

Mutating props in a child

Answer

Passing too many props to one component

Question 15

What does a pure component guarantee?

Accepted Answer

Given the same props and state, it always returns the same output and produces no side effects during render

Answer

It contains no hooks

Answer

It renders faster than any other component

Answer

It never re-renders

Question 16

Why does React StrictMode double-invoke component render functions in development?

Accepted Answer

To surface impure render logic and side effects that would break under concurrent rendering

Answer

It is a bug

Answer

To warm the cache

Answer

To measure performance

Question 17

What is a Higher-Order Component (HOC)?

Accepted Answer

A function that takes a component and returns a new component with additional behavior

Answer

A component with more than ten props

Answer

A component rendered at the top of the tree

Answer

A built-in React API

Question 18

What is the render props pattern?

Accepted Answer

Passing a function as a prop that a component calls to determine what to render

Answer

Rendering props as JSON for debugging

Answer

Passing styles as props

Answer

Automatically forwarding all props to children

Question 19

How do you provide a default value for a prop in a function component?

Accepted Answer

Using default parameter syntax during destructuring, such as function Btn({ size = 'md' })

Answer

Only with the defaultProps static property

Answer

By calling setDefault()

Answer

It is impossible in function components

Question 20

In React 19, how do you access a ref passed to a function component?

Accepted Answer

ref is available as a regular prop, so forwardRef is no longer required

Answer

Only via forwardRef

Answer

Refs cannot be passed to function components

Answer

Via this.refs

Question 21

What does useImperativeHandle do?

Accepted Answer

Customizes the value exposed to a parent through a ref, rather than exposing the raw DOM node

Answer

Imperatively mutates props

Answer

Handles uncaught errors

Answer

Forces an immediate re-render

Question 22

What is the purpose of React.memo?

Accepted Answer

It skips re-rendering a component when its props are shallowly equal to the previous props

Answer

It stores values across page reloads

Answer

It caches network requests

Answer

It memoizes expensive calculations inside a component

Question 23

Why might React.memo fail to prevent a re-render even when the data appears unchanged?

Accepted Answer

A prop is a new object, array, or function reference each render, so the shallow comparison fails

Answer

memo only works on class components

Answer

memo requires a key prop

Answer

memo only works in production builds

Question 24

What does a component return to render nothing at all?

Accepted Answer

null

Answer

false only

Answer

An empty string

Answer

undefined

Question 25

What does the spread operator do in <Button {...props} />?

Accepted Answer

Passes each key of the props object as an individual prop

Answer

Freezes the props object

Answer

Merges props into state

Answer

Creates a deep clone of props

Question 26

Can a child component modify a prop it receives?

Accepted Answer

No, props are read-only; the child must call a callback so the parent updates its own state

Answer

Yes, directly

Answer

Only inside useEffect

Answer

Only if the prop is an object

Question 27

What happens if you mutate an object that was passed as a prop?

Accepted Answer

The mutation may not trigger a re-render and can corrupt the parent's state, since the reference is shared

Answer

React clones props automatically, so nothing happens

Answer

React throws an error immediately

Answer

The child gets its own copy, so it is safe

Question 28

What is the modern replacement for PropTypes in most codebases?

Accepted Answer

TypeScript interfaces or type aliases checked at compile time

Answer

JSON Schema

Answer

Nothing; runtime checks are still required

Answer

The validateProps() API

Question 29

What is the purpose of the key prop when rendering a list?

Accepted Answer

It gives React a stable identity for each item so it can match elements across renders

Answer

It sorts the list automatically

Answer

It sets the element's HTML id attribute

Answer

It is required only for performance measurement

Question 30

Why is using the array index as a key problematic?

Accepted Answer

When items are reordered, inserted, or deleted, indexes shift, so React associates the wrong state with the wrong item

Answer

Indexes are too slow to compare

Answer

It causes a memory leak

Answer

React forbids numeric keys

Question 31

When is using the array index as a key acceptable?

Accepted Answer

When the list is static, never reordered or filtered, and items have no internal state

Answer

Never, under any circumstances

Answer

Whenever the list has fewer than ten items

Answer

Only in production builds

Question 32

Where must a key be placed when mapping over an array?

Accepted Answer

On the outermost element returned by the map callback

Answer

On the innermost element

Answer

Anywhere within the returned tree

Answer

On both the outer and inner elements

Question 33

What happens when you change the key on a component?

Accepted Answer

React unmounts the old instance and mounts a fresh one, resetting all of its state

Answer

Nothing; keys only matter inside arrays

Answer

Only its props update

Answer

It forces a parent re-render

Question 34

What is a SyntheticEvent?

Accepted Answer

React's cross-browser wrapper around the native browser event

Answer

An event that React invents and fires artificially

Answer

A deprecated event system

Answer

An event created by useEffect

Question 35

Where does React 18 attach its event listeners?

Accepted Answer

On the root container element where the app is mounted

Answer

Directly on each individual DOM element

Answer

On the document element

Answer

On the window object

Question 36

How do you prevent a form's default submit behavior in React?

Accepted Answer

Call e.preventDefault() inside the onSubmit handler

Answer

return false from the handler

Answer

Set the noSubmit attribute

Answer

Use onSubmitPrevent

Question 37

What is wrong with onClick={handleClick()} in JSX?

Accepted Answer

It calls the function during render and passes its return value as the handler

Answer

It requires a bind call

Answer

Nothing, it is correct

Answer

It only fires on double click

Question 38

In React 19, what does the new form action prop enable?

Accepted Answer

Passing a function to <form action={fn}> so React handles submission, pending state, and errors

Answer

Server-side only rendering of forms

Answer

Automatic CSRF protection

Answer

Native HTML validation

Question 39

Which handler fires on every keystroke in a React text input?

Accepted Answer

onChange

Answer

onInput

Answer

onBlur

Answer

onKeyUp

Question 40

Why does React warn when an input's value changes from undefined to a defined value?

Accepted Answer

Because the input switched from uncontrolled to controlled, which React cannot handle cleanly

Answer

Because undefined is not a string

Answer

It is only a TypeScript warning

Answer

Because the input is too long

Question 41

What does useState return?

Accepted Answer

An array containing the current state value and a setter function

Answer

Only the setter function

Answer

An object with value and setValue keys

Answer

A promise resolving to the state

Question 42

Why does calling setCount(count + 1) three times in a row only increment by one?

Accepted Answer

count is captured from the current render and does not change between the calls, so all three compute the same value

Answer

The updates cancel each other out

Answer

Only the last setState in a function is executed

Answer

React throttles rapid updates

Question 43

What is the correct way to update an object stored in state?

Accepted Answer

Create a new object, typically with spread syntax, and pass that to the setter

Answer

Mutate a property directly, then call the setter with the same object

Answer

Use Object.assign on the existing state object in place

Answer

Call the setter with no arguments

Question 44

What does passing a function to useState, as in useState(() => expensiveInit()), accomplish?

Accepted Answer

Lazy initialization: the function runs only on the first render instead of on every render

Answer

It makes the state asynchronous

Answer

It creates a computed property that recalculates automatically

Answer

It defers state until after mount

Question 45

Is a state update applied immediately after calling the setter?

Accepted Answer

No, React schedules the update and the new value is visible on the next render

Answer

Only in class components

Answer

Yes, the variable updates synchronously

Answer

Only when using the updater function form

Question 46

What changed about automatic batching in React 18?

Accepted Answer

Updates are now batched everywhere, including in promises, timeouts, and native event handlers, not just React event handlers

Answer

Batching now only applies to class components

Answer

Batching became opt-in via a flag

Answer

Batching was removed entirely

Question 47

What is lifting state up?

Accepted Answer

Moving shared state to the closest common ancestor of the components that need it

Answer

Moving state into a global store

Answer

Storing state in localStorage

Answer

Moving state into a useRef

Question 48

Why should derived values generally not be stored in state?

Accepted Answer

They can fall out of sync with their source, and recalculating during render is simpler and safer

Answer

It is slower to read from state

Answer

State cannot hold computed values

Answer

React forbids it

Question 49

When does useEffect run by default with no dependency array?

Accepted Answer

After every render

Answer

Only once after mount

Answer

Before the first render

Answer

Only when state changes

Question 50

What does returning a function from useEffect do?

Accepted Answer

It registers a cleanup function that runs before the next effect and on unmount

Answer

It cancels the effect

Answer

It sets the effect's return value as state

Answer

Nothing; the return value is ignored