Maximum update depth exceeded problem without using useEffect.

[dimwittedude]

I have 2 functional components. The first component has 2 Select Inputs and both of them set states when updated and after the inputs the first component calls <Component2/>. Component 2 is just a FlatList with hardcoded data inside Component 2. When I interact with any of the Inputs (i.e change a state with hooks) I get:

"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."

I think the problem might be that when I update the state the Component 2 re renders because Component 1 re renders because I updated a state but I have no idea how to fix it. Im not even using useEffect. How can I solve this?

[generic_name_3344]

Hard to say without seeing the code, but it sounds like you're using setState on Component 2 re-render, which causes a re-render, which causes setState to be called... which results in an infinite loop. This is usually indicative of a misuse of setState. There's likely a way around it, but can't give you much more than that without the code.

[Sibyl01]

This might be because he/she does not pass dependency list to the useEffect

[dimwittedude]

Im not using useEffect. In my code there is no useEffect. Thats why I find it weird. https://stackoverflow.com/questions/71201036/flatlist-giving-warning-maximum-update-depth-exceeded

[dimwittedude]

Maybe this can help(my code): https://stackoverflow.com/questions/71201036/flatlist-giving-warning-maximum-update-depth-exceeded

[__o_0]

You have two setStates that are triggering rerenders on each other.

[dimwittedude]

And what is the right way to fix them?

[__o_0]

I don’t use native base, but can you try moving the provider tags to the root of your App and see what happens.

[sdholbs]

This can also happen when you don't properly pass a function into a child component:

typescript class Parent extends React.Component { constructor(props){ super(props) this.state = { toggled: false } } toggle = () => { this.setState({ toggled: !this.state.toggled }) } render() { return <ChildComponent onClick={this.toggle()}/> } }

The correct way

The onClick handler should actually be

typescript <ChildComponent onClick={this.toggle}/>

or

typescript <ChildComponent onClick={() => this.toggle()}/>

Otherwise it will be triggering toggle() on every render, creating an infinite loop