@dhis2/app-service-offline 3.11.0-alpha.1 → 3.11.1

package/build/cjs/lib/__tests__/cacheable-section-state.test.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _testMocks = require("../../utils/test-mocks");
+
+var _cacheableSectionState = require("../cacheable-section-state");
+
+var _offlineProvider = require("../offline-provider");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const wrapper = (_ref) => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_offlineProvider.OfflineProvider, {
+    offlineInterface: _testMocks.mockOfflineInterface
+  }, children);
+};
+
+test('useRecordingState has stable references', () => {
+  const {
+    result,
+    rerender
+  } = (0, _reactHooks.renderHook)(() => (0, _cacheableSectionState.useRecordingState)('one'), {
+    wrapper
+  });
+  const origRecordingState = result.current.recordingState;
+  const origSetRecordingState = result.current.setRecordingState;
+  const origRemoveRecordingState = result.current.removeRecordingState;
+  rerender();
+  expect(result.current.recordingState).toBe(origRecordingState);
+  expect(result.current.setRecordingState).toBe(origSetRecordingState);
+  expect(result.current.removeRecordingState).toBe(origRemoveRecordingState);
+});
+test('useCachedSection has stable references', () => {
+  const {
+    result,
+    rerender
+  } = (0, _reactHooks.renderHook)(() => (0, _cacheableSectionState.useCachedSection)('one'), {
+    wrapper
+  });
+  const origIsCached = result.current.isCached;
+  const origLastUpdated = result.current.lastUpdated;
+  const origRemove = result.current.remove;
+  const origSyncCachedSections = result.current.syncCachedSections;
+  rerender();
+  expect(result.current.isCached).toBe(origIsCached);
+  expect(result.current.lastUpdated).toBe(origLastUpdated);
+  expect(result.current.remove).toBe(origRemove);
+  expect(result.current.syncCachedSections).toBe(origSyncCachedSections);
+});

package/build/cjs/lib/__tests__/use-cacheable-section.test.js

@@ -53,6 +53,34 @@ it('renders in the default state initially', () => {
   expect(result.current.isCached).toBe(false);
   expect(result.current.lastUpdated).toBeUndefined();
 });
