React Interview Questions for Freshers

The questions, with one line answers

Say each one out loud before you open it. If the sentence does not come out cleanly, follow the link for the full answer and the reasoning behind it.

1. 1.What is React?

   Fresher

   React is an open source JavaScript library for building user interfaces out of components, where you describe what the UI should look like for a given state and React works out how to update the DOM.

   React BasicsRead the full answer

2. 2.What are the main features of React?

   Fresher

   Component based architecture, declarative rendering through JSX, a virtual DOM with reconciliation, one way data flow, and the ability to render on the client, the server or to native platforms.

   React BasicsRead the full answer

3. 3.What is JSX and why does React use it?

   Fresher

   JSX is a syntax extension that lets you write markup inside JavaScript. It is not part of the browser: a compiler such as Babel or SWC turns it into ordinary function calls that create React elements.

   React BasicsRead the full answer

4. 4.What is the virtual DOM and how does it work?

   Fresher

   The virtual DOM is an in-memory tree of plain JavaScript objects describing the UI. On each render React builds a new tree, compares it with the previous one, and applies only the differences to the real DOM.

   React BasicsRead the full answer

5. 5.What is the difference between the virtual DOM and the shadow DOM?

   Fresher

   They are unrelated. The virtual DOM is a React implementation detail for computing updates in memory; the shadow DOM is a browser standard for encapsulating a component's DOM and styles from the rest of the page.

   React BasicsRead the full answer

6. 6.What is the difference between a React element and a React component?

   Fresher

   A component is a function or class that describes UI; an element is the plain object that component returns, describing one instance of what should appear on screen.

   React BasicsRead the full answer

7. 7.What is the difference between props and state?

   Fresher

   Props are data passed into a component from its parent and are read only inside that component. State is data a component owns and can change, and changing it triggers a re-render.

   React BasicsRead the full answer

8. 8.What does unidirectional data flow mean in React?

   Fresher

   Data moves in one direction only, from parent down to child through props. A child communicates back up by calling a function the parent passed it, rather than by writing to the parent's data.

   React BasicsRead the full answer

9. 9.What are keys in React and why are they needed?

   Fresher

   A key is a stable identifier that tells React which item in a list is which between renders, so it can move, keep or remove the right DOM nodes and component state instead of guessing by position.

   React BasicsRead the full answer

10. 10.What is the difference between a class component and a function component?

    Fresher

    A class component extends React.Component, holds state in this.state and uses lifecycle methods. A function component is a plain function that uses hooks for state and effects. Function components are the modern default.

    React BasicsRead the full answer

11. 11.What are fragments and when would you use one?

    Fresher

    A fragment lets a component return several children without adding an extra DOM node. Write it as <>...</> or <React.Fragment>...</React.Fragment>.

    React BasicsRead the full answer

12. 12.What are React hooks and why were they introduced?

    Fresher

    Hooks are functions that let a function component use state, effects and other React features. They were introduced in React 16.8 to make stateful logic reusable without wrapper components, and to stop related code being split across lifecycle methods.

    React HooksRead the full answer

13. 13.What are the rules of hooks, and why do they exist?

    Fresher

    Only call hooks at the top level of a component or another hook, never inside conditions, loops or nested functions, and only call them from React function components or custom hooks. React identifies hooks by call order, so the order must be identical on every render.

    React HooksRead the full answer

14. 14.How does useState work?

    Fresher

    useState returns a pair: the current value for this render and a setter. Calling the setter schedules a re-render with the new value; it does not change the variable you are currently holding.

    React HooksRead the full answer

15. 15.What is useEffect and when does it run?

    Fresher

    useEffect runs a function after React has committed the render to the DOM and the browser has painted. It runs after every render by default, or only when a value in the dependency array has changed.

    React HooksRead the full answer

16. 16.What does the dependency array do, and what changes between no array, an empty array and a populated one?

    Fresher

    No array means the effect runs after every render. An empty array means it runs once after mount. A populated array means it re-runs whenever one of those values changes by reference or value.

    React HooksRead the full answer

17. 17.What is useContext, and what are its limitations?

    Fresher

    useContext reads the nearest provider's value for a context, letting a deep component get data without prop drilling. Its limitation is that every consumer re-renders whenever the provider's value changes, whatever part of the value they actually use.

    React HooksRead the full answer

18. 18.What is the children prop?

    Fresher

    children is the special prop that holds whatever was written between a component's opening and closing tags. It is what makes wrapper components such as layouts, cards and modals possible.

    Components & PropsRead the full answer

19. 19.How do you give a prop a default value in a function component?

    Fresher

    Use a JavaScript default in the destructuring: function Button({ variant = 'primary' }). The legacy Component.defaultProps object still works for classes but is deprecated for function components.

    Components & PropsRead the full answer

20. 20.What are the ways to do conditional rendering in React?

    Fresher

    An if statement before the return, a ternary inside JSX, logical AND for the render-or-nothing case, or returning null to render nothing at all.

    Components & PropsRead the full answer

21. 21.How do you render a list, and what should you watch out for?

    Fresher

    Map the array to elements and give each one a stable key. Watch for index keys, for mutating the source array, and for doing filtering or sorting work on every render.

    Components & PropsRead the full answer

22. 22.How do you validate props — PropTypes or TypeScript?

    Fresher

    TypeScript, for anything new. It checks at compile time across the whole codebase, while PropTypes only warns in the console at runtime in development, and PropTypes was removed from React in version 19.

    Components & PropsRead the full answer

