*Last updated: 13 October 2026 · By the Asuraa Team* > **Quick answer:** The React interview questions freshers face most cover props vs state, the virtual DOM, keys in lists, the rules of hooks, useState snapshots and updater functions, useEffect dependencies and cleanup, lifting state up and controlled inputs. React 19 is the current major version, released on 5 December 2024 according to react.dev. Answer with a definition, the reason it matters and a short JSX example. **Key takeaways** - Fresher React interviews focus on components, props and state, hooks, keys in lists and how data flows between components. - React's Rules of Hooks require calling hooks only at the top level of function components or custom hooks, never inside conditions, loops, event handlers or after an early return. - Because state is a snapshot per render, calling setCount(count + 1) three times in one handler adds only one; the updater form setCount(c => c + 1) adds three. - In development with Strict Mode, React runs an extra setup and cleanup cycle for each effect to expose missing cleanup logic; production runs it once. - The react.dev versions page lists React 19.0.0 as released on 5 December 2024 and React 18.0.0 on 29 March 2022. React interviews for freshers revolve around components, props and state, hooks (especially `useState` and `useEffect`), rendering lists with keys, and how data flows between components. The 22 questions below are grouped by those areas, with answers grounded in the official [react.dev](https://react.dev/reference/react/useEffect) documentation. React is a common ask in front-end hiring: [Asuraa's October 2026 job market report](https://asuraa.in/blog/india-fresher-job-market-report-2026) found JavaScript, React or Node named in 17.0% of the fresher listings it analysed. ## Which React topics carry the most weight in fresher interviews? Hooks and state carry the most weight, because most real bugs in fresher code come from misunderstanding them. | Area | Typical questions | What interviewers check | |---|---|---| | Fundamentals | Virtual DOM, JSX, props vs state, keys | Whether you know how React renders | | Hooks | useState, useEffect, rules of hooks, useRef | Correct mental model of renders and effects | | Data flow | Lifting state, controlled inputs, context | Component design decisions | | Performance | Re-renders, memo, useMemo, useCallback | Awareness without premature optimisation | | Ecosystem | Data fetching, routing, versions | Practical project experience | The [interview questions by subject guide](https://asuraa.in/blog/interview-questions-by-subject-guide) links question banks for every other subject you may face in the same round. ## What React fundamentals questions are asked? ### 1. What is React and why is it used? React is a JavaScript library for building user interfaces out of reusable components. You describe what the UI should look like for a given state, and React updates the DOM when that state changes. This declarative model, a large ecosystem and component reuse are why many product companies and startups use it. ### 2. What is the virtual DOM and reconciliation? React keeps a lightweight description of the UI in memory. When state changes, React renders the component again, compares the new description with the previous one (reconciliation), and applies only the necessary changes to the real DOM. Direct DOM operations are relatively slow, so batching minimal updates keeps the UI efficient. ### 3. What is JSX? JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. A build tool compiles it into regular JavaScript function calls that create React elements. You can embed any JavaScript expression inside curly braces, and you use `className` instead of `class` because JSX is JavaScript. ```jsx const Greeting = ({ name }) =>

Hello, {name}

; ``` ### 4. What is the difference between function and class components? Class components extend `React.Component`, keep state in `this.state` and use lifecycle methods like `componentDidMount`. Function components are plain functions that return JSX and use hooks for state and side effects. Modern React code and the react.dev docs use function components; know class components mainly to read older codebases. ### 5. What is the difference between props and state? Props are inputs passed from a parent component and are read-only inside the child. State is data a component owns and can change with its setter, which triggers a re-render. If a value is passed in, it is a prop; if the component manages it over time, it is state. ### 6. Why does React need keys in lists? Keys tell React which array item each rendered component corresponds to, so it can match items correctly when the list is reordered, inserted into or filtered. The react.dev page on [rendering lists](https://react.dev/learn/rendering-lists) says keys must be unique among siblings and must not change between renders. Using the array index can cause subtle bugs when the order changes, and generating keys with `Math.random()` during render recreates every item and loses user input. Use a stable ID from your data. ```jsx {students.map(s =>

{s.name}

)} ``` ## What hooks questions should freshers prepare? ### 7. What are hooks? Hooks are functions whose names start with `use` that let function components use React features such as state (`useState`), side effects (`useEffect`), refs (`useRef`) and context (`useContext`). They replaced most class-component patterns. You can also write your own custom hooks to reuse logic. ### 8. What are the rules of hooks? According to react.dev's [Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks), you must call hooks only at the top level of a function component or custom hook, never inside conditions, loops, nested functions, event handlers, or after an early `return`. You also must not call them from regular JavaScript functions or class components. React relies on hooks being called in the same order on every render. The `eslint-plugin-react-hooks` package catches violations. ### 9. Why does calling setCount(count + 1) three times only add one? State is a snapshot for each render. The react.dev page [State as a Snapshot](https://react.dev/learn/state-as-a-snapshot) explains that inside one render `count` has a fixed value, so three calls all compute `0 + 1` and React re-renders with 1. Setting state does not change the variable you already have; it requests a new render with the new value. ### 10. How do you update state based on the previous state? Pass an updater function to the setter instead of a value. React queues the updaters and runs each with the latest pending state, so three calls now add three. Use this whenever the next state depends on the previous one, such as counters or toggles. ```jsx setCount(c => c + 1); setCount(c => c + 1); setCount(c => c + 1); // +3 ``` ### 11. How does the useEffect dependency array work? `useEffect(setup, dependencies)` runs code that synchronises a component with an external system. The [useEffect reference](https://react.dev/reference/react/useEffect) explains three forms: with no array the effect runs after every commit; with `[]` it runs only after the initial mount; with `[a, b]` it runs after mount and whenever `a` or `b` changes, compared with `Object.is`. Every reactive value the effect reads must be listed, and the linter enforces this. ### 12. What is the cleanup function, and why does my effect run twice in development? The setup function can return a cleanup function that undoes what setup did, such as disconnecting a socket or clearing an interval. React runs cleanup before re-running the effect with new dependencies and once on unmount. In development with Strict Mode, react.dev says React runs one extra setup and cleanup cycle before the real setup as a stress test; if that causes a visible problem, your cleanup is incomplete. Production runs the effect once. ```jsx useEffect(() => { const id = setInterval(() => setSeconds(s => s + 1), 1000); return () => clearInterval(id); }, []); ``` ### 13. What is useRef used for? `useRef` returns a mutable object whose `.current` property persists across renders without causing a re-render when it changes. It has two common uses: holding a reference to a DOM element (for focus or measuring size) and storing values like timer IDs that the UI does not display. If changing a value should update the screen, it belongs in state, not a ref. ### 14. What is the difference between useMemo and useCallback? `useMemo` caches the result of a calculation between renders and recomputes only when its dependencies change. `useCallback` caches a function definition, which matters when you pass a callback to a child wrapped in `memo`. Both are performance tools; add them when you have measured a slow render, not by default. ### 15. What is prop drilling, and how does useContext help? Prop drilling means passing a prop through several intermediate components that do not use it, just to reach a deep child. Context lets a parent provide a value (theme, logged-in user, language) and any descendant read it with `useContext` directly. Use context for widely shared data, not for every piece of state, since all consumers re-render when the value changes. ### 16. What is a custom hook? A custom hook is a function starting with `use` that calls other hooks to package reusable stateful logic, such as `useFetch` or `useWindowWidth`. Each component that calls it gets its own independent state. It shares logic, not state. ## What data-flow and design questions come up? ### 17. What does lifting state up mean? When two components need to share or stay in sync with the same data, you move that state to their closest common parent and pass it down as props, along with handlers to change it. The react.dev page on [sharing state between components](https://react.dev/learn/sharing-state-between-components) calls this keeping a single source of truth: each piece of state has one owner. A child cannot change the parent's state directly, so it calls the handler it received. ### 18. What is the difference between controlled and uncontrolled components? A controlled component gets its important values from props, so the parent fully decides its behaviour; a controlled form input takes `value` from state and updates it in `onChange`. An uncontrolled component keeps its own internal state, like an input read through a ref only on submit. Controlled inputs make validation and conditional UI easier; uncontrolled ones need less code. ```jsx setEmail(e.target.value)} /> ``` ### 19. When should you not use useEffect? react.dev advises that if you are not synchronising with an external system, you probably do not need an effect. Values derived from props or state should be calculated during render, and logic triggered by a user action belongs in the event handler. Overusing effects causes extra renders and bugs that are hard to trace. ## What performance and ecosystem questions are asked? ### 20. When does a React component re-render? A component re-renders when its own state changes, when its parent re-renders, or when a context it reads changes. Re-rendering is not automatically a problem, because React only touches the DOM where output differs. Wrapping a child in `memo` skips its re-render when its props are unchanged, which is useful for expensive components. ### 21. How do you fetch data in React and avoid race conditions? The simple approach is fetching inside `useEffect` and storing the result in state, with a cleanup flag so a slow, outdated response does not overwrite a newer one. react.dev recommends a framework's data-fetching feature or a library such as TanStack Query or SWR for real apps, because effects do not run on the server and can create waterfalls. ```jsx useEffect(() => { let ignore = false; fetch(`/api/jobs?city=${city}`).then(r => r.json()).then(data => { if (!ignore) setJobs(data); }); return () => { ignore = true; }; }, [city]); ``` ### 22. Which React version should a fresher know? React 19 is the current major version; the react.dev [versions page](https://react.dev/versions) lists React 19.0.0 as released on 5 December 2024 and React 18.0.0 on 29 March 2022. Many company codebases still run React 18, so the fundamentals in this list matter more than version-specific APIs. Be ready to say which version your project used and why. ## How should you revise React in 7 days before the interview? Build while you revise: each day, add the day's concept to one small app, such as a job-listing page with search and filters. The [technical interview preparation guide](https://asuraa.in/blog/technical-interview-questions-how-to-prepare) covers explaining code aloud. 1. **Day 1: Fundamentals.** JSX, components, props vs state, virtual DOM. Build a static list of cards from an array with keys. 2. **Day 2: useState.** Snapshot behaviour, updater functions, updating objects and arrays immutably. 3. **Day 3: useEffect.** Dependency arrays, cleanup, Strict Mode double run. Fetch data with the ignore flag. 4. **Day 4: Data flow.** Lifting state, controlled forms with validation, context for a theme toggle. 5. **Day 5: Refs and performance.** useRef for focus, memo, useMemo, useCallback, and when not to use them. 6. **Day 6: Routing and project polish.** Add React Router pages, loading and error states, and deploy the app. 7. **Day 7: Mock interview.** Answer all 22 questions aloud, then walk through your project's component tree and state ownership. If your JavaScript is shaky, revise [JavaScript interview questions for freshers](https://asuraa.in/blog/javascript-interview-questions-for-freshers) first, and see [how to learn React for jobs](https://asuraa.in/blog/how-to-learn-react-for-jobs) for a full learning path. ## What do most guides on React interview questions get wrong? Many lists still teach React through class lifecycle methods and describe `useEffect` as "componentDidMount for function components". That framing leads to effects that fetch, derive and sync everything, which react.dev explicitly warns against. Guides also tend to say "setState is asynchronous" without explaining the snapshot model, so candidates cannot explain why three `setCount(count + 1)` calls add only one. Finally, many recommend the array index as a key "if nothing else is available", while the official docs warn it causes bugs when items move. Interviewers notice these outdated answers quickly. ## Related guides - [Interview Questions by Subject: Java, Python, SQL, DSA, Cloud, AI](https://asuraa.in/blog/interview-questions-by-subject-guide) - [JavaScript Interview Questions for Freshers: 25 Questions With Answers](https://asuraa.in/blog/javascript-interview-questions-for-freshers) - [DBMS Interview Questions for Freshers: 25 Questions With Answers](https://asuraa.in/blog/dbms-interview-questions-for-freshers) - [Java Interview Questions for Freshers: 25 Questions With Answers](https://asuraa.in/blog/java-interview-questions-for-freshers) ## FAQ ### What are the most asked React interview questions for freshers? The most asked are props vs state, what the virtual DOM is, why lists need keys, the rules of hooks, how useState and useEffect work, the useEffect dependency array and cleanup, lifting state up, controlled vs uncontrolled inputs and when a component re-renders. Expect at least one small coding task such as a counter or a filtered list. ### Should I learn class components for React interviews? Learn them well enough to read older code, but focus on function components and hooks, which the official react.dev documentation uses throughout. Interviewers may ask how a class lifecycle method maps to hooks, so be able to explain that useEffect synchronises with external systems rather than treating it as a direct lifecycle replacement. ### Why does useEffect run twice in development? When Strict Mode is on, React runs one extra setup and cleanup cycle for each effect in development as a stress test, according to react.dev. If the double run causes a visible problem, such as duplicate subscriptions, your cleanup function is missing something. In production the effect runs only once per mount. ### Can I use the array index as a key in React? Only for static lists that never reorder, insert or delete items. The react.dev guide on rendering lists warns that index keys often cause subtle bugs when the order changes, and that generating keys during render with Math.random recreates every item. Use a stable ID from your data, such as a database ID. ### Do I need Redux for a fresher React interview? Not usually. Most fresher rounds test useState, useEffect, lifting state and context. If a job description names Redux or a similar library, learn its basic store, action and reducer flow, but be ready to explain when built-in state and context are enough, because that judgement is what interviewers look for. ## Final thoughts React interviews reward freshers who understand renders, state snapshots and effects, not those who memorise lifecycle names. Build one small app that uses every concept here, and be ready to explain who owns each piece of state in it. When your project is live, find front-end roles on [Asuraa jobs](https://asuraa.in/jobs) and check your resume against each job description with the [AI resume reviewer](https://asuraa.in/resume/reviewer).