+919711493272 support@getinfoplus.com abhishekshr7@gmail.com

Interview Q&A – Crack Your Next Interview

  • React: A library for building components and managing the UI.

  • ReactDOM: Handles rendering components to the DOM and is used specifically for web applications.

The virtual DOM is a lightweight copy of the real DOM.

  • React uses it to optimize UI rendering.

  • When changes occur, React updates the virtual DOM, compares it with a previous snapshot (diffing), and applies only the minimal necessary changes to the real DOM (reconciliation).

Components are the building blocks of a React application.

  • Functional Components: Simple JavaScript functions that return JSX.

  • Class Components: ES6 classes that extend React.Component and have state and lifecycle methods.

// Functional Component
function Hello() {
  return <h1>Hello, world!</h1>;
}
// Class Component
class Hello extends React.Component {
  render() {
    return <h1>Hello, world!</h1>;
  }
}

Class Component Functional Component
Uses class syntax. Uses a function.
Can have state and lifecycle methods. Uses hooks (e.g., useState, useEffect) for state and lifecycle management.
Verbose syntax. Simpler and more concise syntax.

  • Props (short for properties):

    • Read-only inputs to a component.

    • Passed from a parent component to a child component.

    • Immutable.

  • State:

    • Local to a component and managed internally.

    • Can be changed using setState or useState.

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Fragment allows grouping multiple elements without adding extra DOM nodes.

return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

State is a built-in object used to store data that can change over time.

  • In class components, state is managed using this.setState.

  • In functional components, state is managed using the useState hook.

import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Hooks are functions introduced in React 16.8 that let you use state and lifecycle features in functional components.

Commonly used hooks:

  • useState: Manages state.

  • useEffect: Handles side effects.

  • useContext: Accesses context values.

  • useReducer: Manages complex state logic.

  • useMemo: Optimizes performance by memoizing values.

  • useCallback: Memoizes functions.

useState useReducer
Best for simple state logic. Best for complex state logic.
Returns a state value and a function to update it. Returns a state and a dispatch function to trigger updates.
Example: const [count, setCount] = useState(0); Example: const [state, dispatch] = useReducer(reducer, initialState);

  • Parent to Child: Use props.

  • Child to Parent: Pass a callback function as a prop to the child.

  • Between Siblings: Share data via the parent component.

  • Global State: Use Context API or state management libraries like Redux.

Example:

function Parent() {
  const [data, setData] = useState("Hello");
  return <Child message={data} />;
}
function Child({ message }) {
  return <p>{message}</p>;
}

The Context API provides a way to share data (like theme, user info) across components without passing props manually at every level.
Use it for managing global state in small to medium-sized applications.
 

const ThemeContext = React.createContext();
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}
function Toolbar() {
  const theme = React.useContext(ThemeContext);
  return <div>Theme: {theme}</div>;
}

  • useEffect is used to perform side effects like data fetching, subscriptions, or DOM manipulation.

  • The dependency array determines when the effect runs:

    • Empty []: Runs only once after the initial render.

    • Dependencies specified: Runs when those dependencies change.

    • Omitted: Runs after every render.

useEffect(() => {
  console.log('Component mounted or updated');
}, [dependency]);

useMemo useCallback
Memoizes a value or computation. Memoizes a function.

Syntax:

useMemo(() => value, [deps])

Syntax:

useCallback(() => func, [deps])

 

Redux is a predictable state management library used with React. It centralizes the application state in a single store, which allows consistent and predictable state updates across the app.

  • Manages global state using a single store.

  • Uses actions and reducers to update the state.

Redux Core Concepts

  1. Store – The centralized state of the app.

  2. Actions – Plain JavaScript objects that describe what happened.

  3. Reducers – Pure functions that describe how the state changes.

  4. Dispatch – A method to send actions to reducers.

Redux-Saga is a middleware library for handling asynchronous side effects (e.g., API calls, delays, caching, etc.) in Redux applications using generator functions.

It lets you write complex async logic (like retries, concurrency, etc.) in a cleaner, testable, and more manageable way than redux-thunk.

  • Handles complex side effects like:

    • Debouncing, throttling

    • Sequential/parallel API calls

    • Retry on failure

  • Uses generators to write async code in a synchronous-looking style

  • Offers powerful tools like takeLatest, call, put, fork, all

2025 Getinfoplus.com, All right reserved.
Designed and Developed By Team Getinfoplus