Basic React.js interview questions and answers

1. What is React.js?
React.js is a JavaScript library developed by Facebook for building user interfaces (UIs), especially for single-page applications (SPAs). It allows developers to create reusable UI components and efficiently update and render UI elements using a virtual DOM.

2. What are the key features of React?
Component-Based Architecture – UI is built using reusable components.
Virtual DOM (Document Object Model) – Improves performance by updating only changed elements.
Unidirectional Data Flow – Data flows in one direction, making state management predictable.
JSX (JavaScript XML) – Allows writing UI using HTML-like syntax inside JavaScript.
Hooks – Enables state and lifecycle features in functional components.

3. What is JSX?
JSX (JavaScript XML) is a syntax extension for JavaScript that allows developers to write HTML-like code inside JavaScript files. JSX is not required in React, but it makes UI development easier.

Example:

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

4. What are components in React?
Components are building blocks of a React application. They are reusable, independent pieces of UI.

Functional Components – Defined as functions, simpler, and use hooks.
Class Components – Defined as ES6 classes, use lifecycle methods.
Example of a functional component:

function Greeting() {
  return <h1>Hello, World!</h1>;
}

5. Difference between functional and class components?

6. What is the virtual DOM?
The virtual DOM (VDOM) is a lightweight JavaScript representation of the actual DOM. Instead of updating the real DOM directly, React updates the virtual DOM first, calculates the difference (diffing algorithm), and then updates only the changed parts in the real DOM (reconciliation). This improves performance.

7. What is the purpose of the key prop in React lists?
The key prop helps React identify and track elements efficiently when rendering lists. It prevents unnecessary re-renders and improves performance.

Example:

const items = ["Apple", "Banana", "Cherry"];
return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

8. Difference between state and props?

9. How do you handle events in React?
React handles events using camelCase syntax (e.g., onClick instead of onclick).

Example:

function ClickButton() {
  function handleClick() {
    alert("Button clicked!");
  }
  return <button onClick={handleClick}>Click Me</button>;
}

10. What are React Fragments?
React Fragments (<></>) allow grouping multiple elements without adding extra nodes to the DOM.

Example:

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