perf(components): memoize the slot context value

packages/components/src/lib/slotContext/SlotContextProvider.browser.test.tsx

@@ -0,0 +1,46 @@
+import type { ComponentType, PropsWithChildren } from "react";
+import { memo } from "react";
+import { beforeEach, expect, test } from "vitest";
+import { render } from "vitest-browser-react";
+import { page } from "vitest/browser";
+import { flowComponent } from "@/lib/componentFactory/flowComponent";
+import { useSlotContext } from "@/lib/slotContext/slotContext";
+
+type SlottedComponentProps = PropsWithChildren<{
+  slot?: string;
+  testProp?: string;
+}>;
+
+const SlottedComponent = flowComponent("TestComponent", (props) => (
+  <>{props.children}</>
+)) as ComponentType<SlottedComponentProps>;
+
+let consumerRenderCount: number;
+
+const SlotContextConsumer = memo(() => {
+  consumerRenderCount++;
+  return <span data-testid="slot">{useSlotContext().TestComponent}</span>;
+});
+
+const renderSlotted = (slot: string, testProp: string) => (
+  <SlottedComponent slot={slot} testProp={testProp}>
+    <SlotContextConsumer />
+  </SlottedComponent>
+);
+
+beforeEach(() => {
+  consumerRenderCount = 0;
+});
+
+test("slot context consumers do not re-render when an unrelated prop changes", async () => {
+  const { rerender } = await render(renderSlotted("primary", "a"));
+  await expect.element(page.getByTestId("slot")).toHaveTextContent("primary");
+  expect(consumerRenderCount).toBe(1);
+
+  await rerender(renderSlotted("primary", "b"));
+  expect(consumerRenderCount).toBe(1);
+
+  await rerender(renderSlotted("secondary", "b"));
+  await expect.element(page.getByTestId("slot")).toHaveTextContent("secondary");
+  expect(consumerRenderCount).toBe(2);
+});

packages/components/src/lib/slotContext/SlotContextProvider.tsx

@@ -1,5 +1,5 @@
 import type { FC, PropsWithChildren } from "react";
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import type { FlowComponentName } from "@/components/propTypes";
 import { slotContext, useSlotContext } from "@/lib/slotContext/slotContext";
 
@@ -15,10 +15,13 @@ export const SlotContextProvider: FC<Props> = memo((props) => {
   const { slot, component, children } = props;
   const parentContext = useSlotContext();
 
-  const mergedContext = {
-    ...parentContext,
-    [component]: slot,
-  };
+  const mergedContext = useMemo(
+    () => ({
+      ...parentContext,
+      [component]: slot,
+    }),
+    [parentContext, component, slot],
+  );
 
   return <Provider value={mergedContext}>{children}</Provider>;
 });