React Interview Questions India 2026: Top 35

Aapne React seekh liya, projects bhi bana liye, GitHub pe code bhi daal diya. But interview mein jab interviewer puchta hai, “React re-render kab hota hai?” ya “useMemo aur useCallback mein difference?” tab thoda blank feel hota hai na?

India mein 2026 tak React developer jobs aur competitive ho chuki hain. TCS, Infosys, Wipro jaise service companies se leke Razorpay, Swiggy, Zomato, Paytm, PhonePe jaise product startups tak, sab React developers hire kar rahe hain. Fresher roles ₹3.5 LPA se start ho sakte hain, strong portfolio ke saath ₹6 LPA tak mil sakta hai. 2-4 years experience wale React devs ₹10 LPA se ₹22 LPA tak easily target kar sakte hain, depending on company, DSA, system design basics, aur communication.

Ye blog tumhare liye ek practical prep guide hai: React Interview Questions India 2026: Top 35. Isme theory bhi hai, answer ka style bhi hai, aur Indian interview context bhi.

React Interviews India Mein Kaise Hote Hain?#

React interview usually 3 parts mein hota hai:

1. JavaScript fundamentals

   • closures
   • promises
   • async await
   • event loop
   • array methods
   • ES6 concepts

2. React core concepts

   • components
   • props and state
   • hooks
   • lifecycle
   • rendering
   • performance

3. Practical coding

   • todo app
   • search filter
   • pagination
   • forms
   • API integration
   • debouncing
   • reusable components

Service companies like TCS, Infosys, Wipro often basics pe focus karti hain. Product companies like Razorpay, Swiggy, Zomato, PhonePe thoda deeper jaati hain, especially performance, architecture, state management, testing, aur code quality.

Agar tum fresher ho, toh aim karo ki React ke 70 percent concepts confidently explain kar pao. Agar experienced ho, toh “maine project mein kaise use kiya” ye batana must hai.

Top 35 React Interview Questions India 2026#

1. React kya hai?

React ek JavaScript library hai jo UI banane ke liye use hoti hai. Iska main focus reusable components aur fast UI updates pe hota hai.

Simple answer:

“React ek component-based JavaScript library hai jisse hum dynamic user interfaces banate hain. Isme virtual DOM use hota hai, jo UI updates ko efficient banata hai.”

Interview tip: React ko framework mat bolo, library bolo. Ye basic cheez bhi interviewer notice karta hai.

2. React framework hai ya library?

React library hai, framework nahi. Framework usually routing, HTTP, form handling, state management sab built-in deta hai. React mainly view layer handle karta hai.

Example:

Angular ek framework hai, React ek UI library hai. React ke saath routing ke liye React Router, state ke liye Redux, Zustand, Context API use kar sakte ho.

3. Component kya hota hai React mein?

Component UI ka reusable block hota hai. Jaise button, navbar, card, modal, login form, product list.

React app basically components ka tree hoti hai.

Example:

function Button() {
  return <button>Click Me</button>;
}

Interview mein bol sakte ho:

“Component independent, reusable UI piece hota hai jo props receive kar sakta hai aur state maintain kar sakta hai.”

4. Functional component aur class component mein difference?

Functional components simple JavaScript functions hote hain. Hooks ke baad functional components mostly standard ban gaye hain.

Class components older pattern hain jisme lifecycle methods use hote the.

Difference:

1. Functional components hooks use karte hain.
2. Class components this keyword use karte hain.
3. Functional components concise hote hain.
4. New React projects mostly functional components use karte hain.

2026 interviews mein class components aate hain, but mainly comparison ke liye.

5. JSX kya hai?

JSX JavaScript XML ka short form hai. Ye JavaScript ke andar HTML-like syntax likhne deta hai.

Example:

const heading = <h1>Hello React</h1>;

Actually browser JSX directly nahi samajhta. Babel JSX ko JavaScript mein convert karta hai.

Good interview line:

“JSX syntactic sugar hai React.createElement ke liye.”

6. Props kya hote hain?

Props parent component se child component ko data pass karne ke liye use hote hain. Props read-only hote hain.

Example:

function User({ name }) {
  return <p>Hello \{name\}</p>;
}

Parent:

<User name="Rahul" />

Important point: Child component props ko directly modify nahi kar sakta.

7. State kya hota hai?

State component ka internal data hota hai jo change ho sakta hai. Jab state change hota hai, component re-render hota hai.

Example:

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

State use hota hai:

1. form input values
2. toggles
3. API response data
4. selected tabs
5. loading states

8. Props aur state mein difference?

