Junior React Interview Questions (50 MCQs)

Question 1

What does JSX ultimately compile to?

Accepted Answer

Calls to `jsx` / `React.createElement`

Answer

A raw HTML file on disk

Answer

CSS Modules

Answer

WebAssembly

Question 2

Calling `setState` usually does what?

Accepted Answer

Schedules a re-render

Answer

Fully reloads the page

Answer

Only updates localStorage

Answer

Unmounts the component

Question 3

Difference between props and state?

Accepted Answer

props come from parent (read-only); state is internal and mutable

Answer

Both are always global

Answer

state only in classes, props only in functions

Answer

There is no difference

Question 4

What does `<>...` (Fragment) do?

Accepted Answer

Groups children without adding a DOM element

Answer

Creates an empty `div`

Answer

Memoizes the component

Answer

Creates local state

Question 5

If `items.length` is `0`, what does `{items.length && <List />}` render?

Accepted Answer

The number `0`

Answer

Nothing

Answer

`<List />`

Answer

An error

Question 6

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

Accepted Answer

The function runs during render, not on click

Answer

Nothing is wrong

Answer

It only works in classes

Answer

It fires the event twice

Question 7

Two sibling components must share data. Simplest fix?

Accepted Answer

Lift state up to the closest common parent

Answer

Duplicate state in both and sync them

Answer

Use a global variable

Answer

Use `useRef` in each

Question 8

What does a controlled input need?

Accepted Answer

`value` and `onChange`

Answer

Only `defaultValue`

Answer

Only a `ref`

Answer

`id` and `name`

Question 9

What happens when you change `ref.current` from `useRef`?

Accepted Answer

The value persists but causes no re-render

Answer

The component re-renders

Answer

The component unmounts

Answer

It throws

Question 10

Why must React component names start with a capital letter?

Accepted Answer

JSX treats lowercase tags as HTML elements

Answer

It is only an ESLint style convention

Answer

Lowercase causes a JavaScript syntax error

Answer

React does not memoize lowercase components

Question 11

Which attribute sets a CSS class in JSX?

Accepted Answer

`className`

Answer

`class`

Answer

`cssClass`

Answer

`styleClass`

Question 12

Which inline style syntax is correct in JSX?

Accepted Answer

`style={{ fontSize: 14 }}`

Answer

`style="font-size: 14px"`

Answer

`style={"font-size: 14px"}`

Answer

`style={[fontSize, 14]}`

Question 13

Why can't a component return two sibling JSX elements without a wrapper?

Accepted Answer

JSX compiles to function calls and a function returns a single value

Answer

Browsers cannot render more than one root

Answer

React only supports one element per page

Answer

Because of CSS layout limitations

Question 14

Which of these cannot be written directly inside `{}` in JSX?

Accepted Answer

An `if/else` statement

Answer

A ternary operator

Answer

A call to `items.map(...)`

Answer

A template string

Question 15

What should a component return to render nothing?

Accepted Answer

`null`

Answer

`undefined` always throws, so `false` is the only way

Answer

The string `"none"`

Answer

The number `0`

Question 16

What does `

{true}{false}{null}

` produce in the DOM?

Accepted Answer

An empty `div`

Answer

`

truefalsenull

`

Answer

`<div>true</div>`

Answer

A runtime error

Question 17

What happens if you render `{user}`, a plain object, in JSX?

Accepted Answer

It throws "Objects are not valid as a React child"

Answer

`[object Object]` is displayed

Answer

Its JSON is displayed

Answer

It is silently ignored

Question 18

What's wrong with a component doing `props.title = "x"`?

Accepted Answer

Props are read-only; components must stay pure

Answer

It permanently updates the prop in the parent

Answer

It triggers an immediate re-render

Answer

It only errors in production

Question 19

In `

Hi

`, how does `Card` access the `

`?

Accepted Answer

Through `props.children`

Answer

Through `props.content`

Answer

With `this.slots`

Answer

With `useChildren()`

Question 20

What is the recommended way to set a default prop value in a function component?

Accepted Answer

A destructuring default: `function Btn({ size = "md" })`

Answer

`Btn.defaultProps = {...}`, still recommended for functions in React 19

Answer

`useDefault("size", "md")`

Answer

Declaring the prop inside `useState`

Question 21

What does `<Input {...props} />` do?

Accepted Answer

Passes every key of `props` as a separate prop

Answer

Sends a single prop called `props`

Answer

Deep-clones the props

Answer

Passes only the changed props

Question 22

After `setCount(count + 1); console.log(count);`, what gets logged?

Accepted Answer

The old value of `count`

Answer

The new value of `count`

Answer

`undefined`

Answer

A Promise

Question 23

Calling `setCount(c => c + 1)` three times in a row (count=0). Final value?

Accepted Answer

`3`

Answer

`1`

Answer

`0`

Answer

`2`

Question 24

Why doesn't `items.push(x); setItems(items);` trigger a re-render?

Accepted Answer

The array reference is the same and React compares with `Object.is`

Answer

`push` is disabled in React

Answer

Setters don't accept arrays

Answer

React only tracks primitive state

Question 25

State is `{ name, age }`. Correct way to update only `age`?

Accepted Answer

`setUser({ ...user, age: 30 })`

Answer

`setUser({ age: 30 })`, which merges automatically

Answer

`user.age = 30; setUser(user)`

Answer

`setUser.age(30)`

Question 26

What's the difference between `useState(compute())` and `useState(compute)`?

Accepted Answer

The second runs `compute` only on the first render

Answer

There is no difference

Answer

The first runs only once

Answer

The second stores the function itself as state

Question 27

If `<Counter />` is rendered twice on a page, how is their state?

Accepted Answer

