1️.

React Basics

What is React?
React is a JavaScript library for building fast and interactive user interfaces. It makes web
development easier by using reusable components.

Difference between React and Vanilla JavaScript?

• Vanilla JavaScript updates the page by directly modifying the real DOM, which is
slow.

• React uses a Virtual DOM, updating only the changed parts, making it faster.

Advantages of using React?

• Fast Performance → Uses Virtual DOM for efficient updates.

• Reusable Components → Saves time by reusing code.

• One-Way Data Flow → Makes debugging easier.

• Strong Community Support → Used by top companies like Facebook, Instagram.

What are components in React?

Components are small, reusable UI blocks.

• Example: A button, header, or form can be a component.

• Components help in organizing code and making apps modular.

Difference between class components and functional components?

• Class Components → Older way, uses class, needs this.state.

• Functional Components → Modern way, uses Hooks like useState.

What is JSX? Why is it used?

JSX is a mix of HTML + JavaScript inside React.

• Makes UI code easier to write and read.

• Example:

const element = <h1>Hello, JSX!</h1>; // JSX code

What is Virtual DOM, and how does it work?

• Virtual DOM is a copy of the real DOM that React updates first.

• Instead of updating the whole webpage, React updates only the changed elements,
making it faster.
 What is the difference between Real DOM and Virtual DOM?

• Real DOM updates the entire page, which is slow.

• Virtual DOM updates only the changed parts, making it fast.

2️. React Hooks

What are Hooks? Why are they used?

Hooks are special functions that allow functional components to use state and lifecycle
features.

• Example: useState, useEffect, useRef.

Explain the use of useState, useEffect, useRef, useContext

• useState → Stores values inside a component.

• useEffect → Runs after render, used for API calls.

• useRef → Stores values without causing re-renders.

• useContext → Shares values between components without passing props.

Difference between useState and useReducer?

• useState → Simple state changes.

• useReducer → Used when state logic is complex (like a counter with many actions).

What is the difference between useEffect and useLayoutEffect?

• useEffect → Runs after the page updates.

• useLayoutEffect → Runs before the page is shown to the user.

When to use useCallback and useMemo?

• useCallback → Stores functions to prevent re-creation.

• useMemo → Stores computed values to improve performance.

3️. Component Lifecycle & State Management

What is the React component lifecycle?

It refers to the stages a component goes through (Mounting, Updating, Unmounting).

Explain Mounting, Updating, and Unmounting phases.

• Mounting → Component is created (Runs useEffect).

• Updating → Component updates (When state/props change).

• Unmounting → Component is removed from the page.

Difference between state and props?

• State → Internal, changes inside a component.

• Props → External, passed from parent to child.

How does React handle prop drilling?

Prop drilling happens when we pass props through multiple components.

• Solution: Use useContext or Redux.

How to pass data from parent to child and vice versa?

• Parent to Child → Use props.

• Child to Parent → Pass a callback function as a prop.

4️. Event Handling & Forms

How to handle events in React?

Use the onClick event handler.

<button onClick={() => alert("Clicked!")}>Click me</button>

What is event bubbling and event capturing?

• Bubbling → Event starts from the target and moves up.

• Capturing → Event starts from the top and moves down.

Difference between Controlled and Uncontrolled components?

• Controlled Component → Form input is controlled by React state.

• Uncontrolled Component → Form input is controlled by the DOM (useRef).

 How to handle form submissions in React?
Use onSubmit event with preventDefault().

How to bind event handlers in React?

Use arrow functions or .bind().

5️. React Router

What is React Router? Why is it used?

• Helps in navigating between pages in a React app.

Difference between BrowserRouter and HashRouter?

• BrowserRouter → Uses clean URLs (/home).

• HashRouter → Uses # (/home#).

What are useNavigate, useParams, and useLocation?

• useNavigate → Redirects user to another page.

• useParams → Gets dynamic values from URL.

• useLocation → Gets data passed via navigation.

How to pass data using React Router?

• Use useNavigate().

6️. React Performance Optimization

Why does React re-render components?

• Whenever state or props change, React re-renders.

How to avoid unnecessary re-renders?

• Use React.memo, useCallback, useMemo.

Why is React.memo used?

• Prevents re-renders if props don’t change.

Difference between Pure Components and Normal Components?

• Pure Components → Optimized, prevents unnecessary re-renders.

• Normal Components → Re-renders every time.

7️. API Integration & Fetching Data

How to make API calls in React?

Use fetch() or axios inside useEffect().

Difference between fetch() and axios?

• fetch() → Built-in, needs manual error handling.

• axios → Simpler syntax, auto error handling.

How to handle API errors?

Use try-catch or .catch() methods.

How to show loading states while fetching data?

Use useState for a loading variable.

8️. JavaScript Fundamentals for React

Difference between var, let, and const?

• var → Function-scoped, can be redeclared.

• let → Block-scoped, cannot be redeclared.

• const → Block-scoped, cannot change value.

What are arrow functions?

A shorter way to write functions.

const add = (a, b) => a + b;

Difference between map(), filter(), and forEach()?

• map() → Returns new array.

• filter() → Returns filtered array.

• forEach() → No return value.

9️. React Testing

What is Unit Testing?

Testing individual components for correctness.
 What is Jest?
A testing library for React applications.

How to test a React component?

Use Jest + React Testing Library.

React Deployment & Build Process

How to deploy a React app?

1⃣ Run npm run build.
2️⃣ Deploy on Netlify, Vercel, or GitHub Pages.

Difference between npm start and npm run build?

• npm start → Runs the dev version.

• npm run build → Creates optimized production files.