perf(core): memoize context provider values to prevent cascading re-renders

packages/components/layer/src/LayerProvider/LayerProvider.tsx

@@ -1,4 +1,4 @@
-import React, { type FC, type ReactNode, type RefObject } from "react";
+import React, { type FC, type ReactNode, type RefObject, useMemo } from "react";
 import LayerContext from "./LayerContext";
 
 export interface LayerProviderType {
@@ -13,7 +13,8 @@ export interface LayerProviderType {
 }
 
 const LayerProvider: FC<LayerProviderType> = ({ children, layerRef }) => {
-  return <LayerContext.Provider value={{ layerRef }}>{children}</LayerContext.Provider>;
+  const value = useMemo(() => ({ layerRef }), [layerRef]);
+  return <LayerContext.Provider value={value}>{children}</LayerContext.Provider>;
 };
 
 export default LayerProvider;

packages/components/typography/src/Heading/Heading.tsx

@@ -9,6 +9,7 @@ import { type HeadingType, type HeadingWeight } from "./Heading.types";
 import { type TypographyAlign, type TypographyColor } from "../Typography/Typography.types";
 
 const OVERFLOW_TOLERANCE_IN_PX = 4;
+const HEADING_TYPOGRAPHY_CONTEXT_VALUE = { overflowTolerance: OVERFLOW_TOLERANCE_IN_PX };
 
 export interface HeadingProps extends TypographyProps {
   /**
@@ -39,7 +40,7 @@ const Heading = forwardRef(
     ref: React.ForwardedRef<HTMLElement>
   ) => {
     return (
-      <TypographyContext.Provider value={{ overflowTolerance: OVERFLOW_TOLERANCE_IN_PX }}>
+      <TypographyContext.Provider value={HEADING_TYPOGRAPHY_CONTEXT_VALUE}>
         <Typography
           element={type}
           ref={ref}

packages/core/src/components/AlertBanner/AlertBanner.tsx

@@ -13,7 +13,7 @@ import { getTestId } from "../../tests/test-ids-utils";
 import { type VibeComponentProps } from "../../types";
 import styles from "./AlertBanner.module.scss";
 import { Text } from "@vibe/typography";
-import { AlertBannerContext } from "./AlertBannerContext";
+import { AlertBannerContext, type AlertBannerContextType } from "./AlertBannerContext";
 
 type ChildrenType = ReactElement<AlertBannerButtonProps | AlertBannerLinkProps | AlertBannerTextProps>;
 
@@ -71,6 +71,7 @@ const AlertBanner = forwardRef(
       }
       return isDarkBackground ? "onInverted" : "onPrimary";
     }, [isDarkBackground, isFixedColor]);
+    const alertBannerContextValue = useMemo<AlertBannerContextType>(() => ({ textColor }), [textColor]);
     const children = useMemo(() => {
       const allChildren = React.Children.toArray(originalChildren) as ReactElement[];
       const filteredChildren = allChildren.filter(
@@ -109,7 +110,7 @@ const AlertBanner = forwardRef(
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.ALERT_BANNER, id)}
         data-vibe={ComponentVibeId.ALERT_BANNER}
       >
-        <AlertBannerContext.Provider value={{ textColor }}>
+        <AlertBannerContext.Provider value={alertBannerContextValue}>
           <div className={cx(styles.content)}>
             {children.map(
               (

packages/core/src/components/AlertBanner/AlertBannerContext.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { type TypographyColor } from "@vibe/typography";
 
-type AlertBannerContextType = {
+export type AlertBannerContextType = {
   textColor: Extract<TypographyColor, "onPrimary" | "onInverted" | "fixedDark">;
 };
 

packages/core/src/components/GridKeyboardNavigationContext/GridKeyboardNavigationContext.ts

@@ -56,5 +56,5 @@ export const useGridKeyboardNavigationContext = (
     },
     [directionMaps, upperContext, wrapperRef, options.disabled]
   );
-  return { onOutboundNavigation };
+  return useMemo(() => ({ onOutboundNavigation }), [onOutboundNavigation]);
 };

packages/core/src/components/List/List.tsx

@@ -142,6 +142,8 @@ const List = forwardRef(
       }
     }, [updateFocusedItem]);
 
+    const listContextValue = useMemo(() => ({ updateFocusedItem }), [updateFocusedItem]);
+
     const overrideChildren = useMemo(() => {
       let override: ReactElement | ReactElement[] = Array.isArray(children) ? children : [children];
       if (renderOnlyVisibleItems) {
@@ -170,7 +172,7 @@ const List = forwardRef(
     }, [children, component, focusIndex, overrideId, renderOnlyVisibleItems]);
 
     return (
-      <ListContext.Provider value={{ updateFocusedItem }}>
+      <ListContext.Provider value={listContextValue}>
         <Component
           data-testid={dataTestId || getTestId(ComponentDefaultTestId.LIST, id)}
           data-vibe={ComponentVibeId.LIST}

packages/core/src/components/Table/TableContainer/TableContainer.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef } from "react";
+import React, { forwardRef, useMemo, useRef } from "react";
 import { TableContainerProvider } from "../context/TableContainerContext/TableContainerContext";
 import { type TableContainerProps } from "./TableContainer.types";
 import { getTestId } from "../../../tests/test-ids-utils";
@@ -12,9 +12,10 @@ const TableContainer = forwardRef(
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
     const menuContainerRef = useRef<HTMLDivElement>(null);
+    const tableContainerContextValue = useMemo(() => ({ menuContainerRef }), []);
 
     return (
-      <TableContainerProvider value={{ menuContainerRef }}>
+      <TableContainerProvider value={tableContainerContextValue}>
         <div
           ref={ref}
           id={id}

packages/storybook-blocks/src/components/related-components/related-components.tsx

@@ -25,8 +25,10 @@ const RelatedComponents: React.FC<RelatedComponentsProps> & { linkTargets?: type
     [componentsNames, descriptionComponentsMap],
   );
 
+  const relatedComponentsContextValue = useMemo(() => ({ linkTarget }), [linkTarget]);
+
   return (
-    <RelatedComponentsContext.Provider value={{ linkTarget }}>
+    <RelatedComponentsContext.Provider value={relatedComponentsContextValue}>
       <article className={styles.relatedComponents}>{componentsDataElements}</article>
     </RelatedComponentsContext.Provider>
   );