React Functional Component Lifecycle methods

React Hooks introduce a different approach to managing component state and side effects in functional components. With Hooks, you no longer need to rely on class components and their lifecycle methods. Instead, Hooks provide a set of built-in functions that allow you to perform similar tasks within functional components. Here’s an overview of the Hooks-based “lifecycle” equivalents:

• useState: This Hook allows you to add state to your functional components. It returns a state value and a function to update that state. It’s similar to using this.state and this.setState in class components.

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  // ...

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

• useEffect: This Hook is used to perform side effects within functional components. It replaces the componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods of class components.

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // Perform side effects here

    return () => {
      // Clean up side effects here
    };
  }, [/* dependencies */]);

  // ...

  return <div>My Component</div>;
};

The useEffect Hook takes a callback function as its first argument. This function will be called after the component is rendered and any time the dependencies provided in the second argument array change. You can return a cleanup function from the callback to clean up any resources or subscriptions when the component is unmounted or when the dependencies change.