Functional components are far more efficient than class based components. Less code is needed to be written to achieve the same goal. This post explains how functional components can carry out life-cycle events without needing to be turned into a class based component. Turns out everything can be managed through . useEffect I have used in the past to manage API calls, as well as implementing , but never . It turns out both are very similar! useEffect componentWillMount componentWillUnmount How to manage componentWillMount with useEffect To understand how we can use with functional components, first we need to look at how the component manages mounting with useEffect. componentWillUnmount React, { useEffect } ; ComponentExample => {
   useEffect( { }, []);
} import from 'react' const => () => () // Anything in here is fired on component mount. If we pass an empty array as the second argument, it tells the useEffect function to fire on component render (componentWillMount). This is the only time it will fire. With this in mind, how can we alter the code to work with componentWillUnmount? Turns out the solution is very simple. How to Manage componentWillUnmount with useEffect If you add a return function inside the useEffect function, it is triggered when a component unmounts from the DOM. This looks like: React, { useEffect } ; ComponentExample => {
    useEffect( { { }
    }, [])
} import from 'react' const => () => () return => () // Anything in here is fired on component unmount. Combining Both Solutions This means that you can use , and in the same useEffect function call. Dramatically reducing the amount of code needed to manage both life-cycle events. This means you can easily use and within functional components. Like so: componentDidMount componentWillUnmount componentDidMount componentWillUnmount React, { useEffect } ; ComponentExample => {
    useEffect( { { }
    }, [])
} import from 'react' const => () => () // Anything in here is fired on component mount. return => () // Anything in here is fired on component unmount. Interested in Learning More? I write regularly about working with React, as well as other developer tips and tricks. If you have a question, send me a message on Twitter and I will get back to you as soon as I can! It would be great to hear from you. @robertmars Previously published at https://thoughtsandstuff.com/componentwillunmount-functional-components-react

Twitter

More Words I Wrote

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to use componentWillMount with Functional Components in React

Too Long; Didn't Read

Company Mentioned

Rob Marshall

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

How to use componentWillMount with Functional Components in React

Too Long; Didn't Read

Company Mentioned

Rob Marshall

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES