## Most Asked React JS Interview Questions and Answers
- ### 1. What is React? React is a JavaScript frontend library used for building interactive interfaces using **component-based architecture**. It uses **JSX** to build the components. It is maintained by Meta (formerly Facebook).
**What is component-based architecture?** Component-based architecture means creating small, reusable pieces of UI, for example, Header, Footer, Button, and Card.
**What is JSX** JSX is a JavaScript XML, which allows writing HTML inside JavaScript and JavaScript inside HTML. The browser does not support JSX directly, that's why Babel (JavaScript Compiler) converts JSX to browser-compatible JavaScript ``` const App = ()=> { const a = [ "test1" ,"test2" , "test3" ] return

//this is HTML {a.map((element) => { // this is JavaScript return

{element}

// P tag is HTML and {element} is JavaScript }) }

} export default App ```
- ### 2. What are the features of React? 1. **Component-Based Architecture** 2. **JSX ( JavaScript XML)** 3. **Virtual DOM** At the initial render, React creates a copy of the Real DOM, which we call as **Virtual DOM**. But why does React need it? Because: - **Real DOM is slow** to manipulate. - Frequent UI changes (like in dynamic apps) cause performance issues. - React wants to **optimize rendering** and make updates **fast and efficiently**.
**But how does it solve the above problems?** As we know, React creates a copy of the Real DOM at initial render, then when we update state in our application, React again creates a new virtual DOM, then it compares the new Virtual DOM with the previous Virtual DOM and updates only those **Nodes** which are changed.
Now, what are **Nodes** in this context In **React’s Virtual DOM**, a **node** refers to: A **unit in the UI tree** — typically a **JSX element** like `

`, `

); } ``` ### -

4. What is Real DOM? Real DOM is the actual Tree structure DOM ( Document Object Model ) rendered by browsers. react creates a copy of this DOM to create virtual DOM ``` Document └── html └── body └── div#root ├── h1 → "Hello World" └── p → "This is a paragraph." ```
- ### 5. What is React Hook, and what are the commonly used React Hooks? **React Hook** is just a **special function** in React. It lets you **add features** like: - Saving data (like a value or input) - Running code when something changes
Hooks allow you to do powerful things **(like saving state or using lifecycle methods)** inside a simple function – no classes needed anymore. For example: ``` function MyComponent() { const [count, setCount] = useState(0); useEffect(() => { // do something }, []); return

{count}

; } ```
**Commonly Used React Hooks**

1. `useState` – to remember things Think of it like a **memory** for your component. You can use it to **save a value** and **change it later**. ``` const [count, setCount] = useState(0); ``` Now `count` starts at 0.
You can call `setCount(count + 1)` to change it.
2. `useEffect` – to do something after rendering Use this when you want to: - Call an API - Set a timer - Listen to changes Example: Run code after the component shows on screen ``` useEffect(() => { console.log("Component is showing!"); }, []); ```
3. `useContext` – to share data easily Sometimes you want to **share data** (such as a theme or user) with multiple components, without passing it through props repeatedly. Example: Get user info from shared context ``` const user = useContext(UserContext); ``` 4. `useRef` – to get or store something secretly This hook we use when we want to store a value without re-rendering the component, or to access an HTML element directly
Example: Focus on an input box ``` const inputRef = useRef(null); ```
5. `useMemo` – to remember calculated values When something takes time to calculate, you can use `useMemo` to **remember the result**, so it doesn’t recalculate every time. ``` const result = useMemo(() => slowCalculation(num), [num]); ```
6. `useCallback` – to remember functions If you're passing functions to child components, use `useCallback` to avoid creating new ones every time. ``` const handleClick = useCallback(() => { console.log("Clicked"); }, []); ```
7. `useReducer` – for managing complex state This is like `useState`, but **better for more complicated logic**, like forms or toggles. ``` const [state, dispatch] = useReducer(reducer, initialState); ``` \- ### 6. Explain the useState and useEffect hooks.
**What is** `useState`**?**
`useState` is a **React Hook** that lets your **function component remember values between renders**.
Why do we need `useState`?
In React, every time something changes (like clicking a button), the **component re-renders**. If you declare a variable like this: ``` let count = 0; ``` It resets to `0` Every time the component re-renders. That’s not helpful for interactive UI.
So we use `useState` to **keep values "alive"** between renders.
Syntax of `useState` ``` const [value, setValue] = useState(initialValue); ``` - `value` → the current value (like `count`, `name`, `email`) - `setValue` → a function to change the value - `initialValue` → the starting value

Simple Example: Counter ``` import React, { useState } from "react"; function Counter() { const [count, setCount] = useState(0); // count starts at 0 const handleClick = () => { setCount(count + 1); // update the count }; return (

You clicked {count} times

); } ``` ### How it works: 1. When the component renders, `count` is `0`. 2. When you click the button, `setCount(1)` is called. 3. React **re-renders** the component with `count = 1`. 4. You see the updated value on the screen.
The Cycle of `useState` User clicks → setState called → React re-renders → New value appears

**What is** `useEffect`**?**
`useEffect` is a **React Hook** that lets you **run code after a component renders**.
If you want to do something when your component loads, updates, or unmounts – like fetching data or setting up a timer – use `useEffect`.
Why do we need `useEffect`? In traditional class components, we had **lifecycle methods** like: - `componentDidMount` – When the component loads - `componentDidUpdate` – When it updates - `componentWillUnmount` – When it gets removed But in **functional components**, we don’t have these methods.
So we use `useEffect` to handle all of those scenarios.
Syntax of useEffect : ``` useEffect(() => { // Do something here (side effect) return () => { // Cleanup code (optional) }; }, [dependencies]); ``` - The first function runs **after render** - The `return` The part is optional and runs during **cleanup** - `[dependencies]` tells React when to re-run this code
So, **How does it perform** `componentDidMount` **lifecycle** ``` useEffect(() => { console.log("Component mounted"); }, []); ``` - `[]` = empty array → runs only **once** when the component loads - Good for: **fetching data, setting up event listeners**
**How does it perform** `componentDidUpdate` **lifecycle** ``` useEffect(() => { console.log("Count changed:", count); }, [count]); ``` - This effect runs every time `count` changes. - Good for: **syncing state, reacting to user input**
**How does it perform** `componentWillUnmount`**lifecycle** **Cleanup Function** If your effect creates something that needs cleanup (like a timer, event listener), return a function from useEffect. ``` useEffect(() => { const timer = setInterval(() => { console.log("Tick"); }, 1000); // Cleanup function return () => { clearInterval(timer); console.log("Timer cleared"); }; }, []); ``` - Timer starts when the component mounts - Timer is cleared when the component unmounts
### -

7. What is the purpose of the useReducer hook?
The `useReducer` Hook is used to **manage complex state logic** in a React function component, especially when you want a more **organized way to manage state updates.** `useReducer` It's like an alternative to `useState`, but better suited for **complicated state logic** or **multiple related state updates**.
``` const [state, dispatch] = useReducer(reducer, initialState); ``` - `state`: current state - `dispatch`: function to send actions (like `setState`) - `reducer`: function that updates the state based on an action - `initialState`Starting value of the state

Counter with `useReducer` : ``` import React, { useReducer } from 'react'; const initialState = { count: 0 }; function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; default: return state; } } function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return (

Count: {state.count}

); } ```
How It Works: 1. You define a `reducer` Function – it decides how to update the state based on an action. 2. `dispatch({ type: 'increment' })` sends an action to the reducer. 3. The reducer returns the **new state**. 4. React re-renders the component with the new state.

### 8. How do you handle routing in React?
In React, routing is handled using a library called **React Router**. It allows you to: - Navigate between different pages (URLs) - Show different components based on the URL - Pass parameters via the URL - Create nested routes and layouts
Step-by-Step: Basic Routing with React Router 1. Install React Router?
``` npm install react-router-dom ``` 2. Set up the Router in `App.js`
``` import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from './Home'; import About from './About'; import Contact from './Contact'; function App() { return ( } /> } /> } /> ); } export default App; ``` 3. Create Pages (Components) ``` // Home.js function Home() { return

Welcome to the Home Page

; } export default Home; ``` Do the same for `About.js`, `Contact.js`.
Other Features of React Router
**Route Parameters** ``` } /> ```
Get the param ``` import { useParams } from "react-router-dom"; const { id } = useParams(); ```
**Programmatic Navigation**
``` import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); navigate("/about"); ```
**404 Page (Not Found)** ``` } /> ```

Hello, {props.name}

Count: {state.count}

Welcome to the Home Page

programming

Most asked React Js interview questions - 2025

Flutter: What Works, What Hurts & What You Should Know

Programming

Programming

Popular on Blogar

Most asked React Js interview questions - 2025

Flutter: What Works, What Hurts & What You Should Know

Stay In Touch

Follow Us