Too many re-renders on component in react

I'm working on a small project in react w/ recoil and I'm stumped on this error:

In the above code I'm attempting to read some props from useChatData() hook from a support package in chainlit/react-client to check my connection status to an independent backend which seems to work but overloads via re-renders and crashes the app.

I've tried the following:

• Removing messagestring and calling Chat confirmation is: {confCon()} directly but triggers the same issue
• Tried Chat confirmation is: {confCon} but then the code doesn't execute
• Tried removing the state for the count which counts up to 25 but the timeout still happens I just lose the count.

I'm really confused because I've used code like this before where I define a function and call that function in return like <div>{someFunction}</div> so I'm not sure where I'm going wrong here.

Any advice would be appreciated!

Highly recommend reading the documentation about hooks.

The issue you are having is because you are firing state in the render path IE what is being returned in the UI. Never do this.

TLDR: Never fire state updates in the react render method.

• confCon is the reason it is looping b/c it fires a sideEffect directly in the render.
• It updates state, then state re-renders, but rendering method fires an update to state, which triggers another render ...until your app crashes.
• confCon should only be responsible for rendering the UI data. Abstract any sideEffects with a useEffect (such as calling an API or updating state).

For state updating methods they need to be in be in an interactable element IE a button onClick, or a called within a useEffect that contains a dependency array that is not related to the dependency being updated (if it is it will loop).

Without these critical steps, your component will attempt to re-render until it hits callstack limits due to recursion.