chore: useMemo for variables in useDataProvider hook

libs/react-helpers/src/hooks/use-data-provider.spec.ts

@@ -161,6 +161,13 @@ describe('useDataProvider hook', () => {
     });
     expect(update).toBeCalledTimes(1);
 
+    // setting same variables, with different object reference
+    await act(async () => {
+      rerender({ dataProvider, update, variables: { ...variables } });
+    });
+    expect(unsubscribe).toBeCalledTimes(0);
+    expect(dataProvider).toBeCalledTimes(1);
+
     // changing variables after date was loaded
     await act(async () => {
       rerender({ dataProvider, update, variables: { partyId: '0x321' } });

libs/react-helpers/src/hooks/use-data-provider.ts

@@ -1,6 +1,8 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import throttle from 'lodash/throttle';
+import isEqual from 'lodash/isEqual';
 import { useApolloClient } from '@apollo/client';
+import { usePrevious } from './use-previous';
 import type { OperationVariables } from '@apollo/client';
 import type {
   Subscribe,
@@ -52,9 +54,9 @@ export const useDataProvider = <
   dataProvider,
   update,
   insert,
-  variables,
   skipUpdates,
   skip,
+  ...props
 }: useDataProviderParams<Data, Delta, Variables>) => {
   const client = useApolloClient();
   const [data, setData] = useState<Data | null>(null);
@@ -65,6 +67,13 @@ export const useDataProvider = <
   const reloadRef = useRef<((force?: boolean) => void) | undefined>(undefined);
   const loadRef = useRef<Load<Data> | undefined>(undefined);
   const initialized = useRef<boolean>(false);
+  const prevVariables = usePrevious(props.variables);
+  const [variables, setVariables] = useState(props.variables);
+  useEffect(() => {
+    if (!isEqual(prevVariables, props.variables)) {
+      setVariables(props.variables);
+    }
+  }, [props.variables, prevVariables]);
   const flush = useCallback(() => {
     if (flushRef.current) {
       flushRef.current();