Learn React Hooks

Wrapper hell

Before Hooks, if we wanted to encapsulate state management logic, we had to use higher-order components and render props. For example, we create a React component that uses contexts to deal with user authentication as follows:

1. We start by importing the authenticateUser function in order to wrap our component with the context, and the AuthenticationContext component in order to access the context:

import authenticateUser, { AuthenticationContext } from './auth'

2. Then, we define our App component, where we make use of the AuthenticationContext.Consumer component and the user render prop:

const App = () => (    <AuthenticationContext.Consumer>        {user =>

3. Now, we display different texts depending on whether the user is logged in or ...