Ensure that object references are correctly retained using useRef

Author: chrisbianca

database/useList.ts

@@ -1,5 +1,5 @@
 import { database } from 'firebase';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 export type ListHook = {
   error?: Object;
@@ -17,6 +17,16 @@ export default (query: database.Query): ListHook => {
   const [loading, setLoading] = useState(true);
   // Combine keys and values in a single state hook to allow them to be manipulated together
   const [{ values }, setKeysValues] = useState({ keys: [], values: [] });
+  // Set a ref for the query to make sure that `useEffect` doesn't run
+  // every time this renders
+  const queryRef = useRef(query);
+  // If the query has changed, then
+  if (!query.isEqual(queryRef.current)) {
+    queryRef.current = query;
+    setError(false);
+    setLoading(true);
+    setKeysValues({ keys: [], values: [] });
+  }
 
   const onChildAdded = (
     snapshot: database.DataSnapshot | null,
@@ -72,6 +82,7 @@ export default (query: database.Query): ListHook => {
 
   useEffect(
     () => {
+      const query: database.Query = queryRef.current;
       // This is here to indicate that all the data has been successfully received
       query.once(
         'value',
@@ -95,8 +106,7 @@ export default (query: database.Query): ListHook => {
         query.off('child_removed', onChildRemoved);
       };
     },
-    // TODO: Check if this works suitably for 'query' parameters
-    [query]
+    [queryRef.current]
   );
 
   return {

database/useObject.ts

@@ -1,5 +1,5 @@
 import { database } from 'firebase';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useDataLoader } from '../util';
 
 export type ObjectHook = {
@@ -9,20 +9,28 @@ export type ObjectHook = {
 };
 
 export default (query: database.Query): ObjectHook => {
-  const { error, loading, setError, setValue, value } = useDataLoader<
+  const { error, loading, reset, setError, setValue, value } = useDataLoader<
     database.DataSnapshot
   >();
+  // Set a ref for the query to make sure that `useEffect` doesn't run
+  // every time this renders
+  const queryRef = useRef(query);
+  // If the query has changed, then
+  if (!query.isEqual(queryRef.current)) {
+    queryRef.current = query;
+    reset();
+  }
 
   useEffect(
     () => {
+      const query: database.Query = queryRef.current;
       query.on('value', setValue, setError);
 
       return () => {
         query.off('value', setValue);
       };
     },
-    // TODO: Check if this works suitably for 'ref' parameters
-    [query]
+    [queryRef.current]
   );
 
   return {

firestore/useCollection.ts

@@ -1,5 +1,5 @@
 import { firestore } from 'firebase';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useDataLoader } from '../util';
 
 export type CollectionHook = {
@@ -12,22 +12,29 @@ export default (
   query: firestore.Query,
   options?: firestore.SnapshotListenOptions
 ): CollectionHook => {
-  const { error, loading, setError, setValue, value } = useDataLoader<
+  const { error, loading, reset, setError, setValue, value } = useDataLoader<
     firestore.QuerySnapshot
   >();
+  // Set a ref for the query to make sure that `useEffect` doesn't run
+  // every time this renders
+  const queryRef = useRef(query);
+  // If the query has changed, then
+  if (!query.isEqual(queryRef.current)) {
+    queryRef.current = query;
+    reset();
+  }
 
   useEffect(
     () => {
       const listener = options
-        ? query.onSnapshot(options, setValue, setError)
-        : query.onSnapshot(setValue, setError);
+        ? queryRef.current.onSnapshot(options, setValue, setError)
+        : queryRef.current.onSnapshot(setValue, setError);
 
       return () => {
         listener();
       };
     },
-    // TODO: Check if this works suitably for 'query' parameters
-    [query]
+    [queryRef.current]
   );
 
   return {

firestore/useDocument.ts

@@ -1,5 +1,5 @@
 import { firestore } from 'firebase';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useDataLoader } from '../util';
 
 export type DocumentHook = {
@@ -9,25 +9,33 @@ export type DocumentHook = {
 };
 
 export default (
-  ref: firestore.DocumentReference,
+  doc: firestore.DocumentReference,
   options?: firestore.SnapshotListenOptions
 ): DocumentHook => {
-  const { error, loading, setError, setValue, value } = useDataLoader<
+  const { error, loading, reset, setError, setValue, value } = useDataLoader<
     firestore.DocumentSnapshot
   >();
+  // Set a ref for the query to make sure that `useEffect` doesn't run
+  // every time this renders
+  const docRef = useRef(doc);
+  // If the query has changed, then
+  if (!doc.isEqual(docRef.current)) {
+    docRef.current = doc;
+    reset();
+  }
 
   useEffect(
     () => {
       const listener = options
-        ? ref.onSnapshot(options, setValue, setError)
-        : ref.onSnapshot(setValue, setError);
+        ? docRef.current.onSnapshot(options, setValue, setError)
+        : docRef.current.onSnapshot(setValue, setError);
 
       return () => {
         listener();
       };
     },
     // TODO: Check if this works suitably for 'ref' parameters
-    [ref]
+    [docRef.current]
   );
 
   return {

storage/useDownloadURL.ts

@@ -1,5 +1,5 @@
 import { storage } from 'firebase';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useDataLoader } from '../util';
 
 export type DownloadURLHook = {
@@ -9,17 +9,26 @@ export type DownloadURLHook = {
 };
 
 export default (ref: storage.Reference): DownloadURLHook => {
-  const { error, loading, setError, setValue, value } = useDataLoader<string>();
+  const { error, loading, reset, setError, setValue, value } = useDataLoader<
+    string
+  >();
+  // Set a ref for the query to make sure that `useEffect` doesn't run
+  // every time this renders
+  const refRef = useRef(ref);
+  // If the query has changed, then
+  if (ref.fullPath !== refRef.current.fullPath) {
+    refRef.current = ref;
+    reset();
+  }
 
   useEffect(
     () => {
-      ref
+      refRef.current
         .getDownloadURL()
         .then(setValue)
         .catch(setError);
     },
-    // TODO: Check if this works suitably for 'ref' parameters
-    [ref]
+    [refRef.current]
   );
 
   return {

util/useDataLoader.ts

@@ -3,6 +3,7 @@ import { useState } from 'react';
 export type Value<T> = {
   error?: object;
   loading: boolean;
+  reset: () => void;
   setError: (error: object) => void;
   setValue: (value: T | null) => void;
   value?: T;
@@ -23,9 +24,16 @@ export default <T>(defaultValue?: T): Value<T> => {
     setLoading(false);
   };
 
+  const reset = () => {
+    setError(undefined);
+    setLoading(true);
+    setValue(defaultValue);
+  };
+
   return {
     error,
     loading,
+    reset,
     setError: onError,
     setValue: onValue,
     value,