React has detected a change in the order of Hooks called by Component.

Related to the experiment of moving to Recoil, we’re seeing the above error message next to a Cannot assign to read only property error message. What we’re doing is basically this:

const setState = useSetRecoilState(someAtomWithMutability)
useEffect(() => {
  setState(s => {
    s.close()
    return null
  })
}, [])

The atom is mutable and s.close() is mutating in some way. That seems to cause issues.

[BenjaBobs]

Assuming s is some kind of connnection or short lived object, I don’t think it’s a good idea to put that directly in recoil state. I would instead have an external object that manages s, and then store whatever data s produces in recoil state.

[rpggio]

A note for anyone else who encounters ‘React has detected a change in the order of Hooks’: You will get this error when you accidentally use a React hook inside of Recoil code (such as in selector get implementation). It’s easy to inadvertently use useRecoilValue(otherValue) when you should be doing get(otherValue). The linter should be picking this up, but mine isn’t.