[auth] Make sure that all internal methods are wrapped with useCallback

Author: chrisbianca

auth/useAuthState.ts

@@ -1,5 +1,5 @@
 import { Auth, onAuthStateChanged, User } from 'firebase/auth';
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { LoadingHook, useLoadingValue } from '../util';
 
 export type AuthStateHook = LoadingHook<User | null, Error>;
@@ -36,6 +36,5 @@ export default (auth: Auth, options?: AuthStateOptions): AuthStateHook => {
     };
   }, [auth]);
 
-  const resArray: AuthStateHook = [value, loading, error];
-  return useMemo<AuthStateHook>(() => resArray, resArray);
+  return [value, loading, error];
 };

auth/useCreateUserWithEmailAndPassword.ts

@@ -5,7 +5,7 @@ import {
   sendEmailVerification,
   UserCredential,
 } from 'firebase/auth';
-import { useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { CreateUserOptions, EmailAndPasswordActionHook } from './types';
 
 export default (
@@ -16,37 +16,31 @@ export default (
   const [registeredUser, setRegisteredUser] = useState<UserCredential>();
   const [loading, setLoading] = useState<boolean>(false);
 
-  const createUserWithEmailAndPassword = async (
-    email: string,
-    password: string
-  ) => {
-    setLoading(true);
-    setError(undefined);
-    try {
-      const user = await firebaseCreateUserWithEmailAndPassword(
-        auth,
-        email,
-        password
-      );
-      if (options && options.sendEmailVerification && user.user) {
-        await sendEmailVerification(
-          user.user,
-          options.emailVerificationOptions
+  const createUserWithEmailAndPassword = useCallback(
+    async (email: string, password: string) => {
+      setLoading(true);
+      setError(undefined);
+      try {
+        const user = await firebaseCreateUserWithEmailAndPassword(
+          auth,
+          email,
+          password
         );
+        if (options && options.sendEmailVerification && user.user) {
+          await sendEmailVerification(
+            user.user,
+            options.emailVerificationOptions
+          );
+        }
+        setRegisteredUser(user);
+      } catch (error) {
+        setError(error as AuthError);
+      } finally {
+        setLoading(false);
       }
-      setRegisteredUser(user);
-    } catch (error) {
-      setError(error as AuthError);
-    } finally {
-      setLoading(false);
-    }
-  };
+    },
+    [auth, options]
+  );
 
-  const resArray: EmailAndPasswordActionHook = [
-    createUserWithEmailAndPassword,
-    registeredUser,
-    loading,
-    error,
-  ];
-  return useMemo<EmailAndPasswordActionHook>(() => resArray, resArray);
+  return [createUserWithEmailAndPassword, registeredUser, loading, error];
 };

auth/useDeleteUser.ts

@@ -1,5 +1,5 @@
 import { Auth, AuthError } from 'firebase/auth';
-import { useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 export type DeleteUserHook = [
   () => Promise<void>,
@@ -11,7 +11,7 @@ export default (auth: Auth): DeleteUserHook => {
   const [error, setError] = useState<AuthError>();
   const [loading, setLoading] = useState<boolean>(false);
 
-  const deleteUser = async () => {
+  const deleteUser = useCallback(async () => {
     setLoading(true);
     setError(undefined);
     try {
@@ -25,8 +25,7 @@ export default (auth: Auth): DeleteUserHook => {
     } finally {
       setLoading(false);
     }
-  };
+  }, [auth]);
 
-  const resArray: DeleteUserHook = [deleteUser, loading, error];
-  return useMemo<DeleteUserHook>(() => resArray, resArray);
+  return [deleteUser, loading, error];
 };

auth/useSendEmailVerification.ts

@@ -3,7 +3,7 @@ import {
   AuthError,
   sendEmailVerification as fbSendEmailVerification,
 } from 'firebase/auth';
-import { useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 export type SendEmailVerificationHook = [
   () => Promise<void>,
@@ -15,7 +15,7 @@ export default (auth: Auth): SendEmailVerificationHook => {
   const [error, setError] = useState<AuthError>();
   const [loading, setLoading] = useState<boolean>(false);
 
-  const sendEmailVerification = async () => {
+  const sendEmailVerification = useCallback(async () => {
     setLoading(true);
     setError(undefined);
     try {
@@ -29,12 +29,7 @@ export default (auth: Auth): SendEmailVerificationHook => {
     } finally {
       setLoading(false);
     }
-  };
+  }, [auth]);
 
-  const resArray: SendEmailVerificationHook = [
-    sendEmailVerification,
-    loading,
-    error,
-  ];
-  return useMemo<SendEmailVerificationHook>(() => resArray, resArray);
+  return [sendEmailVerification, loading, error];
 };

auth/useSendPasswordResetEmail.ts

@@ -1,10 +1,10 @@
 import {
+  ActionCodeSettings,
   Auth,
   AuthError,
-  ActionCodeSettings,
   sendPasswordResetEmail as fbSendPasswordResetEmail,
 } from 'firebase/auth';
-import { useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 export type SendPasswordResetEmailHook = [
   (email: string, actionCodeSettings?: ActionCodeSettings) => Promise<void>,
@@ -16,25 +16,20 @@ export default (auth: Auth): SendPasswordResetEmailHook => {
   const [error, setError] = useState<AuthError>();
   const [loading, setLoading] = useState<boolean>(false);
 
-  const sendPasswordResetEmail = async (
-    email: string,
-    actionCodeSettings?: ActionCodeSettings
-  ) => {
-    setLoading(true);
-    setError(undefined);
-    try {
-      await fbSendPasswordResetEmail(auth, email, actionCodeSettings);
-    } catch (err) {
-      setError(err as AuthError);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const sendPasswordResetEmail = useCallback(
+    async (email: string, actionCodeSettings?: ActionCodeSettings) => {
+      setLoading(true);
+      setError(undefined);
+      try {
+        await fbSendPasswordResetEmail(auth, email, actionCodeSettings);
+      } catch (err) {
+        setError(err as AuthError);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [auth]
+  );
 
-  const resArray: SendPasswordResetEmailHook = [
-    sendPasswordResetEmail,
-    loading,
-    error,
-  ];
-  return useMemo<SendPasswordResetEmailHook>(() => resArray, resArray);
+  return [sendPasswordResetEmail, loading, error];
 };

auth/useSignInWithEmailAndPassword.ts

@@ -1,42 +1,36 @@
 import {
   Auth,
-  UserCredential,
-  signInWithEmailAndPassword as firebaseSignInWithEmailAndPassword,
   AuthError,
+  signInWithEmailAndPassword as firebaseSignInWithEmailAndPassword,
+  UserCredential,
 } from 'firebase/auth';
-import { useState, useMemo } from 'react';
+import { useCallback, useState } from 'react';
 import { EmailAndPasswordActionHook } from './types';
 
 export default (auth: Auth): EmailAndPasswordActionHook => {
   const [error, setError] = useState<AuthError>();
   const [loggedInUser, setLoggedInUser] = useState<UserCredential>();
   const [loading, setLoading] = useState<boolean>(false);
 
-  const signInWithEmailAndPassword = async (
-    email: string,
-    password: string
-  ) => {
-    setLoading(true);
-    setError(undefined);
-    try {
-      const user = await firebaseSignInWithEmailAndPassword(
-        auth,
-        email,
-        password
-      );
-      setLoggedInUser(user);
-    } catch (err) {
-      setError(err as AuthError);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const signInWithEmailAndPassword = useCallback(
+    async (email: string, password: string) => {
+      setLoading(true);
+      setError(undefined);
+      try {
+        const user = await firebaseSignInWithEmailAndPassword(
+          auth,
+          email,
+          password
+        );
+        setLoggedInUser(user);
+      } catch (err) {
+        setError(err as AuthError);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [auth]
+  );
 
-  const resArray: EmailAndPasswordActionHook = [
-    signInWithEmailAndPassword,
-    loggedInUser,
-    loading,
-    error,
-  ];
-  return useMemo<EmailAndPasswordActionHook>(() => resArray, resArray);
+  return [signInWithEmailAndPassword, loggedInUser, loading, error];
 };