title: How can I merge ...object and return value of function call in setState(react-hook)?
body: <p>Can't merge ...state and result of function return.</p>
  
  <p>I'm try to changing class component to function component.</p>
  
  <p>so I updated react and used hook.</p>
  
  <p>first of all I want to change class's state, setState to hook's those.</p>
  
  <p>but hook's setState replace oject not merging like class' setState.</p>
  
  <p>It is original code below</p>
  
  <pre><code>import React from 'react'
  import produce from 'immer'
  import {
    getUserFromCookie,
    login,
    logout,
    profile,
    updateProfile
  } from '../api'
  
  const userInfo = getUserFromCookie()
  const UserContext = React.createContext({
    ...userInfo
  })
  
  export const withUserContext = WrappedComponent =&gt; {
    return class ProviderComponent extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          ...userInfo,
          consentNeeded: false,
          updateConsent: async ({ pi, news, seen }) =&gt; {
            await updateProfile({ pi, news, seen })
            this.setState({
              consentNeeded: false
            })
          },
          profile: async () =&gt; {
            const userProfile = await profile()
            if (userProfile.seen_consent_modal === false) {
              this.setState({
                consentNeeded: true
              })
            }
          },
          login: async ({ userId, password }) =&gt; {
            const user = await login({ userId, password })
            this.setState(
              produce(draft =&gt; {
                return user
              })
            )
          },
          logout: async () =&gt; {
            await logout()
          }
        }
      }
  
      render() {
        return (
          &lt;UserContext.Provider value={this.state}&gt;
            &lt;WrappedComponent {...this.props} /&gt;
          &lt;/UserContext.Provider&gt;
        )
      }
    }
  }
  
  export default UserContext
  </code></pre>
  
  <p>and It is function Component I worked.</p>
  
  <pre><code>import React, { useState } from 'react'
  import produce from 'immer'
  import {
    getUserFromCookie,
    login,
    logout,
    profile,
    updateProfile
  } from '../api'
  
  const userInfo = getUserFromCookie()
  const UserContext = React.createContext({
    ...userInfo
  })
  
  export const withUserContext = WrappedComponent =&gt; {
    return function provideComponent() {
  
      const [state, setState] = useState({
        ...userInfo,
        consentNeeded: false,
        updateConsent: async ({ pi, news, seen }) =&gt; {
          console.error('updateConsent!!')
          await updateProfile({ pi, news, seen })
          setState({
            consentNeeded: false
          })
        },
        profile: async () =&gt; {
          console.error('profile!!')
          const userProfile = await profile()
          if (userProfile.seen_consent_modal === false) {
            setState({
              consentNeeded: true
            })
          }
        },
        login: async ({ userId, password }) =&gt; {
          const user = await login({ userId, password })
  
          setState(
            produce(() =&gt; user)
          )
        },
        logout: async () =&gt; {
          await logout()
        }
      })
  
      return (
        &lt;UserContext.Provider value={state}&gt;
          &lt;WrappedComponent {...props} /&gt;
        &lt;/UserContext.Provider&gt;
      )
    }
  }
  
  export default UserContext
  
  </code></pre>
  
  <p>underline warning.. I think it is not correct syntax</p>