Props parent se aate hain, state component ke andar manage hota hai.

Quick table style answer:

1. Props read-only hote hain.
2. State mutable hota hai via setter function.
3. Props parent control karta hai.
4. State component khud control karta hai.
5. Props component communication ke liye.
6. State UI behavior manage karne ke liye.

9. Virtual DOM kya hota hai?

Virtual DOM actual DOM ka lightweight JavaScript representation hota hai. Jab state ya props change hote hain, React pehle virtual DOM update karta hai, phir compare karke actual DOM mein sirf required changes apply karta hai.

Is process ko reconciliation bolte hain.

Interview line:

“Virtual DOM React ko efficient UI updates mein help karta hai kyunki direct DOM operations costly hote hain.”

10. Reconciliation kya hai?

Reconciliation wo process hai jisme React old virtual DOM aur new virtual DOM compare karta hai. Fir decide karta hai actual DOM mein kya update karna hai.

React diffing algorithm use karta hai. Ye performance improve karta hai because full DOM replace nahi hota.

11. Keys React lists mein kyun important hain?

Keys React ko list items uniquely identify karne mein help karti hain. Jab list update, delete, reorder hoti hai, React key ke through track karta hai kaunsa item change hua.

Example:

users.map(user => <li key={user.id}>{user.name}</li>)

Index ko key banana avoid karo, especially jab list reorder ya delete ho sakti hai.

Interview mein bolna:

“Stable unique id best key hoti hai.”

12. useState hook kya karta hai?

useState functional component mein state add karta hai.

Example:

const [name, setName] = useState("");

Ye array return karta hai:

1. current state value
2. setter function

Setter call karne par React component re-render karta hai.

13. useEffect hook kya hai?

useEffect side effects handle karta hai. Jaise API call, event listener, timer, document title update.

Example:

useEffect(() => {
  fetchUsers();
}, []);

Dependency array ka role important hai:

1. [], component mount pe run
2. [value], value change hone par run
3. no array, every render pe run

14. useEffect cleanup function kya hota hai?

Cleanup function memory leaks avoid karne ke liye hota hai. Jaise event listener remove karna, timer clear karna, subscription close karna.

Example:

useEffect(() => {
  const timer = setInterval(() => {
    console.log("running");
  }, 1000);

  return () => clearInterval(timer);
}, []);

Interviewer ko ye batana: cleanup component unmount hone par run hota hai, aur dependency change se pehle bhi run hota hai.

15. Controlled component kya hota hai?

Controlled component mein form input ka value React state se control hota hai.

Example:

const [email, setEmail] = useState("");

<input value=\{email\} onChange={(e) => setEmail(e.target.value)} />

Ye forms ke liye common hai because validation, submit, reset easy ho jata hai.

16. Uncontrolled component kya hota hai?

Uncontrolled component mein form value DOM khud manage karta hai. React direct state control nahi karta. Usually ref se value access karte hain.

Example:

const inputRef = useRef();

const handleSubmit = () => {
  console.log(inputRef.current.value);
};

Controlled components zyada common hain, but uncontrolled useful ho sakte hain simple forms ya file input mein.

17. useRef kya hota hai?

useRef mutable reference create karta hai jo re-render ke beech value preserve karta hai. Iski value change hone par component re-render nahi hota.

Use cases:

1. DOM element access
2. timer id store
3. previous value store
4. focus input

Example:

const inputRef = useRef(null);

inputRef.current.focus();

Hooks Aur Performance Questions#

Yahi section product company interviews mein kaafi important hota hai. Agar tum Razorpay, PhonePe, Swiggy, Zomato jaise companies target kar rahe ho, toh in questions ko lightly mat lena.

18. useMemo kya hai?

useMemo expensive calculation ka result memoize karta hai. Matlab agar dependencies same hain, toh calculation dubara run nahi hogi.

Example:

const total = useMemo(() => {
  return items.reduce((sum, item) => sum + item.price, 0);
}, [items]);

Use tab karo jab calculation heavy ho. Har jagah useMemo lagana good practice nahi hai.

19. useCallback kya hai?

useCallback function ko memoize karta hai. Ye useful hota hai jab function child component ko prop ke form mein pass kar rahe ho aur child React.memo se wrapped hai.

Example:

const handleClick = useCallback(() => {
  console.log("clicked");
}, []);

Difference yaad rakho:

1. useMemo value memoize karta hai.
2. useCallback function memoize karta hai.

20. React.memo kya karta hai?

React.memo component ko unnecessary re-render se bachata hai. Agar props same hain, component re-render nahi hoga.

Example:

