Repeating a similar process to what we did for the useTheme Hook, we import the useContext Hook from React and the StateContext. However, instead of returning the result of the Context Hook, we now pull out the state object via destructuring and then return state.user.

Create a new src/hooks/useUserState.js file with the following contents:

import { useContext } from 'react'
import { StateContext } from '../contexts'

export default function useUserState () {
    const { state } = useContext(StateContext)
    return state.user
}

Similarly to the useTheme Hook, the useUserState Hook makes our code more concise, easier to change later, and improves readability.