Skip to content

React Interview Questions

1. What is JSX and how is it different from HTML and JavaScript?
  • JSX (JavaScript XML): A syntax extension for JavaScript that allows you to write HTML-like structures directly inside JavaScript code.
  • Differences:
    • Compilation: Browsers cannot read JSX directly; it must be compiled (by Babel) into React.createElement() calls.
    • Expressions: You can embed JavaScript expressions inside curly braces {}.
    • CamelCase: Attributes use camelCase (e.g., className instead of class, onClick instead of onclick).
2. Name some lifecycle methods

(Primarily in Class Components) 1. Mounting: constructor(), render(), componentDidMount() (API calls go here). 2. Updating: render(), componentDidUpdate(). 3. Unmounting: componentWillUnmount() (Cleanup like removing listeners). * Note: In Functional Components, useEffect handles these side effects.

3. What are the differences between useCallback and useMemo?
  • useCallback: Returns a memoized callback function. It is used to prevent a function from being recreated on every render unless its dependencies change. (Useful for passing callbacks to optimized child components).
  • useMemo: Returns a memoized value (result of a function). It is used to cache expensive calculations.
  • Analogy: useMemo caches the result, useCallback caches the function itself.
4. Render function? What does it return?
  • The render() function (in class components) or the return statement (in functional components) describes what the UI should look like.
  • Returns: It returns a React Element (a lightweight JavaScript object), which is a virtual representation of a DOM node. It can also return Arrays, Fragments, Portals, String/Numbers, or Boolean/Null (to render nothing).
5. What is a Single page application (SPA)?
  • An application that loads a single HTML page and dynamically updates that page as the user interacts with the app.
  • It does not reload the page during navigation. Instead, it uses JavaScript (React Router) to swap components and fetch data (AJAX/Fetch) behind the scenes.
6. What is React Route Guard?
  • Also known as Private Routes or Protected Routes.
  • It is a mechanism to restrict access to certain routes based on authentication status (e.g., is user logged in?).
  • Implementation: Create a wrapper component that checks the auth condition. If true, render the children (Route); if false, redirect to Login page (<Navigate to="/login" />).
7. What are props and states?
  • Props (Properties): Read-only inputs passed from a parent component to a child. They allow components to be dynamic and reusable. (Immutable).
  • State: Internal data managed by the component itself. It can change over time (Mutable via setState/useState). When state changes, the component re-renders.
8. How do you pass data from parent to child and vice versa?
  • Parent to Child: Pass data via props.
  • Child to Parent: Pass a callback function from the parent to the child via props. The child calls this function with data as an argument.
9. What is prop drilling? How do you prevent it?
  • Prop Drilling: The process of passing data from a top-level component down through multiple intermediate layers of components to reach a deeply nested child, even though the intermediate layers don't use the data.
  • Prevention:
    1. Context API: Provides a way to share values globally.
    2. State Management Libraries: Redux, MobX, Recoil.
    3. Component Composition: Passing components as children or props.
10. What is Context API?
  • A built-in React feature that allows you to share data (state) across the entire component tree without passing props manually at every level.
  • Key components: React.createContext(), Provider (supplies value), Consumer (or useContext hook to access value).
11. What is React Redux?
  • Redux: A predictable state container for JavaScript apps. It keeps the state of the whole application in a single Store.
  • React Redux: The official binding library for React and Redux. It allows React components to read data from the Redux store (useSelector) and dispatch actions (useDispatch) to update the state.
12. What are React components?
  • Independent, reusable bits of code that serve as the building blocks of a React application. They accept inputs (props) and return React elements describing what should appear on the screen.
  • Types: Functional Components and Class Components.
13. What are hooks?
  • Functions that let you "hook into" React state and lifecycle features from functional components. Introduced in React 16.8.
  • They allow you to use state and other React features without writing a class.
14. What do useState, useEffect, useContext do?
  • useState: Adds state variable to a functional component. Returns a pair: current state value and a function to update it.
  • useEffect: Performs side effects (data fetching, subscriptions, DOM manipulation) in functional components. Replaces lifecycle methods like componentDidMount, componentDidUpdate, componentWillUnmount.
  • useContext: Accepts a context object and returns the current context value. Solves prop drilling.
15. What is a ref in React?
  • Ref (Reference): An object that holds a mutable value that persists across renders.
  • Usage:
    1. Accessing DOM nodes directly (e.g., focusing an input).
    2. Storing a mutable variable that doesn't trigger a re-render when changed.
  • Hook: useRef().
16. How do you make api calls to the backend API?
  • Use useEffect hook to trigger the call when component mounts.
  • Use fetch() (native) or axios (library).
  • Store the response in state to trigger a re-render and display data.
17. How do you store data in the browser using React?
  • React itself doesn't provide storage; it uses browser APIs:
    1. LocalStorage: localStorage.setItem('key', 'value') (Persists even after closing browser).
    2. SessionStorage: Persists only for the session.
    3. Cookies: For auth tokens.
18. What is virtual DOM in React?
  • Virtual DOM: A lightweight copy of the actual DOM in memory.
  • How it works: When state changes, React updates the Virtual DOM first. It then compares the updated Virtual DOM with the previous version (Process called Diffing). Finally, it updates only the changed objects in the real DOM (Process called Reconciliation). This makes React fast.