Member-only story
JavaScript
How Does useEffect Replace the Old Lifecycle Methods in React?
The differences, and how to master the change
I love hooks in React.js. After all this time, working with classes has been exhausting — the time for making function-based components more powerful has come.
The changeover was not that difficult for me. I hardly missed the this-keyword, but something else: The lifecycle methods of the class-based components.
componentDidMount() and all the others are gone — what’s left is useEffect()which somehow replaces multiple of the lifecycle methods we were used to.
In my opinion, the lifecycle methods were a bit more intuitive — so let’s take a look at what useEffect actually does, which lifecycle methods it replaces, and where important differences hide.
The most important lifecycle methods
There are a couple of lifecycle methods out there. A few of them are even considered deprecated, e.g. componentWillUpdate and componentWillReceiveProps.
Although hooks in React now have the upper hand, there is still the same support for class-based components. Therefore, the most important lifecycle methods still can be used. These are:
