fix: avoid re-renders in useDataSource

packages/react/src/experimental/OneDataCollection/hooks/useDataCollectionData/useDataCollectionLanesData.tsx

@@ -6,7 +6,7 @@ import {
   SortingsDefinition,
   UseDataOptions,
 } from "@/hooks/datasource"
-import { useCallback, useEffect, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { ItemActionsDefinition } from "../../item-actions"
 import { NavigationFiltersDefinition } from "../../navigationFilters/types"
 import { SummariesDefinition } from "../../summary"
@@ -79,10 +79,28 @@ const LaneProvider = <
     onError,
   })
 
+  const signature = useMemo(() => {
+    return JSON.stringify({
+      dataRef: hook.data,
+      isInitialLoading: hook.isInitialLoading,
+      isLoading: hook.isLoading,
+      isLoadingMore: hook.isLoadingMore,
+      pagination: hook.paginationInfo,
+      error: hook.error?.message ?? null,
+    })
+  }, [
+    hook.data,
+    hook.isInitialLoading,
+    hook.isLoading,
+    hook.isLoadingMore,
+    hook.paginationInfo,
+    hook.error?.message,
+  ])
+
   useEffect(() => {
     onHookUpdate?.(hook)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hook])
+  }, [signature])
 
   return null
 }
@@ -120,70 +138,81 @@ export function useDataCollectionLanesData<
 
   const handleHookUpdate = useCallback(
     (laneId: string | symbol, value: UseDataCollectionData<R>) => {
-      setLanesHooks((prev) => ({ ...prev, [laneId]: value }))
+      setLanesHooks((prev) => {
+        const curr = prev[laneId]
+        if (
+          curr &&
+          curr.data === value.data &&
+          curr.paginationInfo === value.paginationInfo &&
+          curr.isInitialLoading === value.isInitialLoading &&
+          curr.isLoading === value.isLoading &&
+          curr.isLoadingMore === value.isLoadingMore &&
+          curr.error?.message === value.error?.message
+        ) {
+          return prev
+        }
+        if (curr === value) return prev
+        return { ...prev, [laneId]: value }
+      })
     },
     []
   )
 
   const lanesSignature = useMemo(() => JSON.stringify(lanes), [lanes])
-  const currentFiltersSignature = useMemo(
-    () => JSON.stringify(source.currentFilters),
-    [source.currentFilters]
-  )
-  const currentNavigationFiltersSignature = useMemo(
-    () => JSON.stringify(source.currentNavigationFilters),
-    [source.currentNavigationFilters]
-  )
-  const currentSortingsSignature = useMemo(
-    () => JSON.stringify(source.currentSortings),
-    [source.currentSortings]
-  )
-  const currentGroupingSignature = useMemo(
-    () => JSON.stringify(source.currentGrouping),
-    [source.currentGrouping]
-  )
-  const currentSearchSignature = useMemo(
-    () => JSON.stringify(source.currentSearch),
-    [source.currentSearch]
-  )
-  const groupingSignature = useMemo(
-    () => JSON.stringify(source.grouping),
-    [source.grouping]
-  )
-
-  const lanesProvider = useMemo(
-    () => {
-      return (lanes || []).map((lane) => (
-        <LaneProvider<
-          R,
-          Filters,
-          Sortings,
-          Summaries,
-          NavigationFilters,
-          Grouping
-        >
-          key={lane.id}
-          lane={lane}
-          onError={options.onError}
-          source={source}
-          onHookUpdate={(value) => handleHookUpdate(lane.id, value)}
-        ></LaneProvider>
-      ))
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  const sourceDepsSignature = useMemo(
+    () =>
+      JSON.stringify({
+        f: source.currentFilters,
+        nf: source.currentNavigationFilters,
+        s: source.currentSortings,
+        g: source.currentGrouping,
+        q: source.currentSearch,
+        grp: source.grouping,
+      }),
     [
-      // TODO check why source ref is updated always
-      lanesSignature,
-      handleHookUpdate,
-      currentFiltersSignature,
-      currentNavigationFiltersSignature,
-      currentSortingsSignature,
-      currentGroupingSignature,
-      currentSearchSignature,
-      groupingSignature,
+      source.currentFilters,
+      source.currentNavigationFilters,
+      source.currentSortings,
+      source.currentGrouping,
+      source.currentSearch,
+      source.grouping,
     ]
   )
 
+  const stableSourceRef = useRef(source)
+  useEffect(() => {
+    stableSourceRef.current = source
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sourceDepsSignature])
+
+  const stableLanesRef = useRef(lanes)
+  useEffect(() => {
+    stableLanesRef.current = lanes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lanesSignature])
+
+  const lanesProvider = useMemo(() => {
+    const currentLanes = stableLanesRef.current || []
+    const currentSource = stableSourceRef.current
+    return currentLanes.map((lane) => (
+      <LaneProvider<
+        R,
+        Filters,
+        Sortings,
+        Summaries,
+        NavigationFilters,
+        Grouping
+      >
+        key={lane.id}
+        lane={lane}
+        onError={options.onError}
+        source={currentSource}
+        onHookUpdate={(value) => handleHookUpdate(lane.id, value)}
+      ></LaneProvider>
+    ))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lanesSignature, sourceDepsSignature, handleHookUpdate, options.onError])
+
   return {
     lanesProvider,
     lanesHooks,

packages/react/src/experimental/OneDataCollection/hooks/useDataCollectionSource/__tests__/useDataCollectionSource.component.spec.tsx

@@ -0,0 +1,92 @@
+import {
+  FiltersDefinition,
+  GroupingDefinition,
+  SortingsDefinition,
+} from "@/hooks/datasource"
+import { defaultTranslations, I18nProvider } from "@/lib/providers/i18n"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { memo, useState } from "react"
+import { describe, expect, it, vi } from "vitest"
+import { useDataCollectionSource } from ".."
+import type { ItemActionsDefinition } from "../../../item-actions"
+import type { NavigationFiltersDefinition } from "../../../navigationFilters/types"
+import type { SummariesDefinition } from "../../../summary"
+import type { DataCollectionSource } from "../types"
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <I18nProvider translations={defaultTranslations}>{children}</I18nProvider>
+)
+
+type Item = { id: number; name: string }
+
+type SourceT = DataCollectionSource<
+  Item,
+  FiltersDefinition,
+  SortingsDefinition,
+  SummariesDefinition,
+  ItemActionsDefinition<Item>,
+  NavigationFiltersDefinition,
+  GroupingDefinition<Item>
+>
+
+const Child = memo(
+  ({
+    source,
+    onRender,
+  }: {
+    source: SourceT
+    onRender: (s: SourceT) => void
+  }) => {
+    onRender(source)
+    return <div data-testid="child" />
+  }
+)
+Child.displayName = "Child"
+
+function Parent({ onRender }: { onRender: (s: SourceT) => void }) {
+  const [tick, setTick] = useState(0)
+  const source = useDataCollectionSource<
+    Item,
+    FiltersDefinition,
+    SortingsDefinition,
+    SummariesDefinition,
+    ItemActionsDefinition<Item>,
+    NavigationFiltersDefinition,
+    GroupingDefinition<Item>
+  >({
+    dataAdapter: { fetchData: async () => ({ records: [] }) },
+    filters: { name: { type: "search", label: "Name" } },
+    lanes: [{ id: "1", filters: { name: "a" } }],
+  })
+
+  return (
+    <div>
+      <button onClick={() => setTick((t) => t + 1)}>rerender {tick}</button>
+      <Child source={source} onRender={onRender} />
+    </div>
+  )
+}
+
+describe("useDataCollectionSource (component integration)", () => {
+  it("does not re-render child when hook inputs remain unchanged", async () => {
+    const onRender = vi.fn()
+    const user = userEvent.setup()
+
+    render(
+      <Wrapper>
+        <Parent onRender={onRender} />
+      </Wrapper>
+    )
+
+    // Initial render of Child
+    expect(onRender).toHaveBeenCalledTimes(1)
+
+    // Trigger a parent re-render without changing hook inputs
+    const button = screen.getByRole("button", { name: /rerender/i })
+    await user.click(button)
+
+    // Desired behavior: source reference should be stable, child should not re-render
+    expect(onRender).toHaveBeenCalledTimes(1)
+  })
+})