deep equality check

src/screens/user/components/query.js

@@ -1,5 +1,6 @@
-import {useContext, useReducer, useEffect} from 'react'
+import {useContext, useReducer, useEffect, useRef} from 'react'
 import PropTypes from 'prop-types'
+import isEqual from 'lodash/isEqual'
 import * as GitHub from '../../../github-client'
 
 function Query({query, variables, normalize = data => data, children}) {
@@ -14,30 +15,35 @@ function Query({query, variables, normalize = data => data, children}) {
     },
   )
 
-  useEffect(
-    () => {
-      setState({fetching: true})
-      client
-        .request(query, variables)
-        .then(res =>
-          setState({
-            data: normalize(res),
-            error: null,
-            loaded: true,
-            fetching: false,
-          }),
-        )
-        .catch(error =>
-          setState({
-            error,
-            data: null,
-            loaded: false,
-            fetching: false,
-          }),
-        )
-    },
-    [query, variables],
-  )
+  useEffect(() => {
+    if (isEqual(previousInputs.current, [query, variables])) {
+      return
+    }
+    setState({fetching: true})
+    client
+      .request(query, variables)
+      .then(res =>
+        setState({
+          data: normalize(res),
+          error: null,
+          loaded: true,
+          fetching: false,
+        }),
+      )
+      .catch(error =>
+        setState({
+          error,
+          data: null,
+          loaded: false,
+          fetching: false,
+        }),
+      )
+  })
+
+  const previousInputs = useRef()
+  useEffect(() => {
+    previousInputs.current = [query, variables]
+  })
 
   return children(state)
 }