const UserCard = React.memo(function UserCard({ user }) {
  return <div>{user.name}</div>;
});

But agar props object ya function hain jo har render pe new reference ban rahe hain, React.memo expected result nahi dega. Isliye useCallback aur useMemo kabhi kabhi saath use hote hain.

21. React component re-render kab hota hai?

Component re-render hota hai jab:

1. uska state change ho
2. uske props change ho
3. parent component re-render ho
4. context value change ho

Good answer:

“React re-render ka matlab DOM update zaroori nahi. React component function dubara execute karta hai, phir compare karke DOM update decide karta hai.”

22. Lazy loading React mein kaise karte hain?

React.lazy aur Suspense use karke components ko lazy load kar sakte hain.

Example:

const Dashboard = React.lazy(() => import("./Dashboard"));

<Suspense fallback={<p>Loading...</p>}>
  <Dashboard />
</Suspense>

Ye bundle size reduce karta hai, initial page load fast karta hai. Large apps mein important hai.

23. Code splitting kya hai?

Code splitting ka matlab app ke JavaScript bundle ko smaller chunks mein split karna. Isse user ko initial load pe pura app download nahi karna padta.

React mein lazy loading, dynamic import, route-based splitting common methods hain.

Example: Admin dashboard, reports page, payment page tabhi load karo jab user waha jaye.

24. Error Boundary kya hota hai?

Error Boundary React component hota hai jo child component tree ke runtime errors catch karta hai aur fallback UI show karta hai.

Class component se traditionally banaya jata hai using componentDidCatch and getDerivedStateFromError.

Important: Error boundaries event handlers ke errors catch nahi karte. Async errors bhi directly catch nahi karte.

25. Context API kya hai?

Context API prop drilling avoid karne ke liye use hoti hai. Jab same data multiple nested components ko chahiye, context useful hai.

Example use cases:

1. theme
2. logged-in user
3. language
4. auth token
5. cart count

But har state Context mein daalna mat. Frequent updates se unnecessary re-renders ho sakte hain.

26. Prop drilling kya hota hai?

Prop drilling tab hota hai jab data parent se deep child tak multiple intermediate components ke through pass karna padta hai, even if middle components ko wo data chahiye hi nahi.

Solution:

1. Context API
2. state management library
3. component composition
4. lifting state properly

27. Redux kya hai?

Redux ek state management library hai. Ye global state manage karne ke liye use hoti hai, especially large applications mein.

Core concepts:

1. Store
2. Actions
3. Reducers
4. Dispatch
5. Selectors

2026 mein Redux Toolkit common hai. Old Redux boilerplate se bachne ke liye companies Redux Toolkit prefer karti hain.

28. Redux Toolkit kya hai?

Redux Toolkit Redux ka recommended way hai. Isme slices, configureStore, createAsyncThunk jaise tools milte hain, jisse code shorter aur easier ho jata hai.

Example interview answer:

“Redux Toolkit Redux setup ko simple banata hai. Boilerplate kam hota hai, immutable updates easy hote hain because Immer internally use hota hai.”

29. React Router kya hai?

React Router single-page applications mein routing handle karta hai. Isse different URLs pe different components render kar sakte hain bina full page reload ke.

Example routes:

1. /login
2. /dashboard
3. /products/:id
4. /profile

Important concepts:

1. BrowserRouter
2. Routes
3. Route
4. Link
5. useNavigate
6. useParams

30. SPA kya hota hai?

SPA ka full form Single Page Application hai. Isme initial HTML load hota hai, fir JavaScript route changes handle karti hai without full page reload.

Benefits:

1. smooth user experience
2. fast route transitions
3. reusable frontend structure

Drawbacks:

1. initial bundle size issue
2. SEO challenge if not handled
3. client-side rendering dependency

Practical React Coding Questions#

Ab theory ke baad practical questions. Ye TCS NQT style interviews mein bhi aa sakte hain, aur startups ke live coding rounds mein bhi.

31. API se data fetch kaise karoge?

Basic answer:

const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");

useEffect(() => {
  const fetchUsers = async () => {
    try {
      setLoading(true);
      const res = await fetch("https://api.example.com/users");
      const data = await res.json();
      setUsers(data);
    } catch (err) {
      setError("Something went wrong");
    } finally {
      setLoading(false);
    }
  };

  fetchUsers();
}, []);

Important points:

1. loading state handle karo
2. error state handle karo
3. empty dependency array use karo if only on mount
4. cleanup consider karo if request cancel karni hai

32. Search filter kaise implement karoge?

Example:

const [search, setSearch] = useState("");