Each instance has its own independent state

Answer

Both share a single state

Answer

The second inherits the first's state

Answer

Only the first one has state

Question 28

`fullName` is built from `first` and `last`. Best approach?

Accepted Answer

Compute it during render instead of storing it in state

Answer

Keep separate state and sync it with `useEffect`

Answer

Store it in a `useRef`

Answer

Keep it in `localStorage`

Question 29

In an `onChange={e => ...}` handler, where do you read the input value?

Accepted Answer

`e.target.value`

Answer

`e.value`

Answer

`e.input`

Answer

`this.value`

Question 30

How do you prevent the page from reloading on form submit?

Accepted Answer

Call `e.preventDefault()` in `onSubmit`

Answer

`return false` from the handler

Answer

`e.stopPropagation()`

Answer

Remove the submit button

Question 31

How are event names written in JSX?

Accepted Answer

camelCase like `onClick` with a function

Answer

Lowercase like `onclick` with a string

Answer

`click` with no prefix

Answer

`on-click` with a hyphen

Question 32

A button is inside a clickable `div`. How do you stop the parent's handler from running?

Accepted Answer

`e.stopPropagation()` in the button handler

Answer

`e.preventDefault()` in the button handler

Answer

Remove the parent's `key`

Answer

Use `onClickCapture` on the button

Question 33

In `items.map(i => <Row item={i} />)`, where should the `key` go?

Accepted Answer

On the `<Row>` returned directly from `map`

Answer

On the root element inside the `Row` component

Answer

On the list's parent element like `<ul>`

Answer

As a separate `rowKey` prop

Question 34

What's wrong with `key={Math.random()}`?

Accepted Answer

Keys change every render so every item remounts

Answer

Nothing; it is unique

Answer

React rejects numbers as keys

Answer

It only warns; behavior is unchanged

Question 35

To show only in-stock products in a list, what's the usual approach?

Accepted Answer

`products.filter(p => p.inStock).map(...)` during render

Answer

Remove items from the original state with `splice`

Answer

Render all and `display: none` is required

Answer

Use `forEach`, which returns a JSX array

Question 36

When does `useEffect(fn)` without a dependency array run?

Accepted Answer

After every render

Answer

Only once after mount

Answer

Never

Answer

Only on unmount

Question 37

An effect creates a `setInterval`. How do you prevent a leak?

Accepted Answer

Return a cleanup function that calls `clearInterval`

Answer

Store the interval in state

Answer

Remove the dependency array

Answer

Use an `async` effect

Question 38

Why is `useEffect(async () => {...})` incorrect?

Accepted Answer

An async function returns a Promise while React expects a cleanup function

Answer

`fetch` isn't allowed in effects

Answer

It runs the effect twice as fast

Answer

React rejects arrow functions in effects

Question 39

Why does an effect seem to run twice in development?

Accepted Answer

`StrictMode` mounts, unmounts, and remounts on purpose to expose missing cleanup

Answer

It is a known bug in React 19

Answer

The dependency array is always checked twice

Answer

The same happens in production

Question 40

How do you focus an input on mount?

Accepted Answer

`ref={inputRef}` and call `inputRef.current.focus()` in an effect

Answer

`document.focus(input)` during render

Answer

`setFocus(true)` via useState

Answer

`<input focus />`

Question 41

In React 19, how can a function component receive a `ref`?

Accepted Answer

Directly as a regular prop: `function Input({ ref })`

Answer

Only via `forwardRef`, which is mandatory

Answer

With `this.refs`

Answer

Function components can never receive refs

Question 42

Which prop makes a checkbox controlled?

Accepted Answer

`checked` together with `onChange`

Answer

`value` together with `onChange`

Answer

`selected`

Answer

`defaultValue`

Question 43

How does `<input value="hello" />` behave without `onChange`?

Accepted Answer

It becomes read-only and React warns

Answer

The user can type freely

Answer

The value clears on each keystroke

Answer

It fails to compile

Question 44

How is the selected option of a `<select>` set in React?

Accepted Answer

With the `value` prop on the `<select>` itself

Answer

With `selected` on the `<option>`, which is required

Answer

With `checked` on the `<option>`

Answer

With `index` on the `<select>`

Question 45

Which is acceptable during a component's render (function body)?

Accepted Answer

Computing a value from props and state

Answer

Sending a `fetch` request

Answer

Mutating a global variable

Answer

Directly modifying the DOM

Question 46

Why shouldn't you define a component inside another component's body?

Accepted Answer

A new type is created each render, so the child's state resets

Answer

JavaScript doesn't support nested functions

Answer

It's only a readability issue

Answer

React won't render nested components

Question 47

Which code breaks the Rules of Hooks?

Accepted Answer

`if (open) { const [x] = useState(0); }`

Answer

`const [x] = useState(open ? 1 : 0);`

Answer

`useEffect(() => { if (open) log(); }, [open]);`

Answer

`const v = useMemo(() => open && 1, [open]);`

Question 48

In React 19, how is a client app mounted into the DOM?

Accepted Answer

`createRoot(el).render(<App />)`

Answer

`ReactDOM.render(<App />, el)`

Answer

`React.mount(<App />, el)`

Answer

`el.appendChild(<App />)`

Question 49

In React Testing Library, which query is recommended to find a button?

Accepted Answer

`getByRole("button", { name: /save/i })`

Answer

`container.querySelector(".btn")`

Answer

`getByTestId("btn")` as the first choice

Answer

Accessing the component's internal state

Question 50

What does `useState` return?

Accepted Answer

An array with the current value and a setter function

Answer

An object with `value` and `set` keys

Answer

Only the current state value

Answer

A Promise of the state value

React · Junior · 50

What does JSX ultimately compile to?