Question 1

What is JSX?

Accepted Answer

Syntactic sugar that compiles to React.createElement / jsx() calls describing the element tree. JSX is not HTML—attribute names differ (className), and expressions wrap in {}. Must return a single root or fragment.

Question 2

Why use className instead of class in JSX?

Accepted Answer

class is a reserved word in JS; DOM property is className. Similarly htmlFor instead of for. React normalizes these to DOM attributes.

Question 3

How do you conditionally render in JSX?

Accepted Answer

&&, ternary, or early return null; avoid leaving 0/NaN accidentally rendered. Prefer clear ternaries for if/else UI. Extract variables for readability. Don't put hooks inside conditions.

Question 4

What are the rules for the key prop in lists?

Accepted Answer

Keys should be stable unique IDs among siblings—not random, preferably not index if list reorders. Keys help reconciliation. Wrong keys remount components and reset state.

Question 5

What does spreading props {...props} risk?

Accepted Answer

Forwarding unexpected DOM attrs, overriding important props, or leaking sensitive data. Be explicit. Destructure known props and pass the rest carefully to DOM elements.

Question 6

JSX vs React.createElement — when does it matter?

Accepted Answer

Same runtime result; JSX needs a transform. Understanding createElement helps debug compiled output. In modern React 17+ automatic runtime, import React for JSX is often unnecessary.

JSX React Interview Questions

Other React interview topics