Categories
React Answers

How to Fix the ‘Maximum update depth exceeded error’ When Developing React Apps?

Spread the love

Sometimes, we may run into to fix the ‘Maximum update depth exceeded error’ when developing React apps.

In this article, we’ll look at how to fix the ‘Maximum update depth exceeded error’ when developing React apps.

Fix the ‘Maximum update depth exceeded error’ When Developing React Apps

To fix the ‘Maximum update depth exceeded error’ when developing React apps, we should make sure no code is keeping the component from re-rendering without stopping.

One common source of the error is that we called a function when we pass in a prop instead of passing in a function reference.

For instance, instead of writing:

{<td><span onClick={toggle()}>Details</span></td>}

We should write:

{<td><span onClick={toggle}>Details</span></td>}

so that toggle is called only when we click on the span.

Conclusion

To fix the ‘Maximum update depth exceeded error’ when developing React apps, we should make sure no code is keeping the component from re-rendering without stopping.

One common source of the error is that we called a function when we pass in a prop instead of passing in a function reference.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *