Integrating Firebase with React/

...

/

Higher-Order Components

Higher-Order Components

Now that we've implemented the sign-up system in our application, let's figure out a way to improve it.

We'll cover the following...

In the previous lesson, we made the sign-up system in our React app work through Firebase. However, we can still make things easier.

A Simpler Way

Instead of using a render prop component, which is automatically provided with React’s Context Consumer component, it may be simpler to use a higher-order component.

Let’s implement this higher-order component in the src/components/Firebase/context.js:

Press + to interact
import React from 'react';
const FirebaseContext = React.createContext(null);
export const withFirebase = Component => props => (
  <FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);
export default FirebaseContext;

Next, we’ll make ...