Prefer react state updater function

[sbdchd]

// err
function UserProfile(userId: string) {
    const [state, setState] = React.useState<UserData>()
    React.useEffect(() => {
        // maybe fetch data
        setState({ ...state, userId })
    }, [state, userId]
    return <p>{state.userId} {state.userEmail}</p>
}

// err
function Bar({ foo }: UserData) {
  const [state, setState] = React.useState<UserData>()

   React.useEffect(() => {
     if (state.foo !== !!foo) {
       setState({
         ...state,
         foo: !!foo,
       })
     }
   }, [state, foo])

   return <p>{state.foo}</p>
}

// ok
function UserProfile(userId: string) {
    const [state, setState] = React.useState<UserData>()
    React.useEffect(() => {
        // maybe fetch data
        setState(prev => ({ ...prev, userId }))
    }, [userId]
    return <p>{state.userId} {state.userEmail}</p>
}

Essentially, by not using the updater function, it's easy to get yourself in an infinite loop