In general, infinite loops are considered bad practices.

But in some edge cases, you don’t

have any choice to choose rather than an infinite loop. It is good to know the infinite loop
patterns of React.

When the infinite loop is running without any stop, eventually browser will kill the tab that
your code is running. So don’t use Infinite Loop without any breaking point.

useEffect
useEffect hook allows us to perform side effects in a component. When hooks were
introduced the react 16, the useEffect hook is gain more traction than any other hooks.
Because it provides combined functionalities of componentDidMount,
componentDidUpdateand componentWillUnmount life cycle methods.
useEffect hook triggers the callback function, only if the dependencies were changed. And
it uses shallow comparison to compare the values of the hook.

You can consider the useEffect as a power stone, it is a most powerful stone and if you
haven’t handled it properly the stone would destroy you.
Without dependency
useEffect without dependencies generally consider a bad practice, so always try to avoid it.

Consider the following code, it will call the API forever.

What’s happening?
If the useEffect is triggering the callback only when the dependencies are changes, why we
ended with an infinite loop here.

You need to take into account important another mantra of React which is “When state or
Props is changing, the component will re-render”.

In this code, we set the state value using setData on-network call success, it will trigger
the component re-render. Since the useEffect doesn’t have value to compare, so it will call
the callback.
And Again Fetch will trigger setData and setData will trigger, the component re-render
and so on.
How to fix this issue?
We need to specify the dependencies as the empty array.

According to official docs, it is not safe to omit the dependencies

Function as dependency
useEffect uses shallow object comparison to determine, whether the data was changed or
not. Due to weird JavaScript conditional systems .

Let consider the following code

The function getData is passed as dependencies.

When you run this code, it will throw Maximum update depth exceeded which means the
code having an infinite loop.

What’s happening?
Since useEffect uses the shallow comparison for the compare the values. The shallow
comparison for the function will always give false.

How to fix it?

To fix this issue, we need to use another infinity stone called useCallback.
useCallback return a memoized version of callback, which only change when the
dependencies change.

Array as dependency
As you might know, the shallow comparison for two is always false, so passing
dependencies as an array will also lead to Infinite Loop

Let us consider the following code

Here, the array dep passed as dependencies for the useEffect.

When you run this code, the browser console will throw this error.

What’s happening?
The shallow comparison of two arrays is always false, so useEffect will always trigger the
callback.

How to fix it?

Since the useCallback return is a function, we can't use that.

So, guess what?

We need to use another hook called useRef

useRef returns a mutable object with .current having the initial value.

Objects as dependency
You might guess the shallow comparison of two objects is always false, so the useEffect
will trigger the callback always.

Let us consider this code

data is passed as the dependencies for the useEffect

When you run this code, your browser console will be thrown an infinity loop error.

What’s happening here?

The shallow comparison of objects would be false always, so it will trigger the useEffect’s
callback.
How to fix it?
If we memoize the dependencies, we break the infinity loop. So how to do that?
Yes, we are going to use another infinity stone called useMemo
useMemo will only recompute the memoized value when the dependencies have changed.

Wrong dependency
Wrong dependencies are nothing to do with React not even javascript. When the wrong
dependencies are used, we must take the blame.

Let us consider the code

I hope there is no need to explain this issue pattern and its fixes. If you want the
explanation and fixes, please let me know in the comment.

Note: There is plenty of ways to avoid infinite loop inside a React component, I mentioned
only a few ways.

Always use eslint-plugin-react-hooks or create-react-app, it will help you to find those

issues before those get into the production server.
A company lost 72k in a week due to an infinite loop.

We Burnt $72K testing Firebase + Cloud Run and almost

went Bankrupt [Part 1]
This is the story of how close we came to shutting down before even
launching our first product, how we survived, and…

blog.tomilkieway.com

So always give special care to our power stone (useEffect).

https://www.nerdyviews.com/2019/06/infinity-gauntlet-keychain.html

Also, please take a look at my recent articles about React.