🚀 Web Development Interview Questions with Answers — Part 4: ReactJS

🧠 81. What is React?

React is a JavaScript library used to build user interfaces.

It was developed by Meta.

Features:

✅ Component-based architecture

✅ Virtual DOM

✅ Reusable UI components

✅ Fast rendering

Example:

function App() {

return

Hello React

;

}

🧠 82. What are Components in React?

Components are reusable building blocks of UI.

Types:

• Functional Components

• Class Components

Example:

function Welcome() {

return

Welcome

;

}

🧠 83. Difference Between Functional and Class Components

Functional Component : Simpler syntax : Uses hooks : Preferred nowadays

Class Component : More complex : Uses lifecycle methods : Older approach

Functional Example:

function App() {

return

Hello

;

}

🧠 84. What is JSX?

JSX stands for: 👉 JavaScript XML

It allows writing HTML inside JavaScript.

Example:

const element =

Hello

;

Benefits:

✅ Cleaner syntax

✅ Easier UI development

🧠 85. What are Props?

Props are used to pass data between components.

Example:

function User(props) {

return

{props.name}

;

}

Usage:

🧠 86. What is State?

State stores dynamic data inside components.

Example:

const [count, setCount] = useState(0);

Uses:

• Form handling

• Counters

• Dynamic UI updates

🧠 87. Difference Between State and Props

State : Managed inside component : Mutable

Props : Passed from parent : Immutable

🧠 88. What is useState Hook?

useState manages state in functional components.

Example:

import { useState } from "react";

function Counter() {

const [count, setCount] = useState(0);

return (

setCount(count + 1)}>

{count}



);

}

🧠 89. What is useEffect Hook?

useEffect handles side effects.

Example:

useEffect(() => {

console.log("Component Loaded");

}, []);

Uses:

• API calls

• Timers

• Event listeners

🧠 90. What is Virtual DOM?

Virtual DOM is a lightweight copy of real DOM.

React updates only changed parts instead of entire page.

Benefits:

✅ Faster updates

✅ Better performance

🧠 91. What is Reconciliation?

Reconciliation is React’s process of comparing:

• Old Virtual DOM

• New Virtual DOM

Then updating only changed elements.

🧠 92. What are Keys in React?

Keys uniquely identify list items.

Example:

items.map(item => (

• {item.name}

));

Benefits:

✅ Better rendering

✅ Efficient updates

🧠 93. What is Prop Drilling?

Passing props through multiple nested components unnecessarily.

Problem:

App → Parent → Child → GrandChild

Solution:

• Context API

• Redux

🧠 94. What is Context API?

Context API shares data globally without prop drilling.

Example:

const UserContext = createContext();

Uses:

• Theme management

• Authentication

• Global settings

🧠 95. What is Redux?

Redux is a state management library used in React applications.

Concepts:

• Store

• Actions

• Reducers

Benefits:

✅ Centralized state

✅ Predictable state updates

.