Redwood: FormError causes warning 'Cannot update a component from inside the function body of a different component'

[colinscape]

When following the tutorial at the section about server-side email validation, when introducing FormError, the console reports the error:

Warning: Cannot update a component from inside the function body of a different component.

This looks to be coming from https://github.com/redwoodjs/redwood/blob/master/packages/web/src/form/form.js#L27

[thedavidprice]

@colinscape checking in here. Are you still experiencing this issue? Curious if it is a bug on our end or something specific to your code as you were working through the Tutorial.

Thanks!

[dominicchapman]

Hey @thedavidprice I’m also seeing this warning when following the tutorial.

It seems React 16.3.0 may have been over-firing these warnings and has since been fixed in 16.3.1, but looks like react-hook-form would be using 16.3.1 anyway.

Curious, if this could be linked to #162 ? If so, the fix might be as simple as using PascalCase on inputTagProps (i.e. InputTagProps) as described here. Hope this helps.

--

Digging further, seems it could be a bug on Redwood side. As highlighted in React 16.3.0 release notes:

In the rare case that you intentionally want to change the state of another component as a result of rendering, you can wrap the setState call into useEffect.

So, think the setError call should be wrapped in a useEffect?

[colinscape]

@thedavidprice Just to confirm - I was following the tutorial step by step and saw this in my console, so there was no custom code from my side involved - either some tweak to the tutorial or Redwood itself was my feeling. From a quick search about it seems to have been regularly encountered with React 16.3 as @dominicchapman mentioned.

[thedavidprice]

Thanks, gents! Looping in @cannikin here. I've reproduced the issue by simply entering an invalid email using the final state of the tutorial contact form.

Probably not the highest priority for us given some things in progress right now. But on our list. (And would welcome community help!)

Here's a link to React Hook Form. And a link to Redwood Forms implementation in our "web/" package.

Lastly, I have a personal, up-to-date repo of the final Redwood Blog Tutorial, which I use for testing. It's thedavidprice/redwood-tutorial-test if anyone else wants to make use of it. (Note: the latest Redwood version is 'master' and I create a version-specific branch each time we release.)

react_devtools_backend.js:6 Warning: Cannot update a component (`ContactPage`) while rendering a different component (`Label`). To locate the bad setState() call inside `Label`, follow the stack trace as described in https://fb.me/setstate-in-render
    in Label (created by ContactPage)
    in FormContext (created by Form)
    in form (created by Form)
    in Form (created by ContactPage)
    in main (created by BlogLayout)
    in BlogLayout (created by ContactPage)
    in ContactPage (created by PageLoader)
    in PageLoader (created by RouterImpl)
    in RouterImpl (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Router)
    in Router (created by Routes)
    in Routes
    in ApolloProvider (created by GraphQLProvider)
    in GraphQLProvider (created by RedwoodProvider)
    in RedwoodProvider
    in FatalErrorBoundary

[brianespinosa]

It appears this issue has a corresponding PR that has been merged. Can this now be closed?

[thedavidprice]

Indeed! Closing now.