React.js Interview Questions

React is a JavaScript library used to build user interfaces, especially for web applications.

Problems React Solves

• Complex UI management – Makes it easier to build and organize large user interfaces using components.

• Code reusability – Components can be reused across different parts of an application.

• Efficient updates – React updates only the parts of the page that change, improving performance.

• State management – Helps manage and synchronize dynamic data with the UI.

Example

Instead of writing separate code for every button or card, you can create one reusable React component and use it multiple times throughout the application.

Code Example

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

Summary: React helps developers build fast, reusable, and maintainable user interfaces for modern web applications.

The core principles of React are:

• Component-Based Architecture – Build the UI using small, reusable components.

• Declarative UI – Describe what the UI should look like, and React updates it automatically when data changes.

• Virtual DOM – React uses a lightweight virtual copy of the DOM to update the UI efficiently.

• One-Way Data Flow – Data flows from parent components to child components through props.

• State Management – Components can manage and update their own data using state.

Example

A UserCard component can be reused to display different users by passing different props.

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

Summary: React focuses on reusable components, declarative code, efficient rendering, and predictable data flow to simplify UI development.

Summary

React focuses mainly on building UI components and gives developers flexibility to choose additional tools. Frameworks like Angular provide a more complete, opinionated solution, while Vue sits somewhere in between with simplicity and built-in features.

JSX (JavaScript XML) is a syntax extension for JavaScript that lets you write HTML-like code inside JavaScript. It makes React components easier to read and write. JSX is converted into regular JavaScript by tools like Babel before it runs in the browser.

Example

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

Equivalent JavaScript

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

Summary: JSX allows developers to write UI code in a familiar HTML-like syntax while still using JavaScript.

JSX is not understood directly by browsers. A transpiler like Babel converts JSX into regular JavaScript before the code runs. React then uses the generated JavaScript to create React elements, which are used to build and update the UI.

Example

JSX:

const element = <h1>Hello</h1>;

Babel converts it to:

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

React.createElement() creates a React element object, and React uses these objects to build the Virtual DOM.

Summary: JSX is syntactic sugar. It gets transformed into React.createElement() calls, which React uses to create and render UI elements.

React components are reusable pieces of UI that define how a part of the interface should look and behave. They help break a large application into smaller, independent, and maintainable parts.

Example

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

Usage:

<Welcome />

Types of Components

• Functional Components (modern and recommended)

• Class Components (older approach)

Summary: Components are the building blocks of React applications. They make UI development reusable, organized, and easier to maintain.

Functional Component

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

Class Component

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

Summary: Functional components are simpler, easier to read, and support state and lifecycle features through Hooks. They are the preferred way to write React components today.

Functional components are preferred because they are simpler, easier to read, and require less code than class components. With the introduction of Hooks, functional components can handle state, side effects, and other React features that previously required classes.

Benefits

• Less boilerplate code

• No this keyword issues

• Easier to understand and maintain

• Reusable logic through custom Hooks

• Recommended by the React team

Example

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

Summary: Functional components provide all the capabilities of class components with cleaner syntax and better code reuse through Hooks, making them the standard choice in modern React.

Props (short for properties) are used to pass data from a parent component to a child component. They are read-only, meaning a child component should not modify the props it receives.

Example

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Usage:

<Welcome name="Bhuvanesh" />

Output:

Hello, Bhuvanesh

Summary: Props allow components to receive and display data, making components reusable and dynamic.

Example

function User({ name }) { // prop
  const [count, setCount] = React.useState(0); // state

  return (
    <>
      <h1>{name}</h1>
      <button onClick={() => setCount(count + 1)}>
        {count}
      </button>
    </>
  );
}

Summary

• Props are used to receive data from a parent component.

• State is used to store and update data within a component.

A good way to remember: Props are passed in, State is managed inside.