Use React.lazy to do code-splitting with React Suspense

Use React.memo to avoid unnecessary re-renders in React functional components

Add state to functional React component with useState hook without introducing a class

Use React useEffect hook to see how many times component mounts and unmounts

Learn React lazy, memo, useState and useEffect in 7 minutes

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.

Course

Learn React lazy, memo, useState and useEffect in 7 minutes

Use React useEffect hook to see how many times component mounts and unmounts

Share this video with your friends