const filteredUsers = users.filter(user =>
  user.name.toLowerCase().includes(search.toLowerCase())
);

UI:

<input
  value=\{search\}
  onChange={(e) => setSearch(e.target.value)}
  placeholder="Search user"
/>

Interview mein add karo:

“For large lists, debounce and server-side search better hoga.”

33. Debouncing kya hota hai?

Debouncing ka matlab function ko tab execute karna jab user kuch time tak input stop kare. Search box mein useful hota hai, taaki har keypress pe API call na ho.

Example:

useEffect(() => {
  const timer = setTimeout(() => {
    console.log("API call for", search);
  }, 500);

  return () => clearTimeout(timer);
}, [search]);

Use cases:

1. search suggestions
2. window resize
3. auto-save
4. filter API calls

34. Todo app ka structure kaise banaoge?

Todo app simple lagta hai, but interviewer isse state management check karta hai.

Features:

1. add todo
2. delete todo
3. mark complete
4. filter active completed
5. edit todo

State example:

const [todos, setTodos] = useState([]);
const [text, setText] = useState("");

Add todo:

const addTodo = () => {
  if (!text.trim()) return;

  setTodos([
    ...todos,
    { id: Date.now(), text, completed: false }
  ]);

  setText("");
};

Mark complete:

const toggleTodo = (id) => {
  setTodos(todos.map(todo =>
    todo.id === id ? { ...todo, completed: !todo.completed } : todo
  ));
};

Good habit: state ko directly mutate mat karo.

35. React app performance improve kaise karoge?

Is question ka answer structured do. Random terms mat fekna.

Performance improve karne ke ways:

1. unnecessary re-renders avoid karo
2. React.memo use karo where needed
3. useMemo for heavy calculations
4. useCallback for stable function references
5. lazy loading and code splitting
6. image optimization
7. pagination or infinite scroll for big lists
8. virtualization using react-window
9. avoid inline heavy calculations in render
10. production build use karo
11. bundle size analyze karo
12. unnecessary dependencies remove karo

Experienced answer:

“Main pehle measure karunga using React DevTools Profiler, phir optimization apply karunga. Har jagah memoization lagana solution nahi hota.”

Bonus: India Mein React Interview Answer Kaise Bolna Hai?#

Sirf definition ratna enough nahi hai. Interviewer ko lagna chahiye ki tumne real project mein use kiya hai.

STAR style use karo

Answer ko aise frame karo:

1. Situation: Project mein kya problem thi
2. Task: Tumhara role kya tha
3. Action: Tumne React mein kya implement kiya
4. Result: Kya improvement hua

Example:

“Mere ecommerce project mein product listing page slow ho raha tha because 1000 products render ho rahe the. Maine pagination aur React.memo add kiya. Isse initial render time noticeably reduce hua aur UI smoother ho gaya.”

Fresher ke liye sample answer

“Main fresher hoon but maine React use karke job portal clone banaya hai. Usme login page, job listing, search filter, saved jobs, and API integration implement kiya. State ke liye useState aur useEffect use kiya, routing ke liye React Router use kiya.”

Ye honest bhi hai aur confident bhi.

Experienced ke liye sample answer

“Current project mein hum React with Redux Toolkit use karte hain. Main dashboard module handle karta hoon jisme role-based access, charts, filters, and API integration hai. Performance issue ke liye maine code splitting and memoization apply kiya where needed.”

React Salary Expectations India 2026#

React skill ke basis pe salary vary karti hai. City, company, college, projects, communication, DSA, sab matter karta hai.

Fresher React Developer

Expected range:

1. Service companies: ₹3.5 LPA to ₹6 LPA
2. Mid-size startups: ₹5 LPA to ₹9 LPA
3. Strong product startup offer: ₹8 LPA to ₹14 LPA

Agar tumhare paas strong projects, GitHub, internship, and good JS fundamentals hain, toh fresher hoke bhi ₹8 LPA target kar sakte ho.

1-3 Years Experience

Expected range:

1. TCS, Infosys, Wipro type roles: ₹5 LPA to ₹10 LPA
2. Product companies: ₹10 LPA to ₹22 LPA
3. Fintech startups: ₹12 LPA to ₹25 LPA

Razorpay, PhonePe, Paytm jaise companies mein React ke saath testing, TypeScript, performance, and system design basics important hote hain.

4-6 Years Experience

Expected range:

1. Senior frontend roles: ₹18 LPA to ₹35 LPA
2. Strong product companies: ₹30 LPA to ₹50 LPA
3. Lead frontend roles: ₹40 LPA plus

