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

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

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

[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?