Unmounting

Prerequisites:

NodeJS and NPM ReactJS React-Hooks...

Steps To Create React Application and Installing Module:

Step 1: Create a new react app using the following command....

Project Structure:

project structure...

Mounting:

Mounting in React involves creating a component and rendering it onto the DOM. Here’s a concise breakdown for both class and functional components....

Mimicking constructor:

In class components, the constructor method is used for initializing state and binding event handlers. In functional components, you can achieve similar behavior using the useState Hook for state initialization and useRef Hook for storing mutable values....

Mimicking componentDidMount:

In class components, componentDidMount is invoked after the component is mounted and rendered. To achieve similar behavior in functional components, you can use the useEffect Hook with an empty dependency array....

Mimicking render:

The render method in class components is responsible for rendering the component UI. In functional components, the main body of the component serves the same purpose....

Updating:

Whenever a component experiences alterations, it undergoes an update. These modifications can stem from changes in props or state. React furnishes built-in methods to manage updated components:...

Mimicking componentDidUpdate:

componentDidUpdate is triggered whenever props or state change. In functional components, you can use useEffect with dependencies to achieve similar behavior....

Mimicking shouldComponentUpdate:

shouldComponentUpdate allows class components to optimize rendering by preventing unnecessary re-renders. In functional components, you can achieve a similar effect using the React.memo higher-order component combined with the useMemo Hook....

Unmounting:

When a component is removed from the DOM, it is considered unmounted. In this scenario, only one built-in method comes into play. These component lifecycles pertain exclusively to class components. However, functional components mimic some of these lifecycle methods using React hooks, chiefly useState() and useEffect()....

Mimicking componentWillUnmount:

In class components, componentWillUnmount is used for cleanup tasks before a component unmounts. With Hooks, you can return a cleanup function from useEffect....

Regarding the constructor:

In functional components, the constructor’s role is fulfilled by useState(). Typically, the constructor initializes state values and binds the this keyword for non-lifecycle methods. It executes prior to the component’s rendering....