How useEffect replaces componentDidMount and componentDidUpdate methods?

In React, the useEffect hook can be used to replicate the behavior of both componentDidMount and componentDidUpdate lifecycle methods.

Here’s how you can achieve that:

componentDidMount Equivalent:

• When you want to perform some actions immediately after the component mounts, you can use useEffect with an empty dependency array ([]). This ensures that the effect runs only once after the initial render, mimicking the behavior of componentDidMount.

useEffect(() => {
  // Perform actions here that you want to execute after the component mounts
}, []); /*Empty dependency array means this effect 
            runs only once, after the initial render */

• Use useEffect with an empty dependency array ([]).
• The effect will run after the initial render, similar to componentDidMount.

componentDidUpdate Equivalent:

• When you want to perform actions every time the component updates, you can use useEffect a dependency array containing the variables you want to watch for changes. This will cause the effect to run after every render if any of the dependencies have changed, similar to the behavior of componentDidUpdate.

useEffect(() => {
  // Perform actions here that you want to execute after each 
  //render or when certain dependencies change
}, [dependency1, dependency2]); 
// Specify dependencies in the array to watch for changes

• Use useEffect with a dependency array containing the variables you want to watch for changes.
• The effect will run after each render if any of the specified dependencies have changed, similar to componentDidUpdate.