{"id":744,"hash":"6b885f60d08406f71ae94656e1d13547854199c87184bffba0dc033da20b1b0c","pattern":"ReactJS: Maximum update depth exceeded error","full_message":"I am trying to toggle the state of a component in ReactJS but I get an error stating:\n\n  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.\n\nI don't see the infinite loop in my code, can anyone help?\n\nReactJS component code:\n\nimport React, { Component } from 'react';\nimport styled from 'styled-components';\n\nclass Item extends React.Component {\n    constructor(props) {\n        super(props);     \n        this.toggle= this.toggle.bind(this);\n        this.state = {\n            details: false\n        } \n    }  \n    toggle(){\n        const currentState = this.state.details;\n        this.setState({ details: !currentState }); \n    }\n\n    render() {\n        return (\n            <tr className=\"Item\"> \n                <td>{this.props.config.server}</td>      \n                <td>{this.props.config.verbose}</td> \n                <td>{this.props.config.type}</td>\n                <td className={this.state.details ? \"visible\" : \"hidden\"}>PLACEHOLDER MORE INFO</td>\n                {<td><span onClick={this.toggle()}>Details</span></td>}\n            </tr>\n    )}\n}\n\nexport default Item;","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"That is because you are calling toggle inside the render method which will cause to re-render and toggle will call again and re-rendering again and so on.\n\nThis line in your code:\n\n{<td><span onClick={this.toggle()}>Details</span></td>}\n\nYou need to make onClick refer to this.toggle instead of calling it.\n\nTo fix the issue do this:\n\n{<td><span onClick={this.toggle}>Details</span></td>}","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/48497358/reactjs-maximum-update-depth-exceeded-error","votes":309,"created_at":"2026-04-19T04:51:34.618242+00:00","updated_at":"2026-04-19T04:51:34.618242+00:00"}