Hooks vs no hooks

provider-example-class.js

import React from 'react'
import * as _ from 'lodash'

/*---------------------------------------------------------------------------*\
   USER
\*---------------------------------------------------------------------------*/

const UserContext = React.createContext()

const UserProvider = withRouter(class UserProvider extends React.Component {
  constructor(...args) {
    this.state = {
      user: null
    }
  }
  
  login(email, password) {
    try {
      const { data: user } = api.post('/login', { emaiil, password })
      this.setState({ user })
      this.props.history.push('/dashboard')
    } catch (e) {
      console.error(e)
    }
  }
  
  logout() {
    this.setState({ user: null })
    this.props.history.push('/sign-in')
  }
  
  render() {
    const value = {
      user: this.state.user,
      login: this.login,
      logout: this.logout
    }
    
    return (
      <UserContext.Provider value={value}>
        {children}
      </UserContext.Provider>
    )
  }
})



/*---------------------------------------------------------------------------*\
   APP
\*---------------------------------------------------------------------------*/

class App extends React.Component {
  static contextType = UserContext

  render() {
    const { user } = this.context
    
    if (_.isNull(user)) {
      return <Redirect to="/sign-in" />
    }

    return <Dashboard user={user} />
  }
}

provider-example-hooks.js

import React from 'react'
import * as _ from 'lodash'

/*---------------------------------------------------------------------------*\
   USER
\*---------------------------------------------------------------------------*/

const UserContext = React.createContext()

const UserProvider = ({ children }) => {
  const { history } = useRouter()
  const [user, setUser] = React.useState(null)
  
  const login = async (email, password) => {
    try {
      const { data: user } = api.post('/login', { emaiil, password })
      setUser(user)
      history.push('/dashboard')
    } catch (e) {
      console.error(e)
    }
  }
  
  const logout = () => {
    setUser(null)
    history.push('/sign-in')
  }
  
  const value = { user, login, logout }

  return (
    <UserContext.Provider value={value}>
      {children}
    </UserContext.Provider>
  )
}



/*---------------------------------------------------------------------------*\
   APP
\*---------------------------------------------------------------------------*/

const App = () => {
  const { user } = React.useContext(UserContext)
  
  if (_.isNull(user)) {
    return <Redirect to="/sign-in" />
  }

  return <Dashboard user={user} />
}