test/component/Legend.spec.tsx (1)

1613-1670: Please add one end-to-end resize regression case here.

These assertions cover the new timing, but they still don't exercise the actual #7200 path: a wide horizontal legend wrapping after the chart becomes narrower. One rerender/ResponsiveContainer case that makes the legend grow in height and then asserts a larger bottom offset would lock down the user-visible fix.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@test/component/Legend.spec.tsx` around lines 1613 - 1670, Add an end-to-end
resize regression test that simulates a wide horizontal Legend wrapping when the
chart narrows: use mockGetBoundingClientRect to return a single-line height,
render the chart via testChartLayoutContext (or inside a ResponsiveContainer)
with a wide Legend, then trigger a resize/rerender to a narrower width so the
Legend wraps (increase mocked height), and finally assert that the layout offset
reflected a larger bottom and reduced chart height; reference the existing
helpers (mockGetBoundingClientRect, testChartLayoutContext, Legend,
ResponsiveContainer, rerender) to locate where to add the new case and update
expectations accordingly.

src/util/useElementOffset.ts (1)

77-107: Keep the ref callback stable to avoid recreating the observer on every measurement update.

Because updateBoundingBox depends on lastBoundingBox.*, every state change replaces the ref callback. React will then call the old ref with null and the new one with node, which disconnects and recreates the ResizeObserver on each resize. Comparing against lastBoundingBoxRef.current lets this stay stable across size updates.

♻️ Possible cleanup

   const updateBoundingBox = useCallback(
     (node: HTMLElement | null) => {
@@
       if (node != null) {
         // Measure immediately on ref attach
         const box = readElementOffset(node);
-        if (hasSignificantChange(box, lastBoundingBox)) {
+        if (hasSignificantChange(box, lastBoundingBoxRef.current)) {
+          lastBoundingBoxRef.current = box;
           setLastBoundingBox(box);
         }
@@
           const observer = new ResizeObserver(() => {
             const newBox = readElementOffset(node);
             if (hasSignificantChange(newBox, lastBoundingBoxRef.current)) {
+              lastBoundingBoxRef.current = newBox;
               setLastBoundingBox(newBox);
             }
           });
@@
-    [lastBoundingBox.width, lastBoundingBox.height, lastBoundingBox.top, lastBoundingBox.left, ...extraDependencies],
+    [...extraDependencies],
   );

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/util/useElementOffset.ts` around lines 77 - 107, The ref callback
updateBoundingBox is unstable because it lists lastBoundingBox.* in its
dependency array causing React to recreate the ref on every measurement; make
updateBoundingBox stable by removing lastBoundingBox.width/height/top/left from
the deps and rely on lastBoundingBoxRef.current for comparisons inside the
callback (use lastBoundingBoxRef when calling hasSignificantChange and when
deciding to call setLastBoundingBox), keep observerRef management and the
ResizeObserver setup inside updateBoundingBox and keep extraDependencies in the
deps array so the ref only changes when those external deps change.

src/component/Legend.tsx (1)

159-174: Avoid object-identity reruns in these layout effects.

[dispatch, props] makes both effects rerun on every parent render because props is a fresh object each time. In LegendSizeDispatcher, that also runs the cleanup on unrelated rerenders, briefly dispatching { width: 0, height: 0 } before the real size again. Please depend on the scalar fields instead and keep the reset in an unmount-only effect.

♻️ Possible cleanup

-function LegendSettingsDispatcher(props: LegendSettings): null {
+function LegendSettingsDispatcher({ align, layout, verticalAlign, itemSorter }: LegendSettings): null {
   const dispatch = useAppDispatch();
   useLayoutEffect(() => {
-    dispatch(setLegendSettings(props));
-  }, [dispatch, props]);
+    dispatch(setLegendSettings({ align, layout, verticalAlign, itemSorter }));
+  }, [dispatch, align, layout, verticalAlign, itemSorter]);
   return null;
 }
 
-function LegendSizeDispatcher(props: Size): null {
+function LegendSizeDispatcher({ width, height }: Size): null {
   const dispatch = useAppDispatch();
   useLayoutEffect(() => {
-    dispatch(setLegendSize(props));
+    dispatch(setLegendSize({ width, height }));
+  }, [dispatch, width, height]);
+
+  useLayoutEffect(() => {
     return () => {
       dispatch(setLegendSize({ width: 0, height: 0 }));
     };
-  }, [dispatch, props]);
+  }, [dispatch]);
   return null;
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/component/Legend.tsx` around lines 159 - 174, The layout effects rerun on
every render because they depend on the whole props object; fix
LegendSettingsDispatcher and LegendSizeDispatcher by destructuring the incoming
props into their scalar fields and use those scalars in the dependency arrays
(e.g., for LegendSettingsDispatcher depend on the specific settings fields you
care about rather than props, and for LegendSizeDispatcher depend only on width
and height), and move the reset-to-zero dispatch into an unmount-only cleanup (a
separate effect with an empty dependency array that returns a cleanup calling
setLegendSize({ width: 0, height: 0 })) while the size-updating effect only
dispatches setLegendSize(width,height) when those scalar values change.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes