ReactJS Maximum update depth exceeded error

Question

I am trying to toggle the state of a component in ReactJS but I get an error stating      Maximum update depth exceeded  This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate  React limits the number of nested updates to prevent infinite loops    I don t see the infinite loop in my code  can anyone help   ReactJS component code   import React    Component   from  react   import styled from  styled-components    class Item extends React Component       constructor props            super props                this toggle  this toggle bind this           this state                 details  false                        toggle            const currentState   this state details          this setState   details   currentState                 render             return                lt tr className  Item  gt                    lt td gt  this props config server  lt  td gt                         lt td gt  this props config verbose  lt  td gt                    lt td gt  this props config type  lt  td gt                   lt td className  this state details    visible     hidden   gt PLACEHOLDER MORE INFO lt  td gt                    lt td gt  lt span onClick  this toggle    gt Details lt  span gt  lt  td gt                lt  tr gt            export default Item

User · Answer

I know this has plenty of answers but since most of them are old (well, older), none is mentioning approach I grow very fond of really quick. In short:

Use functional components and hooks.

In longer:

Try to use as much functional components instead class ones especially for rendering, AND try to keep them as pure as possible (yes, data is dirty by default I know).

Two bluntly obvious benefits of functional components (there are more):

Pureness or near pureness makes debugging so much easier
Functional components remove the need for constructor boiler code

Quick proof for 2nd point - Isn't this absolutely disgusting?

constructor(props) {
        super(props);     
        this.toggle= this.toggle.bind(this);
        this.state = {
            details: false
        } 
    }

If you are using functional components for more then rendering you are gonna need the second part of great duo - hooks. Why are they better then lifecycle methods, what else can they do and much more would take me a lot of space to cover so I recommend you to listen to the man himself: Dan preaching the hooks

In this case you need only two hooks:

A callback hook conveniently named useCallback. This way you are preventing the binding the function over and over when you re-render.

A state hook, called useState, for keeping the state despite entire component being function and executing in its entirety (yes, this is possible due to magic of hooks). Within that hook you will store the value of toggle.

If you read to this part you probably wanna see all I have talked about in action and applied to original problem. Here you go: Demo

For those of you that want only to glance the component and WTF is this about, here you are:

const Item = () => {

    // HOOKZ
  const [isVisible, setIsVisible] = React.useState('hidden');

  const toggle = React.useCallback(() => {
    setIsVisible(isVisible === 'visible' ? 'hidden': 'visible');
  }, [isVisible, setIsVisible]);

    // RENDER
  return (
  <React.Fragment>
    <div style={{visibility: isVisible}}>
        PLACEHOLDER MORE INFO
    </div>
    <button onClick={toggle}>Details</button>
  </React.Fragment>
  )
};

PS: I wrote this in case many people land here with similar problem. Hopefully, they will like what I have shown here, at least well enough to google it a bit more. This is NOT me saying other answers are wrong, this is me saying that since the time they have been written, there is another way (IMHO, a better one) of dealing with this.

User · Answer

You should pass the event object when calling the function       lt td gt  lt span onClick   e    gt  this toggle e   gt Details lt  span gt  lt  td gt     If you don t need to handle onClick event you can also type       lt td gt  lt span onClick   e    gt  this toggle    gt Details lt  span gt  lt  td gt     Now you can also add your parameters within the function

User · Answer

Forget about the react first   This is not related to react and let us understand the basic concepts of Java Script  For Example you have written following function in java script  name is A    function a           Q 1  How to call the function that we have defined  Ans  a     Q 2  How to pass reference of function so that we can call it latter  Ans  let fun   a   Now coming to your question  you have used paranthesis with function name  mean that function will be called when following statement will be render     x000D   x000D   lt td gt  lt span onClick  this toggle    gt Details lt  span gt  lt  td gt  x000D   x000D   x000D    Then How to correct it  Simple   Just remove parenthesis  By this way you have given the reference of that function to onClick event  It will call back your function only when your component is clicked    x000D   x000D    lt td gt  lt span onClick  this toggle  gt Details lt  span gt  lt  td gt  x000D   x000D   x000D    One suggestion releated to react  Avoid using inline function as suggested by someone in answers  it may cause performance issue  Avoid following code  It will create instance of same function again and again whenever function will be called  lamda statement creates new instance every time   Note  and no need to pass event  e  explicitly to the function  you can access it with in the function without passing it    x000D   x000D    lt td gt  lt span onClick   e    gt  this toggle e   gt Details lt  span gt  lt  td gt   x000D   x000D   x000D    https   cdb reacttraining com react-inline-functions-and-performance-bdff784f5578

User · Answer

1 If we want to pass argument in the call then we need to call the method like below  As we are using arrow functions no need to bind the method in cunstructor   onClick       gt  this save id      when we bind the method in constructor like this   this save  this save bind this     then we need to call the method without passing any argument like below  onClick  this save    and  we try to pass argument while calling the function  as shown below then error comes like maximum depth exceeded    onClick  this save id

User · Answer

that because you calling toggle inside the render method which will cause to re-render and toggle will call again and re-rendering again and so on   this line at your code    lt td gt  lt span onClick  this toggle    gt Details lt  span gt  lt  td gt     you need to make onClick refer to this toggle not calling it   to fix the issue do this     lt td gt  lt span onClick  this toggle  gt Details lt  span gt  lt  td gt

User · Answer

ReactJS  Maximum update depth exceeded error  inputDigit digit     this setState       displayValue  String digit         lt button type  button onClick  this inputDigit 0   gt    why that    lt button type  button onClick       gt  this inputDigit 1   gt 1 lt  button gt       The function onDigit sets the state  which causes a rerender  which   causes onDigit to fire because that   s the value you   re setting as   onClick which causes the state to be set which causes a rerender    which causes onDigit to fire because that   s the value you   re    Etc

User · Answer

onClick you should call function  thats called your function toggle   onClick       gt  this toggle

User · Answer

if you don t need to pass arguments to function  just remove    from function like below    lt td gt  lt span onClick  this toggle  gt Details lt  span gt  lt  td gt    but if you want to pass arguments  you should do like below    lt td gt  lt span onClick   e    gt  this toggle e arg1 arg2   gt Details lt  span gt  lt  td gt

User · Answer

In this case   this code     lt td gt  lt span onClick  this toggle    gt Details lt  span gt  lt  td gt     causes toggle function to call immediately and re render it again and again thus making infinite calls   so passing only the reference to that toggle method will solve the problem   so       lt td gt  lt span onClick  this toggle  gt Details lt  span gt  lt  td gt     will be the solution code    If you want to use the      you should use an arrow function like this    lt td gt  lt span onClick      gt  this toggle    gt Details lt  span gt  lt  td gt     In case you want to pass parameters you should choose the last option and you can pass parameters like this     lt td gt  lt span onClick   arg   gt this toggle arg   gt Details lt  span gt  lt  td gt     In the last case it doesn t call immediately and don t cause the re render of the function  hence avoiding infinite calls

[javascript] ReactJS: Maximum update depth exceeded error

Examples related to javascript

Examples related to reactjs

Examples related to react-native