Cannot update a component while rendering a different component

Get Help and Help Others
1

So I am running into an error and don’t know how to solve it

I have several cells which get kicked off in unison, how can I tell from the owning component when they are all done?

I’m used to passing down a function a child component will call to change state, telling the owning component that the child component is completed

But when I do this in a cell react errors with: Cannot update a component while rendering a different component (Success) (which is where I call the function that changes state in the owning component)

What’s the Redwood way to notify the owning component that cell is completed (and ideally pass it the data) ??

2

Do you have any code that you could share, I have an idea of what might be going on but it is hard with out seeing how all the pieces of code connect.

3

Blind shot, have you considered using afterQuery ?
It’s called here in the process of a Cell, might do the trick :

4

@KrisCoulson thanks, not immediately - but I’m interested in any thoughts - if I can’t figure it out I’ll try to make a minimum repeatable

@noire.munich hi, yes I tried the after query

Exfiltration of the data is trivial w/Redwood giving me a way to pass in a function to beforeQuery and call it upon success.

This is a React thing - I’ll Google it & report back here

Thanks! Redwood & Material-UI doing great for me.

Edit: very first hit on the error says to fix it with useEffect (How to fix the "cannot update a component while rendering a different component" error in React) so I guess I’ll try to figure out how to put a useEffect in the Cell ?!?!?

5

I ended up exfiltrating the cell data on success, and then using an interval to change state when I have data from all of the cells.

Not ideal, but demo time is looming…

6

Much better solution !!

A bit circuitous (thanks React) but it solves the chicken and the egg problem I was having !!

Stick a ref on a DOM element and update that from the Cell Success then setState when the ref changes

  const [securityCode, setSecurityCode] = React.useState()
  const codeBox = React.useRef()
  React.useEffect(() => {
    setSecurityCode(codeBox.current)
  }, [codeBox])
  const updateSecurityCode = (value) => {
    codeBox.current = value
  }
  return (
    <TheTwoFACodeCell phone={phone} saveSecurityCode={updateSecurityCode} />
    <span ref={codeBox}>{securityCode}</span>
  )
7

Do you think we should include this info anywhere in the Cells docs in case anyone else runs into this? Seems like this would come up frequently with apps that have a large number of components.

8

Unfortunately that solution above didn’t end up solving the basic problem: the contents of useEffect are not re-executed when it’s dependencies change. (it had seemed to work based on other things causing re-rendering)

So far I have only found one way to deal with the problem: exfiltrate the results and use an interval timer to pick them up and act upon them.

I am regularly hitting this wall, so a solution - or a change in the way I am approaching the problem would be very beneficial to me

I think we need to have an easier way to replicate the problem

I feel like someone with more advanced skills could show the right way to handle the problem if they had a shared place to look at it

Is there a sandbox-y place where you have a just-constructed redwood app up and editable that one can add things to it to illustrate problems?

9

Is there a sandbox-y place where you have a just-constructed redwood app up and editable that one can add things to it to illustrate problems?

You can fork this repo, which is the final codebase from the Redwood Tutorial. Will that help?