reactjs - Is there a way that I can use a custom hook in a class-based component?

Question

I have this hook:

import { useEffect, useState } from 'react';
import { auth } from "../firebase/auth-service"

const useFirebaseAuthentication = () => {
   const [authUser, setAuthUser] = useState(null);

   useEffect(() => {
       const unlisten = auth.onAuthStateChanged(
           authUser => {
               authUser
                   ? setAuthUser(authUser)
                   : setAuthUser(null);
           },
       );
       return () => {
           unlisten();
       }
   });

   return authUser
}

export default useFirebaseAuthentication;

That I use like this:

const authUser = useFirebaseAuthentication();

Is there a way I could use this hook useFirebaseAuthentication() in a class-based component?

question from:https://stackoverflow.com/questions/65843692/is-there-a-way-that-i-can-use-a-custom-hook-in-a-class-based-component

Answer 1

Class based components directly donot support Hooks.

Read React-FAQ

You can create a Higher Order Component, like this:

import React from 'react';
import { useFirebaseAuthentication} from '../hooks/useFirebaseAuthentication';

export const withFireBaseAuthHookHOC = (Component: any) => {
  return (props: any) => {
    const authUser = useFirebaseAuthentication();

    return <Component authUser ={authUser} {...props} />;
  };
};

Now just wrap your class based component with this HOC.

.