React Interview Questions

React Application Lifecycle

• Initialization: During this phase, React component will prepare by setting up the default props and initial state for the upcoming tough journey.

• Mounting: Mounting refers to putting the elements into the browser DOM. Since React uses VirtualDOM, the entire browser DOM which has been currently rendered would not be refreshed. This phase includes the lifecycle methods componentWillMount and componentDidMount.

• Updating: In this phase, a component will be updated when there is a change in the state or props of a component. This phase will have lifecycle methods like componentWillUpdate, shouldComponentUpdate, render, and componentDidUpdate.

• Unmounting: In this last phase of the component lifecycle, the component will be removed from the DOM or will be unmounted from the browser DOM. This phase will have the lifecycle method named componentWillUnmount.

JSX?

Note- We can create react applications without using JSX as well.

Virtual DOM

React State

Note- State object is not available in functional components but, we can use React Hooks to add state to a functional component.

class Car extends React.Component{
constructor(props){
  super(props);
  this.state = {
    brand: "BMW",
    color: "black"
  }
}
}

class Car extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    brand: "BMW",
    color: "Black"
  };
}
changeColor() {
  this.setState(prevState => {
    return { color: "Red" };
  });
}
render() {
  return (
    <div>
      <button onClick={() => this.changeColor()}>Change Color</button>
      <p>{this.state.color}</p>
    </div>
  );
}
}

React Props

<Car brand="Mercedes"/>

class Car extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    brand: this.props.brand,
    color: "Black"
  };
}
}

function Car(props) {
let [brand, setBrand] = useState(props.brand);
}

Note- Props are read-only. They cannot be manipulated or changed inside a component.

Error boundary

1. Render phase

2. Inside a lifecycle method

3. Inside the constructor

class ErrorBoundary extends React.Component {
constructor(props) {
  super(props);
  this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
  return { hasError: true };
}
 componentDidCatch(error, errorInfo) {
  logErrorToMyService(error, errorInfo);
}
render() {
  if (this.state.hasError) {
    return <h4>Something went wrong</h4>
  }
  return this.props.children;
}
}

<ErrorBoundary>
 <CounterComponent/>
</ErrorBoundary>

React Hooks

• React Hooks must be called only at the top level. It is not allowed to call them inside the nested functions, loops, or conditions.

• It is allowed to call the Hooks only from the React Function Components.

1. useState() : Its a built-in React Hook that allows you for having state variables in functional components. It should be used when the DOM has something that is dynamically manipulating/controlling.

...
const [count, setCounter] = useState(0);
const [otherStuffs, setOtherStuffs] = useState(...);
...
const setCount = () => {
   setCounter(count + 1);
   setOtherStuffs(...);
   ...
};

2. useEffect() : It is used to perform side effects in functional components—operations that occur outside the main rendering process. These side effects can include tasks like fetching data from APIs, directly manipulating the DOM, setting up event listeners or subscriptions, and cleaning up resources when a component unmounts.
• It runs after the component renders, meaning the DOM is updated before the effect runs.
• It takes two arguments:
1. A callback function containing the side effect logic.
2. An optional dependency array that controls when the effect should re-run.

useEffect(() => {
  // Side effect code here

  return () => {
    // Optional cleanup code here (e.g., remove event listeners)
  };
}, [dependencies]);

• If you provide a dependency array ([dependencies]), React re-runs the effect only when one of those dependencies changes.
• If the array is empty ([]), the effect runs only once after the initial render (similar to componentDidMount).
• If no dependency array is provided, the effect runs after every render.
• The optional return function inside useEffect is a cleanup function, useful for cleaning resources such as timers, subscriptions, or event listeners before the effect re-runs or when the component unmounts.
• useEffect can have multiple instances in a component, each handling different side effects independently.
• You should include all variables used inside the useEffect callback that come from the component scope in the dependency array to avoid stale closures and ensure correct behavior.

3.  useCallback() : It is used to memoize a callback function, meaning it caches the function instance so that the same function reference is returned between component renders unless its dependencies change. This helps prevent unnecessary re-creation of the function on every render, which is beneficial for optimizing performance, especially when passing callbacks to child components or using them as dependencies in other hooks like useEffect.
• Syntax:

const memoizedCallback = useCallback(() => {
  // Your callback logic here
}, [dependencies]);

It takes two arguments: the callback function to memoize and an array of dependencies. The memoized function only updates if a dependency changes.
• How it works:
1. On the initial render, it creates and returns the callback function.
2. On subsequent renders, if dependencies have not changed, it returns the same function instance from the previous render.
3. If any dependency changes, a new function instance is created and returned.
• Why use useCallback:
• Prevents unnecessary re-renders of child components that rely on function props by stabilizing function references.
• Improves performance in scenarios such as rendering lists where callbacks are passed repeatedly.
• Helps avoid unwanted re-execution of effects when functions are dependencies.
• Useful in preserving function references in custom hooks

4. useRef() : It is used to persist a mutable value across component renders without causing re-renders when the value changes. It returns a plain JavaScript object with a single property, current, which holds the mutable value.
• Basic usage: const ref = useRef(initialValue);
Here, ref is an object with a .current property initially set to initialValue. This value can be read or mutated directly, and it will persist between renders without triggering re-renders.
• Common use cases:
1. Accessing DOM elements: By attaching a ref object to a JSX element via the ref attribute, ref.current will point to the corresponding DOM node after rendering, allowing direct DOM manipulation like focusing an input.

const inputRef = useRef(null);
useEffect(() => {
  inputRef.current.focus();
}, []);
return <input ref={inputRef} />;

1. Storing mutable values that do not trigger re-render: Useful for storing things like timers, previous state values, or any mutable data you want to keep between renders without causing updates.

const countRef = useRef(0);
countRef.current = someNewValue; // Updates without re-rendering

1. Tracking previous state or props: You can store the previous value for comparison purposes.
• Characteristics:
• Changing ref.current does not trigger a component re-render.
• The ref object itself is stable; the same object is returned on every render.
• Typically used for imperative DOM manipulation or holding mutable values.
• When to use useRef rather than useState:
Use useRef when you want to persist some value without it causing a UI update. For UI-changing values, useState is preferred

5. useContext() : It is used for creating common data that is to be accessed by the components hierarchy without having to pass the props down to each level.

6. useReducer() : It is used when there is a complex state logic that is having several sub-values or when the upcoming state is dependent on the previous state. It will also enable you to optimization of component performance that will trigger deeper updates as it is permitted to pass the dispatch down instead of callbacks.

7. useMemo() : This will be used for recomputing the memoized value when there is a change in one of the dependencies. This optimization will help for avoiding expensive calculations on each render.

8. useImperativeHandle(): It will enable modifying the instance that will be passed with the ref object.

9. useDebugValue(): It is used for displaying a label for custom hooks in React DevTools.

10. useLayoutEffect(): It is used for the reading layout from the DOM and re-rendering synchronously.

Custom Hooks

Higher Order Components