Change to useMountedCallback

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.29
+
+- Fixed an issue where dispatch was called on an unmounted component
+
 ## 1.0.28
 
 - Fixed an issue where the documentation displayed deprecated behavior for using falsey query key parts for dependant queries

src/useBaseQuery.js

@@ -4,7 +4,13 @@ import React from 'react'
 
 import { queryCache } from './queryCache'
 import { useConfigContext } from './config'
-import { useUid, isDocumentVisible, Console, useGetLatest } from './utils'
+import {
+  useUid,
+  isDocumentVisible,
+  Console,
+  useGetLatest,
+  useMountedCallback,
+} from './utils'
 
 export function useBaseQuery(queryKey, queryVariables, queryFn, config = {}) {
   const instanceId = useUid()
@@ -36,7 +42,10 @@ export function useBaseQuery(queryKey, queryVariables, queryFn, config = {}) {
 
   const query = queryRef.current
 
-  const [, rerender] = React.useState()
+  const [, unsafeRerender] = React.useState()
+
+  const rerender = useMountedCallback(unsafeRerender)
+
   const getLatestConfig = useGetLatest(config)
   const refetch = React.useCallback(
     async ({ throwOnError, ...rest } = {}) => {
@@ -76,7 +85,7 @@ export function useBaseQuery(queryKey, queryVariables, queryFn, config = {}) {
     query.wasSuspensed = false
 
     return unsubscribeFromQuery
-  }, [getLatestConfig, instanceId, query, refetch])
+  }, [getLatestConfig, instanceId, query, refetch, rerender])
 
   // Handle refetch interval
   React.useEffect(() => {

src/useMutation.js

@@ -11,7 +11,7 @@ import {
   useGetLatest,
   Console,
   uid,
-  useSafeDispatch,
+  useMountedCallback,
 } from './utils'
 
 const getDefaultState = () => ({
@@ -54,7 +54,7 @@ export function useMutation(mutationFn, config = {}) {
     getDefaultState
   )
 
-  const dispatch = useSafeDispatch(unsafeDispatch)
+  const dispatch = useMountedCallback(unsafeDispatch)
 
   const getMutationFn = useGetLatest(mutationFn)
 

src/utils.js

@@ -109,14 +109,14 @@ export function getQueryArgs(args) {
   return [queryKey, [], queryFn, config]
 }
 
-export function useSafeDispatch(dispatch) {
+export function useMountedCallback(callback) {
   const mounted = React.useRef(false)
-  React.useLayoutEffect(() => {
+  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
     mounted.current = true
     return () => (mounted.current = false)
   }, [])
   return React.useCallback(
-    (...args) => (mounted.current ? dispatch(...args) : void 0),
-    [dispatch]
+    (...args) => (mounted.current ? callback(...args) : void 0),
+    [callback]
   )
 }