React.Profiler component example

In the previous post we saw in detail about the React.Profile component and how it is used to capture performance metrics of a React Component. In this post we shall see a small example on how to use the React.Profile component to measure and display performance metrics.

We will use the useEffect example and add React.Profile to it. The sample consists of a Parent component App, child component UseEffectComponent and the Root ReactDOM to load the App component. We will add Profiler to the App component in the Root and add Profiler component for UseEffectComponent in the parent App component as follows. Remember we are using create-react-app boilerplate to create these examples which will have additional supporting files.

React 16.8 Hooks

React 16.8 Hooks

Hooks in React 16.8 useState Hook example in React 16.8 useEffect Hook example in React 16.8

useEffect Hook example in React 16.8

In the previous post we saw an example of how to use the useState hook in a function component to maintain and update state props. In this post we will see an example on how to use the useEffect hook to perform side effects from a function component.

In this sample, we will use the useEffect hook to change the title of the document. We will use the value from the state prop title to set the document title as Hello + {title}. Initially the title will be displayed as Hello React, on clicking a button we change the state value of title, which in-turn triggers the useEffect and changes the document title.

Hooks in React 16.8

Hooks were introduces in React 16.8, hooks let us create function components in React with state and other React features. Usually for a React component to have state it should be created as a class component.

React 16.8 introduces the following basic hooks