fix: use programId in effect dep list for fetching DHIS2-15752

program is an object that changes at each render triggering the fetch
every time.
Instead, use a memoized program.id which is the only thing needed in the
fetch.
Memoize also setIsListEndVisible to avoid returning a difference
function from the hook.

src/components/MainSidebar/ProgramDimensionsPanel/useProgramDataDimensions.js

@@ -210,6 +210,8 @@ const useProgramDataDimensions = ({
         },
         dispatch,
     ] = useReducer(reducer, initialState)
+
+    const programId = useMemo(() => program.id, [program])
     const programStageNames = useMemo(
         () =>
             program.programStages?.reduce((acc, stage) => {
@@ -222,11 +224,17 @@ const useProgramDataDimensions = ({
     const nameProp =
         currentUser.settings[DERIVED_USER_SETTINGS_DISPLAY_NAME_PROPERTY]
 
-    const setIsListEndVisible = (isVisible) => {
-        if (isVisible !== isListEndVisible) {
-            dispatch({ type: ACTIONS_SET_LIST_END_VISIBLE, payload: isVisible })
-        }
-    }
+    const setIsListEndVisible = useCallback(
+        (isVisible) => {
+            if (isVisible !== isListEndVisible) {
+                dispatch({
+                    type: ACTIONS_SET_LIST_END_VISIBLE,
+                    payload: isVisible,
+                })
+            }
+        },
+        [isListEndVisible]
+    )
 
     const fetchDimensions = useCallback(
         async (shouldReset) => {
@@ -243,7 +251,7 @@ const useProgramDataDimensions = ({
                     dimensions: createDimensionsQuery({
                         inputType,
                         page,
-                        programId: program.id,
+                        programId,
                         stageId,
                         searchTerm,
                         dimensionType,
@@ -267,20 +275,22 @@ const useProgramDataDimensions = ({
             }
         },
         [
+            dimensions,
+            engine,
+            programStageNames,
             inputType,
             nextPage,
-            program,
+            programId,
             stageId,
             searchTerm,
             dimensionType,
-            isListEndVisible,
             nameProp,
         ]
     )
 
     useEffect(() => {
         fetchDimensions(true)
-    }, [inputType, program, stageId, searchTerm, dimensionType, nameProp])
+    }, [inputType, programId, stageId, searchTerm, dimensionType, nameProp])
 
     useEffect(() => {
         if (isListEndVisible && !isLastPage && !fetching) {