Search⌘ K
AI Features
Home
Courses
Integrating Firebase with React

Higher-Order Components

Explore how to implement higher-order components to access Firebase instances in React apps. Understand managing user sign-up and programmatic redirection using React Router to create smooth authentication flows.

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:

Node.js
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 it ...