Different use case scenarios of useEffect in SPFx React solutions

What is useEffect in React

UseEffect is a hook in react which was created to be used in a functional component. useEffect hook can be used in different scenarios depending on our need i.e.

it can provide lifecycle functionality of class component as componentWillMount or componentDidMount.

For more detailed information you can refer to the following link: https://reactjs.org/docs/hooks-effect.html

Pre-requisites

  • Before proceeding one must have a basic knowledge of react functional components as well as lifecycle methods of class components.

Why do we need useEffect() Hook

Whenever we make an API call in react component, usually we store the retrieved data in a state. A react component re-renders after any change in the current state. As soon as we store our retrieved data in the state our component will re-render and the API call will be triggered again. This cycle will continue, and we will be facing the issue of an infinite loop in our component. That is where useEffect() hook comes in the play and can save the day for our re-rendering problem.

Variations in useEffect() Hook

UseEffect can work as componentWillMount and componentDidMount.

useEffect as componentWillMount

ComponentWillMount comes in action after and for each render cycle. The syntax for using useEffect as componentWillMount is:

useEffect(() => {});

This gets into play when we set data in the state coming from some other component as a prop. This useEffect() will set the data in the state whenever the component loads.

Note: If you are thinking that you can also do your API call in here then you will be in the same problem of infinite loop.

useEffect as componentDidMount

ComponentDidMount runs just once after the component renders. The syntax for using useEffect as componentDidMount is:

useEffect(() => {}, [ ]);

The empty square brackets at the end are what makes it different from the previous variant. It solves our problem of infinite loops. Now this is the place where we can make all our API calls.

What is a Dependency?

Dependency is what we specify as the second argument in the useEffect. If we have given any dependency, then the useEffect will only be triggered on the change of that dependency.

Use Case Scenarios of useEffect() Hook

UseEffect hook can be used in different scenarios according to the situations. Some examples of how to use it are given below:

Without any Dependency

1. As componentWillMount


React.useEffect(() => {

SetSiteUrl(props.siteUrl);

Console.log(“useEffect with no Dependenies”, siteUrl);

});

In this situation we are using it as a componentWillMount replacement. It will run after and for every render cycle. Its console output is shown as below:

In the above console output, the first one is running after the first render of the component, that is why the state value is being returned as ‘undefined’. The second and third console output lines are due to re-rendering of the component after every change in the state.

2. As componentDidMount

React.useEffect(() => {

Let web = new Web(props.siteUrl);

Web.lists.getTitle(“MicrosoftSoftware”).items

.get()

.then((result: any) => {

SetData(result);

Console.log(“useEffect to make all API calls:”, result);

})

}, [ ]);

In this situation we are using it as componentDidMount. If we make any API calls in our react app then this is where it will be called. In this case useEffect will run only once. Console output for above code is shown as below:

As we can see in the console output above, useEffect is only running once, no matter how many times our component re-renders. 

UseEffect with single dependency 

Below is an example of useEffect having single dependency:

React.useEffect(() => {

Console.log(“useEffect with one dependency:”, data);

}, [data]);

In the above situation the useEffect will run whenever the state of ‘data’ changes. Console output for this useEffect is shown as below:

In the above console output, first we are getting empty array because we have initialised our state with empty ‘data’ array. Then our API call occurs and after maintaining the state our component will re-render and the above useEffect will run again due to the given dependency. Now we can see in the console output, that we have value in our ‘data’ state. 

Multiple dependencies 

Below is the example of useEffect having multiple dependencies.

React.useEffect(() => {

Console.log(“This useEffect will run either data or siteUrl changes”, data, siteUrl);

}, [data, siteUrl]);

In the above scenario, useEffect will run when either value of ‘data’ or ‘siteUrl’ changes. We can also give more dependencies according to our requirements. Console output for the above useEffect is shown as below:

In the above console output, first we are getting empty array as ‘undefined’ because we have initialised our state with empty array and our ‘siteUrl’ with null. Any change in state of ‘siteUrl’ will trigger useEffect resulting the second line of console output. Then the API call occurs and after maintaining the state of our component, it will re-render and the above useEffect will be triggered due to the given dependency. This gives us the third line of console output where we can value of ‘data’ array. 

Multiple useEffects in a single component

As we can see in the above reference we can use as many useEffect hooks we want according to our requirement.

Note: Be careful while using multiple useEffect hooks, as it lead to infinite loops. 

Conclusion

After going through this blog now we can assume that you will be able to work with useEffect confidently. For better understanding create your own scenarios and apply useEffect accordingly.

Tanish

Written By-  Tanish Bawa

(Software Developer Trainee)

Written By-  Tanish Bawa

(Software Developer Intern)

Jasjit

Peer Reviewed By-  Jasjit Chopra

(CEO)

Peer Reviewed By-  Jasjit Chopra

(CEO)

Sanika

Graphics Designed By- Sanika Sanaye

(Creative Design Director)

Graphics Designed By- Sanika Sanaye

(Creative Graphic Designer Trainee)

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Connect with us

>