This time we will discuss the best implementation in using setState in useState in useEffect in React. React developers will often be faced with situations where they have to setState on useEffect, such as when we want to load data from the database and want it to be stored in a state, then we have to retrieve the data in the database and save the query results to the state using useEffect. However, this implementation often creates problems that are sometimes not realized and can have fatal impacts.
Implementation of setState on useEffect
On this occasion, we will discuss states with primitive data values (integers, strings, booleans, etc.) and states with data values in the form of objects.
State with primitive data
In a state that is implemented using primitive data, it's actually not that complicated and has been widely exemplified in various forums and React's own documentation, here's the implementation:
State with a data object
Then for the state that is implemented using object values, it is a little complex but powerful enough for various needs. An example of an initialized state using an object value is as follows:
Case study
In this discussion, we will use states with object values that are more complex than primitive values. Hopefully, if you can understand this case study, you will also be able to understand states with primitive values.
The code above explains that we have a state object with three properties: foo, bar, and baz. To update the state value we can use the set state function as follows:
So, if we implement it in our previous source code, we get the following:
If we apply the code as above, then when we run it, there is nothing strange at first glance, but look at the console log developer tools in our browser (or press the F12 key and then navigate to the console window). Note that the following error will occur:
"Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render."
The error above is caused by the rendering of repeatedly and continuously and indefinitely or an infinity loop. If left unchecked it will eat up memory and will be fatal.
Solution Step 1
The first solution to the error is as explained in the official react hooks effect documentation, that we need to capture the function in the first argument of the array in the second argument, here's an example:
Notice the second argument, the array in the second argument is used to accommodate any variables that are monitored for changes, if the variables contained in the array change then useEffect will re-render the existing function on it.
If we use an IDE such as Visual Studio Code, it will be recommended what variables need to be added to the array, by giving a warning to the array.
OK, let's fix our function above:
This way there will be no more errors like the one above. But notice again, that there is still a warning there (in the developer tools console):
"React Hook useEffect has a missing dependency: 'state'. Either include it or remove the dependency array. You can also do a functional update 'setState(s => ...)' if you only need 'state' in the 'setState' call react-hooks/exhaustive-deps"
This warning appears because we are advised to add a state to the second argument array of useEffect, in this way, useEffect will not re-render its callback function unless there is a change in the state. let's fix our previous code:
This way we have removed the warning on our console. but there will be an error again like before.
"Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render."
Explanation
The error above is an error that occurs because changes and monitoring co-occur, or in the same context, when we use …state then we are making changes to the state, while the state is being monitored for changes by useEffect, so that due to a state change, useEffect re-rendering the callback function, once it is re-rendered, there is another change to the state in the …state section, and it will keep repeating like that, then there will be an infinity loop on useEffect.
Solution Step 2
To solve the above error, we can use a callback to setState in useEffect as described in React's documentation. let's fix our previous code:
Using the callback on setState, the state will no longer be read by useEffect to be monitored for changes, so we no longer need to add state to the array in the second argument. this way there will be no repeated and unlimited rendering, and no warning will appear to add a state to the second argument array in useEffect.
Epilogue ☕
Thank you for reading this article, I hope this article is useful for you, if you learn something new from this article, please provide feedback on this article, or give us criticism, suggestions so that it can be even better. Maybe you want to buy me a cup of coffee?
Top comments (0)