Use React useEffect hook to see how many times component mounts and unmounts
In this lesson we are going to learn how to use useEffect hook from React 16.7 to be able to create a custom hook which allows us to see how often the component mounts and unmounts.
Later, we can reuse it in other components and improve app performance by diving deep into how many times our components are mounted and/or unmounted.
Instructor: [00:00] We have a simple app which allows us to toggle this test component over here, by clicking this button. The way that it works is that we change this type of this out component to be the opposite of the previous state, to either display or hide the component entirely.
[00:18] We would like to be able to get back how many times this test component has been mounted or unmounted. One way we could do it is basically be to console.log render, but we would like to use React hooks to achieve this effect in this component and also in other components in the future.
[00:34] We are going to import the useEffectHook from React. In order to debug how many times this component has been either mounted or unmounted, we're going to use the useEffectHook. It takes a function as an argument. This function is executed every time a component finishes its render phase, which also includes the first render, also known as mounting.
[00:57] useEffect also has a special behavior. If you return a function, this function's going to be executed whenever the component has been unmounted. After we save it, we can see our behavior in action. By default, after I refresh the page, the component is mounted, but if I toggle the component it's going to be unmounted and mounted. We can see the output in our debug.
[01:20] In order to use this debug tool in other components, we will need to create our own custom hook. To do that, create a new function. We're going to call it useDebug, and it is just a function that is going to execute our useEffectHook. I'm going to copy and paste it over here, and use this debug hook in our test component.
[01:41] It works exactly the same. For instance we could export this component to NPM, and have other developers use this in their applications.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!