React JS Basic
Interview Questions with Answers

2. Who developed React, and when was it first released?

Answer:
React was developed by Jordan Walke, a software engineer at Facebook. It was first released in May 2013 to the public. Initially, Facebook used it for its News Feed and Instagram, and later it became popular worldwide for building modern web applications.

Example:
Today, companies like Facebook, Instagram, Netflix, and Airbnb use React in their products.

3. What are the key advantages of using React?

Answer:
React offers several advantages that make it one of the most popular choices for front-end development:

• Reusable Components – You build once and reuse across the app, saving time.
• Virtual DOM – Updates only the necessary parts of the UI, making applications faster.
• One-Way Data Flow – Makes code more predictable and easier to debug.
• Strong Community Support – Backed by Meta and millions of developers.
• Ecosystem – Works well with libraries like Redux, React Router, and Next.js.

Example:
In an e-commerce app, a ProductCard component can be reused to show hundreds of products without rewriting the UI logic each time.

4. What is the difference between React and plain JavaScript DOM manipulation?

Answer:

• In plain JavaScript, developers manually select and update DOM elements using methods like document.getElementById() or document.querySelector(). This can become slow and messy when the application grows.
• In React, the UI is built with a virtual DOM. React calculates the minimum changes needed and updates only those parts of the real DOM, making updates efficient and faster.

Example:

• Plain JS:

document.getElementById("count").innerText = count;

• React:

function Counter() {
  const [count, setCount] = React.useState(0);
  return <h1>{count}</h1>;
}

Here, React handles DOM updates automatically when count changes.

5. What is a Single Page Application (SPA), and how does React support it?

Answer:
A Single Page Application (SPA) is a type of web application that loads only once and then dynamically updates the content without refreshing the entire page.

React supports SPAs because it uses client-side rendering. With React Router, different components can be displayed for different URLs, but the browser doesn’t reload the page. Instead, React swaps components in and out, giving users a smooth experience.

Example:
When you visit /home or /about in a React app with React Router, the page doesn’t reload. Instead, React loads the Home or About component instantly.

6. What is a React component?

Answer:
A component is a reusable piece of UI in React. It is like a function that takes inputs (called props) and returns React elements (UI). Components help break down complex UIs into smaller, manageable parts.

Example:

function Button(props) {
  return <button>{props.label}</button>;
}

Here, Button is a reusable component that can display different labels like “Login”, “Submit”, or “Register”.

7. What is the difference between functional and class components?

Answer:

• Functional Components:
  • Written as JavaScript functions.
  • Simpler, cleaner, and preferred in modern React.
  • Use hooks like useState and useEffect for state and lifecycle.
• Class Components:
  • Written using ES6 classes.
  • Use this.state and lifecycle methods like componentDidMount.
  • Less common in modern React but still supported.

Example:

• Functional:

function Welcome() {
  return <h1>Hello React</h1>;
}

• Class:

class Welcome extends React.Component {
  render() {
    return <h1>Hello React</h1>;
  }
}

8. What is the difference between presentational and container components?

Answer:

• Presentational Components:
  • Focus on how things look.
  • Mostly receive data through props and display UI.
  • Don’t manage state or business logic.
• Container Components:
  • Focus on how things work.
  • Handle state, logic, and data fetching.
  • Pass data down to presentational components.

Example:

• Presentational:

function UserCard({ name }) {
  return <h2>{name}</h2>;
}

• Container:

function UserContainer() {
  const [name, setName] = React.useState("John");
  return <UserCard name={name} />;
}

9. What is a controlled component in React?

Answer:
A controlled component is a form input element whose value is controlled by React state. In other words, the input value is tied to the component’s state, and changes are handled by React.

Example:

function Form() {
  const [text, setText] = React.useState("");
  return (
    <input value={text} onChange={(e) => setText(e.target.value)} />
  );
}

Here, the input value depends on the state text. React controls the input.

10. What is an uncontrolled component in React?

Answer:
An uncontrolled component is a form input element that maintains its own internal state, rather than relying on React state. You access the value using a ref.

Example:

function Form() {
  const inputRef = React.useRef();
  function handleSubmit() {
    alert(inputRef.current.value);
  }
  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </>
  );
}

Here, the input value is not controlled by React state but accessed directly through the DOM.

11. What is JSX in React?

Answer:
JSX stands for JavaScript XML. It is a syntax extension for JavaScript that looks very similar to HTML. JSX allows you to write UI components in a way that looks like HTML but actually compiles down to React.createElement() calls under the hood.

It makes the code more readable and declarative, allowing developers to see what the UI will look like directly inside JavaScript.

Example:

const element = <h1>Hello, React!</h1>;

The above JSX is internally converted to:

const element = React.createElement("h1", null, "Hello, React!");

12. Can browsers understand JSX directly? Why or why not?

Answer:
No, browsers cannot understand JSX directly because browsers only understand plain JavaScript, not JSX syntax.

JSX must first be transpiled into JavaScript using tools like Babel before it runs in the browser.

Example:

const element = <p>JSX Example</p>; // Browser can't run this directly

After Babel transpilation:

const element = React.createElement("p", null, "JSX Example");

13. What is the difference between JSX and HTML?

Answer:
JSX looks like HTML but has some important differences:

• In JSX, you use camelCase attributes (e.g., className instead of class).
• JSX can embed JavaScript expressions inside curly braces {}.
• JSX elements must have a single parent wrapper.
• JSX is not a string or markup—it’s syntactic sugar for JavaScript function calls.

Example:

// JSX
<div className="container">
  <h2>{2 + 2}</h2>
</div>

In HTML, you can’t write {2 + 2} to evaluate JavaScript.

14. How do you embed JavaScript expressions in JSX?

Answer:
You can embed JavaScript expressions inside JSX using curly braces {}. This allows you to dynamically display variables, functions, or calculations inside UI.

Example:

const name = "Learn2Earn Labs Training Institute";
const element = <h1>Welcome to, {name}!</h1>;

Here, {name} will be replaced with the string “Learn2Earn Labs Training Institute” when rendered.

15. Why must JSX elements be wrapped in a parent element?

Answer:
In JSX, every component must return a single root element because React uses the virtual DOM, and returning multiple sibling elements without a parent confuses the tree structure.

To solve this, we wrap multiple elements inside a parent element like <div> or <> (React Fragment).

Example:
Invalid JSX:

return (
  <h1>Hello</h1>
  <p>Welcome</p>
);

Valid JSX (using a parent wrapper):

return (
  <>
    <h1>Hello</h1>
    <p>Welcome</p>
  </>
);

16. What are props in React?

Answer:
Props (short for properties) are used to pass data from a parent component to a child component. They make components reusable by allowing dynamic values.

Props are immutable, meaning a child component cannot modify them.

Example:

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}
<Greeting name="Anjali" />

Here, “Anjali” is passed as a prop from the parent.

17. How do you pass data from a parent component to a child component?

Answer:
You pass data from a parent to a child component by assigning attributes to the child component and then accessing them using props in the child.

Example:

function Child({ message }) {
  return <p>{message}</p>;
}
function Parent() {
  return <Child message="This is a message from Parent!" />;
}

Here, the parent sends message as a prop to the child.

18. What are default props in React?

Answer:
Default props are values that a component uses if no prop value is provided by the parent. This ensures components still work even if some props are missing.

Example:

function Button({ label }) {
  return <button>{label}</button>;
}
Button.defaultProps = {
  label: "Click Me"
};

If the parent doesn’t pass label, the button will display “Click Me”.

19. Are props read-only or mutable?

Answer:
Props are read-only. A child component cannot change the props it receives from its parent. This ensures that data always flows in one direction (top to bottom), making applications predictable.

Example:

function Display({ count }) {
  // count = 10;  // Not allowed
  return <p>Count is {count}</p>;
}

If you need to change values, use state instead of props.

20. How do you validate props in React using PropTypes?

Answer:
React provides a library called PropTypes to validate the type of props. It helps catch errors early by ensuring components receive props in the correct format.

Example:

import PropTypes from "prop-types";
function User({ name, age }) {
  return <h2>{name} is {age} years old.</h2>;
}
User.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};

Here:

• name must be a string and is required.
• age must be a number but is optional.