reactjs - Losing state between renders if component is defined in another component

Question

codesandbox here: https://codesandbox.io/s/restless-haze-v01wv?file=/src/App.js

I have a Users component which (when simplified) looks something like this:

const Users = () => {
  const [toastOpen, setToastOpen] = useState(false)

  // functions to handle toast closing
  return (
   <EditUser />
   <Toast />
  )
}

const EditUser = () => {
  [user, setUser] = useState(null)
  useEffect(() => {
    const fetchedUser = await fetchUser()
    setUser(fetchedUser)
  }, [])

  // this approach results in UserForm's username resetting when the toast closes
  const Content = () => {
    if (user) return <UserForm user={user} />
    else return <div>Loading...</div>
  }
  return <Content />

  // if I do this instead, everything's fine
  return (
    <div>
    {
      user ? <UserForm user={user} /> : <div>Loading...</div>
    }
    </div>
  )
}

const UserForm = ({ user }) => {
  const [username, setUsername] = useState(user.name)

  return <input value={username}, onChange={e => setUsername(e.target.value)} />
}

While viewing the UserForm page while a Toast is still open, the UserForm state is reset when the Toast closes.

I've figured out that the issue is the Content component defined inside of EditUser, but I'm not quite clear on why this is an issue. I'd love a walkthrough of what's happening under React's hood here, and what happens in a "happy path"

Answer 1

You have defined Content inside EditUser component which we never do with React Components, because in this situtaion, Content will be re-created every time the EditUser is re-rendered. (surely, EditUser is going to be re-rendered few/many times).

So, a re-created Content component means the old Content will be destroyed (unmounted) and the new Content will be mounted.

That's why it is be being mounted many times and hence resetting the state values to initial values.

So, the solution is to just define it (Content) outside - not inside any other react component.