React component lifecycle, methods & hooks

Estimated reading time: 3 minutes

Do you have an idea for an amazing application in React? Then you surely must know everything about React component lifecycle and how important it is in React development. No? Then this article is a must-read. Nowadays it’s all about React hooks – that’s why we’re gonna explain the DOM influence on React and links class components and functions.

Traditional React lifecycle

Since React’s debut in 2013, programmers leaned on class components to fully benefit from React library and handle DOM in React development. What are the React component lifecycle phases? There are three of them: mounting, updating components and unmounting. We’ll talk about them more a bit later.

Class and functional components

There’s a way to benefit from lifecycle methods. We’re talking about hooks. Last year with the release of React 16.8, we were given an option to create functional components with useState and useEffect hooks options. This way, functional components won’t be stateless and will use lifecycle methods. Right now, you are able to emulate performances of lifecycle methods by applying useState and useEffect hooks in JavaScript.

What Reat component lifecycle phases look like in detail

Firstly mounting (inserting elements go into the DOM) using componentDidMount() lifecycle method. If you need interval function or an asynchronous request, it’s your go-to method. You can look at the example below:

componentDidMount() {
  fetch(url).then(res => {
// Handle response in the way you want.
// Most often with editing state values.
  })
}

Mouting is followed by updating components in the DOM using componentDidUpdate() method. It will be called every time (with the exception of the initial render) so it’s a place for a non-reactive environment (hint: use http requests!).

componentDidUpdate(prevProps, prevState) {
  // Always compare props or state
  if (this.props.counter !== prevProps.counter) {
    this.postCounter(this.props.counter);
  }
}

And finally unmounting – removing components with componentWillUnmount() just before the component is being removed from the DOM, a.k.a cleaning up all the unnecessary cler intervals, event listeners and cancel requests. Hint: don’t use setState here as the components won’t be re-rendered no more.

componentWillUnmount() {
           document.removeEventListener("click", this.someFunction);
}

In order to access the methods for each phase, developers directly extend from the React.Component. If you’re interested in this further, go to official React documentation to get more info. 

React Hooks

Now, let’s do this with useEffect hook which will have exactly the same results as all the aforementioned methods. It accepts two parameters: a callback (after render) and the effect dependency array. Use empty array [] if you want to run it only on mount and unmount.

useEffect(
  () => {
    document.addEventListener(“click”, someFunc);
 
    return () => {
      document.removeEventListener(“click”, someFunc);
};
  },
  []
);

In class components you can write useState instead of this.state.

const [counter, setCounter] = useState(0);

const [usersList, setUsersList] = useState([]);

And that’s it. Whether you’re gonna use the traditional methods or hooks is basically a personal choice. However, if this looks too confusing and complicated, maybe you should outsource your React services and consult the web development professionals?