React Interview Preparation

1. What is Difference between useState & useRef ?

Ans:-

• useState is used to declare a state variable in a functional component. When the state changes, the component will re-render.

• useRef, on the other hand, returns a mutable ref object whose .current property is initialized with the passed argument (initialValue).

• The returned object will persist for the full lifetime of the component.

• A common use case for useRef is to access the properties of a child component imperatively. It's important to note that changes to a ref's .current property do not cause the component to re-render.

2. What are portals in React?

• Let's say in some scenarios we need to render a component outside of the root DOM node, Here we can use portal.

• We can use it for Modal / some Pop-up components.

3. Why we need super in class component ?

Ans:-

• A child class constructor can't make use of this reference until the super() has been called.

• If you don't call super(), JavaScript will throw an error because this is not initialized. This is because this in the context of the child class is uninitialized until super() has been called.
  

class Parent {
  constructor() {
    this.name = 'Parent';
  }
}

class Child extends Parent {
  constructor() {
    super(); // Must call super() here
    this.name = 'Child';
  }
}

4. useCallback vs useMemo vs React.memo

Ans:-

• useCallback is a hook that will return a memoized version of a callback function that only changes if one of the dependencies has changed.
• It's useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.

import React, { useState, useCallback } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>
        Click me
      </button>
    </div>
  );
}

• useMemo is a hook that will return a memoized value, that only recomputes if one of the dependencies has changed. It's useful for expensive calculations.

 import React, { useState, useMemo } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  const expensiveValue = useMemo(() => {
    // Perform expensive calculation here
    return computeExpensiveValue(count);
  }, [count]);

  return (
    <div>
      <p>Expensive value: {expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• React.memo is a higher order component that memoizes the result of a function component and renders it only when the props change.
• It's useful to prevent unnecessary renders for components that render the same result given the same props.

import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // render logic here
});

export default MyComponent;

NOTE:-
useCallback is used to memoize functions, useMemo is used to memoize values, and React.memo is used to memoize components.

5. What will happen if we over do useMemo, Memo and useCallback above functionalities ?

Memory Usage:

• Overusing React.memo can increase the memory usage of your application, as it stores the previous version of a component in memory.

Performance Issues:

• While these hooks and React.memo are meant to optimize performance, overusing them can actually have the opposite effect.

• For instance, useMemo and useCallback have a cost, and if the computation they are preventing is not more expensive than the cost of using the hook, you can end up with slower performance.

6. What is difference between react component vs react element ?

Ans:-

React Component:

• A React Component is a function or a class which optionally accepts input and returns a React element. Components can be reused and can also maintain a private state

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

React Element:

• A React Element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other Elements in their props.
• Creating a React element is cheap. Once an element is created, it is never mutated.

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

7. Core Principle of Redux?

Ans:-

• Single Source of Truth
• State is read-only (Never update directly)
• Changes are made in Pure Functions (Reducer)
• Only works for Serializable Objects.

8. Diffing Algorithm, reconciliation, and React fiber?

Ans:- Separate Article on the same
A Deep Dive into React's Optimization Algorithms & Process

9. What are Synthetic events in react?

Ans:- Events we are making sure should be consistent across different browsers.

Ex:- preventDefault(), stopPropagation()

10. Lifting State up?

Ans:- When Several component needs to share the same changing data then it is recommended to liftthe shared state up to their closest common ancestor.

The above is the detailed content of React Interview Preparation. For more information, please follow other related articles on the PHP Chinese website!