This is part II of my tutorial series Class Component Vs Functional Component(Lifecycle Methods). If you haven’t already read part I, you can do so to get a better understanding of this tutorial series going forward.
To implement componentDidUpdate in a class-based component let’s consider the code snippet below:
To implement the same code in a functional component let consider the code snippet below:
Now, let’s discuss the two code snippet above and see how the componentDidUpdate lifecycle method is implemented in each of them.
Looking at the class-based component, the componentDidUpdate method was defined inside the class component as the way of implementation.
On the other hand, if we look at the functional-based component, the useEffect hook was used to implement the componentDidUpdate.
NB: The useEffect hook takes an optional array of dependencies. Whenever the useEffect hook is configured to have an array of dependencies, it is equivalent to the componentDidUpdate function in the class-based component.
Therefore anytime any of the values in the dependency array changes, the component has to re-render to update the DOM
Top comments (0)