23. 23.What is a controlled component?

    Fresher

    An input whose displayed value comes from React state and whose changes are written back to that state through an onChange handler. React is the single source of truth for the field.

    Forms & EventsRead the full answer

24. 24.What is an uncontrolled component, and when would you prefer one?

    Fresher

    An input that keeps its own value in the DOM, which you read with a ref or from the form data on submit. Prefer it for large forms where per-keystroke re-renders hurt, for file inputs, and when integrating with non-React code.

    Forms & EventsRead the full answer

25. 25.How do you handle several inputs with a single change handler?

    Fresher

    Give each input a name attribute and use it as the key when updating a state object: setValues((previous) => ({ ...previous, [event.target.name]: event.target.value })).

    Forms & EventsRead the full answer

26. 26.How do you pass an argument to an event handler?

    Fresher

    Wrap the call in an arrow function, or bind the value with a data attribute and read it from the event. Do not call the function directly in JSX — onClick={remove(id)} runs it during render.

    Forms & EventsRead the full answer

27. 27.What are the phases of a React component's lifecycle?

    Fresher

    Mounting, when the component is added to the DOM; updating, when props or state change; and unmounting, when it is removed. React also has an error phase for components that catch errors from their children.

    Lifecycle & EffectsRead the full answer

28. 28.What are the main lifecycle methods in a class component?

    Fresher

    constructor, render and componentDidMount for mounting; shouldComponentUpdate, render and componentDidUpdate for updating; componentWillUnmount for unmounting; plus getDerivedStateFromError and componentDidCatch for errors.

    Lifecycle & EffectsRead the full answer

29. 29.Why must state be treated as immutable in React and Redux?

    Fresher

    Both detect change by comparing references. If you mutate an object in place, the reference is unchanged, so React skips the re-render and Redux's reducers and selectors see no change.

    State ManagementRead the full answer

30. 30.What is lifting state up, and what is state colocation?

    Fresher

    Lifting state up means moving a value to the closest common ancestor of the components that need it. Colocation is the opposite instinct: keep state as close as possible to where it is used, and only lift when something forces you to.

    State ManagementRead the full answer

31. 31.What is React Router and why does React need a routing library?

    Fresher

    React renders components; it has no concept of a URL. React Router maps URLs to components and keeps the address bar, history and back button in sync while the page is never actually reloaded.

    React RouterRead the full answer

32. 32.What is the difference between BrowserRouter and HashRouter?

    Fresher

    BrowserRouter uses clean URLs through the History API and needs the server to serve the app for every path. HashRouter puts the route after a #, which the server never sees, so it works on any static host with no configuration.

    React RouterRead the full answer

33. 33.What is the difference between Link and a plain anchor tag?

    Fresher

    An anchor triggers a full page load, throwing away the app's state and re-downloading everything. Link renders an anchor but intercepts the click and navigates through the router instead.

    React RouterRead the full answer

34. 34.How do you read route parameters and query strings?

    Fresher

    useParams returns the dynamic segments of the matched path, and useSearchParams gives you a URLSearchParams object plus a setter for the query string.

    React RouterRead the full answer

35. 35.What is the difference between code splitting and lazy loading?

    Fresher

    Code splitting is a build time concern: the bundler produces several chunks. Lazy loading is the runtime behaviour: a chunk or an asset is requested only when it is needed. Code splitting makes lazy loading of code possible.

    PerformanceRead the full answer

36. 36.How do you type a component's props?

    Fresher

    Declare a type or interface for the props object and annotate the destructured parameter. That is all React needs — the return type is inferred.

    React + TypeScriptRead the full answer

37. 37.How do you type children?

    Fresher

    Use React.ReactNode, which covers elements, strings, numbers, arrays, null and undefined. Use React.ReactElement only when the child must be a single element.

    React + TypeScriptRead the full answer

38. 38.How do you type useState, and when is the type argument needed?

    Fresher

    TypeScript infers the type from the initial value, so most calls need no annotation. You need the type argument when the initial value does not represent the full range, typically null or an empty array.

    React + TypeScriptRead the full answer

39. 39.Build a counter with increment, decrement and reset

    Fresher

    One piece of state and three handlers. Use the functional updater form, and keep the initial value in a constant so reset has something to return to.

    Coding ChallengesRead the full answer

40. 40.Build a todo list with add, toggle and delete

    Fresher

    One array of objects in state, updated immutably. Give each item a real id rather than using the index, and use a form so Enter submits.

    Coding ChallengesRead the full answer

41. 41.Build an accordion where only one section is open at a time

    Fresher

    Hold the id of the open section in state rather than a boolean per section, so exclusivity is structural. Toggle to null when the open one is clicked again.

    Coding ChallengesRead the full answer

42. 42.Build a star rating component

    Fresher

    Render a radio group styled as stars, track the committed value in state and the hovered value separately, and display the hovered value when there is one. Radios give you keyboard support for free.

    Coding ChallengesRead the full answer

A one week plan

1. Days 1 and 2. React basics and components and props. Build one small component from scratch each day, without a tutorial open.
2. Days 3 and 4. Hooks, concentrating on useState, useEffect and the rules of hooks.
3. Day 5. Forms and events, then build a login form with validation.
4. Day 6. Two or three coding challenges under a timer, out loud, as if someone were watching.
5. Day 7. Re-read only the one line answers here, then take the React quizzes to find what has not stuck.