Is level pe sirf React nahi, architecture, mentoring, design systems, testing, performance, and business thinking bhi chahiye.

React Interview Prep Roadmap 2026#

Agar tum confused ho ki kaha se start karna hai, ye simple plan follow karo.

Week 1: JavaScript Strong Karo

Focus areas:

1. let, const, var
2. closures
3. promises
4. async await
5. event loop
6. map, filter, reduce
7. spread and rest
8. destructuring
9. this keyword
10. call, apply, bind

React interview mein JS weak hua toh problem hoti hai. React JavaScript ke upar hi built hai.

Week 2: React Core

Cover karo:

1. components
2. JSX
3. props
4. state
5. events
6. conditional rendering
7. lists and keys
8. forms
9. useState
10. useEffect

Daily 2 small components banao.

Week 3: Intermediate React

Cover karo:

1. useRef
2. useMemo
3. useCallback
4. React.memo
5. Context API
6. React Router
7. custom hooks
8. API integration
9. error handling
10. loading states

Week 4: Projects and Mock Interviews

Build karo:

1. job portal mini app
2. movie search app
3. ecommerce product listing
4. admin dashboard
5. expense tracker

Har project mein README likho. Screenshots add karo. Live link deploy karo using Vercel or Netlify.

Common Mistakes Jo Candidates Karte Hain#

1. React ratna, JavaScript ignore karna

Interviewer React se pehle JS puch sakta hai. Agar promises, closures, event loop nahi aata, toh React knowledge weak lagti hai.

2. Projects explain nahi kar paana

Resume mein “React ecommerce app” likha hai, but interview mein architecture explain nahi kar pa rahe. Ye red flag hai.

Prepare these points:

1. features kya the
2. state kaise manage ki
3. API kaise call ki
4. errors kaise handle kiye
5. performance issue aaya kya
6. deployment kaise kiya

3. useEffect dependency array galat samajhna

Ye very common mistake hai. Dependency array clear rakho. Infinite loop ka reason samjho.

Example problem:

useEffect(() => {
  setCount(count + 1);
}, [count]);

Ye infinite re-render create kar sakta hai.

4. State direct mutate karna

Wrong:

todos.push(newTodo);
setTodos(todos);

Right:

setTodos([...todos, newTodo]);

React immutable updates expect karta hai for proper rendering.

5. Resume mein extra skills bhar dena

Agar Redux nahi aata, resume mein mat likho. Agar TypeScript basic hai, “basic TypeScript” likho. Interviewer 2 questions mein pakad lega.

Resume Tips for React Developers#

React interview call lane ke liye resume ATS-friendly hona chahiye. Bahut log 200 jobs apply karte hain, callback zero, because resume bots ke filter mein pass hi nahi hota.

React resume mein ye keywords add karo

Agar genuinely aata hai toh add karo:

1. React.js
2. JavaScript ES6
3. TypeScript
4. Redux Toolkit
5. Context API
6. React Router
7. REST API
8. HTML5
9. CSS3
10. Tailwind CSS
11. Git
12. Jest
13. React Testing Library
14. Vite
15. Webpack
16. Responsive Design
17. Performance Optimization
18. Lazy Loading
19. Code Splitting

Project bullets ka format

Weak bullet:

“Made React project.”

Strong bullet:

“Built a React job portal with search filters, saved jobs, authentication UI, and responsive design, improving user flow across mobile and desktop screens.”

Aur better:

“Developed a React-based job portal using React Router, Context API, and REST APIs, with search filters and saved jobs feature. Deployed on Vercel and maintained clean component structure.”

Final Prep Checklist#

Interview se pehle ye checklist tick kar:

1. React basics revise kiya
2. useState, useEffect examples practice kiye
3. props vs state clear hai
4. virtual DOM explain kar sakta hai
5. keys and reconciliation clear hai
6. controlled forms code likh sakta hai
7. API fetch with loading error code aata hai
8. search filter and debounce implement kar sakta hai
9. Redux Toolkit basics clear hain
10. React Router use kiya hai
11. 2 projects live deployed hain
12. GitHub clean hai
13. resume one-page and ATS-friendly hai
14. salary expectation realistic hai
15. mock interview diya hai

React interview crack karna impossible nahi hai. Bas random YouTube videos dekhne ke bajay structured prep karo. Definitions samjho, code likho, projects explain karna seekho, aur resume ko ATS ke hisaab se clean banao.

Agar tum React jobs ke liye apply kar rahe ho aur callbacks nahi aa rahe, toh pehle apna resume check karao. JobRise ka free ATS checker use karo, score dekho, aur fix karo before next application: Free ATS Resume Checker