+it('has stable references', () => {
+  const wrapper = (_ref2) => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_offlineProvider.OfflineProvider, {
+      offlineInterface: _testMocks.mockOfflineInterface
+    }, children);
+  };
+
+  const {
+    result,
+    rerender
+  } = (0, _reactHooks.renderHook)(() => (0, _cacheableSection.useCacheableSection)('one'), {
+    wrapper
+  });
+  const origRecordingState = result.current.recordingState;
+  const origStartRecording = result.current.startRecording;
+  const origLastUpdated = result.current.lastUpdated;
+  const origIsCached = result.current.isCached;
+  const origRemove = result.current.remove;
+  rerender();
+  expect(result.current.recordingState).toBe(origRecordingState);
+  expect(result.current.startRecording).toBe(origStartRecording);
+  expect(result.current.lastUpdated).toBe(origLastUpdated);
+  expect(result.current.isCached).toBe(origIsCached);
+  expect(result.current.remove).toBe(origRemove);
+});
 it('handles a successful recording', async done => {
   const [sectionId, timeoutDelay] = ['one', 1234];
   const testOfflineInterface = { ..._testMocks.mockOfflineInterface,
@@ -62,10 +90,10 @@ it('handles a successful recording', async done => {
     }])
   };
 
-  const wrapper = (_ref2) => {
+  const wrapper = (_ref3) => {
     let {
       children
-    } = _ref2;
+    } = _ref3;
     return /*#__PURE__*/_react.default.createElement(_offlineProvider.OfflineProvider, {
       offlineInterface: testOfflineInterface
     }, children);
@@ -134,10 +162,10 @@ it('handles a recording that encounters an error', async done => {
     startRecording: _testMocks.errorRecordingMock
   };
 
-  const wrapper = (_ref3) => {
+  const wrapper = (_ref4) => {
     let {
       children
-    } = _ref3;
+    } = _ref4;
     return /*#__PURE__*/_react.default.createElement(_offlineProvider.OfflineProvider, {
       offlineInterface: testOfflineInterface
     }, children);
@@ -180,10 +208,10 @@ it('handles an error starting the recording', async () => {
     startRecording: _testMocks.failedMessageRecordingMock
   };
 
-  const wrapper = (_ref4) => {
+  const wrapper = (_ref5) => {
     let {
       children
-    } = _ref4;
+    } = _ref5;
     return /*#__PURE__*/_react.default.createElement(_offlineProvider.OfflineProvider, {
       offlineInterface: testOfflineInterface
     }, children);
@@ -206,10 +234,10 @@ it('handles remove and updates sections', async () => {
     }]).mockResolvedValueOnce([])
   };
 
-  const wrapper = (_ref5) => {
+  const wrapper = (_ref6) => {
     let {
       children
-    } = _ref5;
+    } = _ref6;
     return /*#__PURE__*/_react.default.createElement(_offlineProvider.OfflineProvider, {
       offlineInterface: testOfflineInterface
     }, children);
@@ -242,10 +270,10 @@ it('handles a change in ID', async () => {
     }])
   };
 
-  const wrapper = (_ref6) => {
+  const wrapper = (_ref7) => {
     let {
       children
-    } = _ref6;
+    } = _ref7;
     return /*#__PURE__*/_react.default.createElement(_offlineProvider.OfflineProvider, {
       offlineInterface: testOfflineInterface
     }, children);

package/build/cjs/lib/cacheable-section-state.js

@@ -11,12 +11,16 @@ exports.useRecordingState = useRecordingState;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _globalStateService = require("./global-state-service");
 
 var _offlineInterface = require("./offline-interface");
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -83,7 +87,7 @@ function CacheableSectionProvider(_ref2) {
   const offlineInterface = (0, _offlineInterface.useOfflineInterface)();
   const store = useConst(createCacheableSectionStore); // On load, get sections and add to store
 
-  _react.default.useEffect(() => {
+  (0, _react.useEffect)(() => {
     if (offlineInterface) {
       offlineInterface.getCachedSections().then(sections => {
         store.mutate(state => ({ ...state,
@@ -92,7 +96,6 @@ function CacheableSectionProvider(_ref2) {
       });
     }
   }, [store, offlineInterface]);
-
   return /*#__PURE__*/_react.default.createElement(_globalStateService.GlobalStateProvider, {
     store: store
   }, children);
@@ -110,25 +113,28 @@ CacheableSectionProvider.propTypes = {
  * @returns {Object} { recordingState: String, setRecordingState: Function, removeRecordingState: Function}
  */
 function useRecordingState(id) {
-  const [recordingState] = (0, _globalStateService.useGlobalState)(state => state.recordingStates[id]);
-  const setRecordingState = (0, _globalStateService.useGlobalStateMutation)(newState => state => ({ ...state,
+  const recordingStateSelector = (0, _react.useCallback)(state => state.recordingStates[id], [id]);
+  const [recordingState] = (0, _globalStateService.useGlobalState)(recordingStateSelector);
+  const setRecordingStateMutationCreator = (0, _react.useCallback)(newState => state => ({ ...state,
     recordingStates: { ...state.recordingStates,
       [id]: newState
     }
-  }));
-  const removeRecordingState = (0, _globalStateService.useGlobalStateMutation)(() => state => {
+  }), [id]);
+  const setRecordingState = (0, _globalStateService.useGlobalStateMutation)(setRecordingStateMutationCreator);
+  const removeRecordingStateMutationCreator = (0, _react.useCallback)(() => state => {
     const recordingStates = { ...state.recordingStates
     };
     delete recordingStates[id];
     return { ...state,
       recordingStates
     };
-  });
-  return {
+  }, [id]);
+  const removeRecordingState = (0, _globalStateService.useGlobalStateMutation)(removeRecordingStateMutationCreator);
+  return (0, _react.useMemo)(() => ({
     recordingState,
     setRecordingState,
     removeRecordingState
-  };
+  }), [recordingState, setRecordingState, removeRecordingState]);
 }
 /**
  * Returns a function that syncs cached sections in the global state
@@ -140,13 +146,14 @@ function useRecordingState(id) {
 
 function useSyncCachedSections() {
   const offlineInterface = (0, _offlineInterface.useOfflineInterface)();
-  const setCachedSections = (0, _globalStateService.useGlobalStateMutation)(cachedSections => state => ({ ...state,
+  const setCachedSectionsMutationCreator = (0, _react.useCallback)(cachedSections => state => ({ ...state,
     cachedSections
-  }));
-  return async function syncCachedSections() {
+  }), []);
+  const setCachedSections = (0, _globalStateService.useGlobalStateMutation)(setCachedSectionsMutationCreator);
+  return (0, _react.useCallback)(async () => {
     const sections = await offlineInterface.getCachedSections();
     setCachedSections(getSectionsById(sections));
-  };
+  }, [offlineInterface, setCachedSections]);
 }
 
 /**
@@ -166,7 +173,7 @@ function useCachedSections() {
    * deleted, or `false` if asection with the specified ID does not exist.
    */
 
-  async function removeById(id) {
+  const removeById = (0, _react.useCallback)(async id => {
     const success = await offlineInterface.removeSection(id);
 
     if (success) {
@@ -174,13 +181,12 @@ function useCachedSections() {
     }
 
     return success;
-  }
-
-  return {
+  }, [offlineInterface, syncCachedSections]);
+  return (0, _react.useMemo)(() => ({
     cachedSections,
     removeById,
     syncCachedSections
-  };
+  }), [cachedSections, removeById, syncCachedSections]);
 }
 
 /**
@@ -203,7 +209,7 @@ function useCachedSection(id) {
    * section with the specified ID does not exist.
    */
 
-  async function remove() {
+  const remove = (0, _react.useCallback)(async () => {
     const success = await offlineInterface.removeSection(id);
 
     if (success) {
@@ -211,12 +217,11 @@ function useCachedSection(id) {
     }
 
     return success;
-  }
-
-  return {
+  }, [offlineInterface, id, syncCachedSections]);
+  return (0, _react.useMemo)(() => ({
     lastUpdated,
     isCached: !!lastUpdated,
     remove,
     syncCachedSections
-  };
+  }), [lastUpdated, remove, syncCachedSections]);
 }

package/build/cjs/lib/cacheable-section.js

@@ -63,7 +63,18 @@ function useCacheableSection(id) {
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  function startRecording() {
+  const onRecordingStarted = (0, _react.useCallback)(() => {
+    setRecordingState(recordingStates.recording);
+  }, [setRecordingState]);
+  const onRecordingCompleted = (0, _react.useCallback)(() => {
+    setRecordingState(recordingStates.default);
+    syncCachedSections();
+  }, [setRecordingState, syncCachedSections]);
+  const onRecordingError = (0, _react.useCallback)(error => {
+    console.error('Error during recording:', error);
+    setRecordingState(recordingStates.error);
+  }, [setRecordingState]);
+  const startRecording = (0, _react.useCallback)(function () {
     let {
       recordingTimeoutDelay = 1000,
       onStarted,
@@ -89,31 +100,16 @@ function useCacheableSection(id) {
         onError && onError(error);
       }
     }).then(() => setRecordingState(recordingStates.pending));
-  }
-
-  function onRecordingStarted() {
-    setRecordingState(recordingStates.recording);
-  }
-
-  function onRecordingCompleted() {
-    setRecordingState(recordingStates.default);
-    syncCachedSections();
-  }
-
-  function onRecordingError(error) {
-    console.error('Error during recording:', error);
-    setRecordingState(recordingStates.error);
-  } // isCached, lastUpdated, remove: _could_ be accessed by useCachedSection,
+  }, [id, offlineInterface, onRecordingCompleted, onRecordingError, onRecordingStarted, setRecordingState]); // isCached, lastUpdated, remove: _could_ be accessed by useCachedSection,
   // but provided through this hook for convenience
 
-
-  return {
+  return (0, _react.useMemo)(() => ({
     recordingState,
     startRecording,
     lastUpdated,
     isCached,
     remove
-  };
+  }), [recordingState, startRecording, lastUpdated, isCached, remove]);
 }
 
 /**

package/build/cjs/lib/global-state-service.js

@@ -74,12 +74,17 @@ const useGlobalState = function () {
   (0, _react.useEffect)(() => {
     // NEW: deep equality check before updating
     const callback = state => {
-      const newSelectedState = selector(state); // Second condition handles case where a selected object gets
-      // deleted, but state does not update
+      const newSelectedState = selector(state); // Use this form to avoid having `selectedState` as a dep in here
 
-      if (!(0, _isEqual.default)(selectedState, newSelectedState) || selectedState === undefined) {
-        setSelectedState(newSelectedState);
-      }
+      setSelectedState(currentSelectedState => {
+        // Second condition handles case where a selected object gets
+        // deleted, but state does not update
+        if (!(0, _isEqual.default)(currentSelectedState, newSelectedState) || currentSelectedState === undefined) {
+          return newSelectedState;
+        }
+
+        return currentSelectedState;
+      });
     };
 
     store.subscribe(callback); // Make sure to update state when selector changes
@@ -87,9 +92,7 @@ const useGlobalState = function () {
     callback(store.getState());
     return () => store.unsubscribe(callback);
   }, [store, selector]);
-  /* eslint-disable-line react-hooks/exhaustive-deps */
-
-  return [selectedState, store.mutate];
+  return (0, _react.useMemo)(() => [selectedState, store.mutate], [selectedState, store.mutate]);
 };
 
 exports.useGlobalState = useGlobalState;

package/build/es/lib/__tests__/cacheable-section-state.test.js

@@ -0,0 +1,47 @@
+import { renderHook } from '@testing-library/react-hooks';
+import React from 'react';
+import { mockOfflineInterface } from '../../utils/test-mocks';
+import { useCachedSection, useRecordingState } from '../cacheable-section-state';
+import { OfflineProvider } from '../offline-provider';
+
+const wrapper = (_ref) => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(OfflineProvider, {
+    offlineInterface: mockOfflineInterface
+  }, children);
+};
+
+test('useRecordingState has stable references', () => {
+  const {
+    result,
+    rerender
+  } = renderHook(() => useRecordingState('one'), {
+    wrapper
+  });
+  const origRecordingState = result.current.recordingState;
+  const origSetRecordingState = result.current.setRecordingState;
+  const origRemoveRecordingState = result.current.removeRecordingState;
+  rerender();
+  expect(result.current.recordingState).toBe(origRecordingState);
+  expect(result.current.setRecordingState).toBe(origSetRecordingState);
+  expect(result.current.removeRecordingState).toBe(origRemoveRecordingState);
+});
+test('useCachedSection has stable references', () => {
+  const {
+    result,
+    rerender
+  } = renderHook(() => useCachedSection('one'), {
+    wrapper
+  });
+  const origIsCached = result.current.isCached;
+  const origLastUpdated = result.current.lastUpdated;
+  const origRemove = result.current.remove;
+  const origSyncCachedSections = result.current.syncCachedSections;
+  rerender();
+  expect(result.current.isCached).toBe(origIsCached);
+  expect(result.current.lastUpdated).toBe(origLastUpdated);
+  expect(result.current.remove).toBe(origRemove);
+  expect(result.current.syncCachedSections).toBe(origSyncCachedSections);
+});

package/build/es/lib/__tests__/use-cacheable-section.test.js

@@ -44,6 +44,34 @@ it('renders in the default state initially', () => {
   expect(result.current.isCached).toBe(false);
   expect(result.current.lastUpdated).toBeUndefined();
 });
+it('has stable references', () => {
+  const wrapper = (_ref2) => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(OfflineProvider, {
+      offlineInterface: mockOfflineInterface
+    }, children);
+  };
+
+  const {
+    result,
+    rerender
+  } = renderHook(() => useCacheableSection('one'), {
+    wrapper
+  });
+  const origRecordingState = result.current.recordingState;
+  const origStartRecording = result.current.startRecording;
+  const origLastUpdated = result.current.lastUpdated;
+  const origIsCached = result.current.isCached;
+  const origRemove = result.current.remove;
+  rerender();
+  expect(result.current.recordingState).toBe(origRecordingState);
+  expect(result.current.startRecording).toBe(origStartRecording);
+  expect(result.current.lastUpdated).toBe(origLastUpdated);
+  expect(result.current.isCached).toBe(origIsCached);
+  expect(result.current.remove).toBe(origRemove);
+});
 it('handles a successful recording', async done => {
   const [sectionId, timeoutDelay] = ['one', 1234];
   const testOfflineInterface = { ...mockOfflineInterface,
@@ -53,10 +81,10 @@ it('handles a successful recording', async done => {
     }])
   };
 
-  const wrapper = (_ref2) => {
+  const wrapper = (_ref3) => {
     let {
       children
-    } = _ref2;
+    } = _ref3;
     return /*#__PURE__*/React.createElement(OfflineProvider, {
       offlineInterface: testOfflineInterface
     }, children);
@@ -125,10 +153,10 @@ it('handles a recording that encounters an error', async done => {
     startRecording: errorRecordingMock
   };
 
-  const wrapper = (_ref3) => {
+  const wrapper = (_ref4) => {
     let {
       children
-    } = _ref3;
+    } = _ref4;
     return /*#__PURE__*/React.createElement(OfflineProvider, {
       offlineInterface: testOfflineInterface
     }, children);
@@ -171,10 +199,10 @@ it('handles an error starting the recording', async () => {
     startRecording: failedMessageRecordingMock
   };
 
-  const wrapper = (_ref4) => {
+  const wrapper = (_ref5) => {
     let {
       children
-    } = _ref4;
+    } = _ref5;
     return /*#__PURE__*/React.createElement(OfflineProvider, {
       offlineInterface: testOfflineInterface
     }, children);
@@ -197,10 +225,10 @@ it('handles remove and updates sections', async () => {
     }]).mockResolvedValueOnce([])
   };
 
-  const wrapper = (_ref5) => {
+  const wrapper = (_ref6) => {
     let {
       children
-    } = _ref5;
+    } = _ref6;
     return /*#__PURE__*/React.createElement(OfflineProvider, {
       offlineInterface: testOfflineInterface
     }, children);
@@ -233,10 +261,10 @@ it('handles a change in ID', async () => {
     }])
   };
 
-  const wrapper = (_ref6) => {
+  const wrapper = (_ref7) => {
     let {
       children
-    } = _ref6;
+    } = _ref7;
     return /*#__PURE__*/React.createElement(OfflineProvider, {
       offlineInterface: testOfflineInterface
     }, children);

package/build/es/lib/cacheable-section-state.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect, useCallback, useMemo } from 'react';
 import { createStore, useGlobalState, useGlobalStateMutation, GlobalStateProvider } from './global-state-service';
 import { useOfflineInterface } from './offline-interface'; // Functions in here use the global state service to manage cacheable section
 // state in a performant way
@@ -67,7 +67,7 @@ export function CacheableSectionProvider(_ref2) {
   const offlineInterface = useOfflineInterface();
   const store = useConst(createCacheableSectionStore); // On load, get sections and add to store
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (offlineInterface) {
       offlineInterface.getCachedSections().then(sections => {
         store.mutate(state => ({ ...state,
@@ -92,25 +92,28 @@ CacheableSectionProvider.propTypes = {
  * @returns {Object} { recordingState: String, setRecordingState: Function, removeRecordingState: Function}
  */
 export function useRecordingState(id) {
-  const [recordingState] = useGlobalState(state => state.recordingStates[id]);
-  const setRecordingState = useGlobalStateMutation(newState => state => ({ ...state,
+  const recordingStateSelector = useCallback(state => state.recordingStates[id], [id]);
+  const [recordingState] = useGlobalState(recordingStateSelector);
+  const setRecordingStateMutationCreator = useCallback(newState => state => ({ ...state,
     recordingStates: { ...state.recordingStates,
       [id]: newState
     }
-  }));
-  const removeRecordingState = useGlobalStateMutation(() => state => {
+  }), [id]);
+  const setRecordingState = useGlobalStateMutation(setRecordingStateMutationCreator);
+  const removeRecordingStateMutationCreator = useCallback(() => state => {
     const recordingStates = { ...state.recordingStates
     };
     delete recordingStates[id];
     return { ...state,
       recordingStates
     };
-  });
-  return {
+  }, [id]);
+  const removeRecordingState = useGlobalStateMutation(removeRecordingStateMutationCreator);
+  return useMemo(() => ({
     recordingState,
     setRecordingState,
     removeRecordingState
-  };
+  }), [recordingState, setRecordingState, removeRecordingState]);
 }
 /**
  * Returns a function that syncs cached sections in the global state
@@ -121,13 +124,14 @@ export function useRecordingState(id) {
 
 function useSyncCachedSections() {
   const offlineInterface = useOfflineInterface();
-  const setCachedSections = useGlobalStateMutation(cachedSections => state => ({ ...state,
+  const setCachedSectionsMutationCreator = useCallback(cachedSections => state => ({ ...state,
     cachedSections
-  }));
-  return async function syncCachedSections() {
+  }), []);
+  const setCachedSections = useGlobalStateMutation(setCachedSectionsMutationCreator);
+  return useCallback(async () => {
     const sections = await offlineInterface.getCachedSections();
     setCachedSections(getSectionsById(sections));
-  };
+  }, [offlineInterface, setCachedSections]);
 }
 
 /**
@@ -147,7 +151,7 @@ export function useCachedSections() {
    * deleted, or `false` if asection with the specified ID does not exist.
    */
 
-  async function removeById(id) {
+  const removeById = useCallback(async id => {
     const success = await offlineInterface.removeSection(id);
 
     if (success) {
@@ -155,13 +159,12 @@ export function useCachedSections() {
     }
 
     return success;
-  }
-
-  return {
+  }, [offlineInterface, syncCachedSections]);
+  return useMemo(() => ({
     cachedSections,
     removeById,
     syncCachedSections
-  };
+  }), [cachedSections, removeById, syncCachedSections]);
 }
 
 /**
@@ -184,7 +187,7 @@ export function useCachedSection(id) {
    * section with the specified ID does not exist.
    */
 
-  async function remove() {
+  const remove = useCallback(async () => {
     const success = await offlineInterface.removeSection(id);
 
     if (success) {
@@ -192,12 +195,11 @@ export function useCachedSection(id) {
     }
 
     return success;
-  }
-
-  return {
+  }, [offlineInterface, id, syncCachedSections]);
+  return useMemo(() => ({
     lastUpdated,
     isCached: !!lastUpdated,
     remove,
     syncCachedSections
-  };
+  }), [lastUpdated, remove, syncCachedSections]);
 }

package/build/es/lib/cacheable-section.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useRecordingState, useCachedSection } from './cacheable-section-state';
 import { useOfflineInterface } from './offline-interface';
 const recordingStates = {
@@ -45,7 +45,18 @@ export function useCacheableSection(id) {
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  function startRecording() {
+  const onRecordingStarted = useCallback(() => {
+    setRecordingState(recordingStates.recording);
+  }, [setRecordingState]);
+  const onRecordingCompleted = useCallback(() => {
+    setRecordingState(recordingStates.default);
+    syncCachedSections();
+  }, [setRecordingState, syncCachedSections]);
+  const onRecordingError = useCallback(error => {
+    console.error('Error during recording:', error);
+    setRecordingState(recordingStates.error);
+  }, [setRecordingState]);
+  const startRecording = useCallback(function () {
     let {
       recordingTimeoutDelay = 1000,
       onStarted,
@@ -71,31 +82,16 @@ export function useCacheableSection(id) {
         onError && onError(error);
       }
     }).then(() => setRecordingState(recordingStates.pending));
-  }
-
-  function onRecordingStarted() {
-    setRecordingState(recordingStates.recording);
-  }
-
-  function onRecordingCompleted() {
-    setRecordingState(recordingStates.default);
-    syncCachedSections();
-  }
-
-  function onRecordingError(error) {
-    console.error('Error during recording:', error);
-    setRecordingState(recordingStates.error);
-  } // isCached, lastUpdated, remove: _could_ be accessed by useCachedSection,
+  }, [id, offlineInterface, onRecordingCompleted, onRecordingError, onRecordingStarted, setRecordingState]); // isCached, lastUpdated, remove: _could_ be accessed by useCachedSection,
   // but provided through this hook for convenience
 
-
-  return {
+  return useMemo(() => ({
     recordingState,
     startRecording,
     lastUpdated,
     isCached,
     remove
-  };
+  }), [recordingState, startRecording, lastUpdated, isCached, remove]);
 }
 
 /**

package/build/es/lib/global-state-service.js

@@ -1,6 +1,6 @@
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
-import React, { useEffect, useCallback, useContext, useState } from 'react';
+import React, { useEffect, useCallback, useContext, useState, useMemo } from 'react';
 
 // This file creates a redux-like state management service using React context
 // that minimizes unnecessary rerenders that consume the context.
@@ -52,12 +52,17 @@ export const useGlobalState = function () {
   useEffect(() => {
     // NEW: deep equality check before updating
     const callback = state => {
-      const newSelectedState = selector(state); // Second condition handles case where a selected object gets
-      // deleted, but state does not update
+      const newSelectedState = selector(state); // Use this form to avoid having `selectedState` as a dep in here
 
-      if (!isEqual(selectedState, newSelectedState) || selectedState === undefined) {
-        setSelectedState(newSelectedState);
-      }
+      setSelectedState(currentSelectedState => {
+        // Second condition handles case where a selected object gets
+        // deleted, but state does not update
+        if (!isEqual(currentSelectedState, newSelectedState) || currentSelectedState === undefined) {
+          return newSelectedState;
+        }
+
+        return currentSelectedState;
+      });
     };
 
     store.subscribe(callback); // Make sure to update state when selector changes
@@ -65,9 +70,7 @@ export const useGlobalState = function () {
     callback(store.getState());
     return () => store.unsubscribe(callback);
   }, [store, selector]);
-  /* eslint-disable-line react-hooks/exhaustive-deps */
-
-  return [selectedState, store.mutate];
+  return useMemo(() => [selectedState, store.mutate], [selectedState, store.mutate]);
 };
 export function useGlobalStateMutation(mutationCreator) {
   const store = useGlobalStateStore();

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dhis2/app-service-offline",
     "description": "A runtime service for online/offline detection and offline caching",
-    "version": "3.11.0-alpha.1",
+    "version": "3.11.1",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "types": "build/types/index.d.ts",
@@ -33,7 +33,7 @@
         "coverage": "yarn test --coverage"
     },
     "peerDependencies": {
-        "@dhis2/app-service-config": "3.11.0-alpha.1",
+        "@dhis2/app-service-config": "3.11.1",
         "prop-types": "^15.7.2",
         "react": "^16.8.6",
         "react-dom": "^16.8.6"