Fix slow rerendering of large tables (reopened)

packages/@mantine/core/src/core/styles-api/use-styles/use-styles.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, useCallback, useMemo } from 'react';
 import type { MantineStyleProp } from '../../Box';
 import { FactoryPayload } from '../../factory';
 import {
@@ -7,6 +7,7 @@ import {
  useMantineTheme,
  useMantineWithStaticClasses,
 } from '../../MantineProvider';
+import { useMemoObject } from '../../utils/use-memo-object/use-memo-object';
 import { PartialVarsResolver, VarsResolver } from '../create-vars-resolver/create-vars-resolver';
 import { ClassNames, ClassNamesArray, GetStylesApiOptions, Styles } from '../styles-api.types';
 import { getClassName } from './get-class-name/get-class-name';
@@ -36,6 +37,18 @@ export type GetStylesApi<Payload extends FactoryPayload> = (
  style: CSSProperties;
 };
 
+// Omit objects from props to avoid unnecessary rerenders
+function omitObjectProps<TProps extends Record<string, unknown>>(props: TProps): Partial<TProps> {
+ const result: Record<string, unknown> = {}; // Couldn't be "Partial<TProps>" because of TS2862 error
+ for (const [key, value] of Object.entries(props)) {
+ if (!value || (typeof value !== 'object' && typeof value !== 'function')) {
+ result[key] = value;
+ }
+ }
+
+ return result as Partial<TProps>;
+}
+
 export function useStyles<Payload extends FactoryPayload>({
  name,
  classes,
@@ -54,46 +67,72 @@ export function useStyles<Payload extends FactoryPayload>({
  const classNamesPrefix = useMantineClassNamesPrefix();
  const withStaticClasses = useMantineWithStaticClasses();
  const headless = useMantineIsHeadless();
- const themeName = (Array.isArray(name) ? name : [name]).filter((n) => n) as string[];
+ const themeName = useMemo(
+ () => (Array.isArray(name) ? name : [name]).filter((n) => n) as string[],
+ [JSON.stringify(name)] // "name" can be a new array on every render
+ );
+ const memoizedProps = useMemoObject(omitObjectProps(props));
  const { withStylesTransform, getTransformedStyles } = useStylesTransform({
- props,
+ props: memoizedProps,
  stylesCtx,
  themeName,
  });
 
- return (selector, options) => ({
- className: getClassName({
+ return useCallback(
+ (selector, options) => ({
+ className: getClassName({
+ theme,
+ options,
+ themeName,
+ selector,
+ classNamesPrefix,
+ classNames,
+ classes,
+ unstyled,
+ className,
+ rootSelector,
+ props: memoizedProps,
+ stylesCtx,
+ withStaticClasses,
+ headless,
+ transformedStyles: getTransformedStyles([options?.styles, styles]),
+ }),
+
+ style: getStyle({
+ theme,
+ themeName,
+ selector,
+ options,
+ props: memoizedProps,
+ stylesCtx,
+ rootSelector,
+ styles,
+ style,
+ vars,
+ varsResolver,
+ headless,
+ withStylesTransform,
+ }),
+ }),
+ [
  theme,
- options,
  themeName,
- selector,
  classNamesPrefix,
  classNames,
  classes,
  unstyled,
  className,
  rootSelector,
- props,
- stylesCtx,
- withStaticClasses,
- headless,
- transformedStyles: getTransformedStyles([options?.styles, styles]),
- }),
-
- style: getStyle({
- theme,
- themeName,
- selector,
- options,
- props,
+ memoizedProps,
  stylesCtx,
- rootSelector,
  styles,
  style,
  vars,
  varsResolver,
+ withStaticClasses,
  headless,
  withStylesTransform,
- }),
- });
+ getTransformedStyles,
+ ]
+ );
 }

packages/@mantine/core/src/core/styles-api/use-styles/use-transformed-styles.ts

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { useMantineStylesTransform, useMantineTheme } from '../../MantineProvider';
 
 interface UseTransformedStylesInput {
@@ -10,22 +11,25 @@ export function useStylesTransform({ props, stylesCtx, themeName }: UseTransform
  const theme = useMantineTheme();
  const stylesTransform = useMantineStylesTransform()?.();
 
- const getTransformedStyles = (styles: any[]) => {
- if (!stylesTransform) {
- return [];
- }
+ const getTransformedStyles = useCallback(
+ (styles: any[]) => {
+ if (!stylesTransform) {
+ return [];
+ }
 
- const transformedStyles = styles.map((style) =>
- stylesTransform(style, { props, theme, ctx: stylesCtx })
- );
+  const transformedStyles = styles.map((style) =>
+  stylesTransform(style, { props, theme, ctx: stylesCtx })
+  );
 
- return [
- ...transformedStyles,
- ...themeName.map((n) =>
- stylesTransform(theme.components[n]?.styles, { props, theme, ctx: stylesCtx })
- ),
- ].filter(Boolean) as Record<string, string>[];
- };
+ return [
+ ...transformedStyles,
+ ...themeName.map((n) =>
+ stylesTransform(theme.components[n]?.styles, { props, theme, ctx: stylesCtx })
+ ),
+ ].filter(Boolean) as Record<string, string>[];
+ },
+ [stylesTransform, props, theme, stylesCtx, themeName]
+ );
 
  return {
  getTransformedStyles,

packages/@mantine/core/src/core/utils/create-safe-context/create-safe-context.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react';
+import { useMemoObject } from '../use-memo-object/use-memo-object';
 
 export function createSafeContext<ContextValue>(errorMessage: string) {
  const Context = createContext<ContextValue | null>(null);
@@ -13,9 +14,10 @@ export function createSafeContext<ContextValue>(errorMessage: string) {
  return ctx;
  };
 
- const Provider = ({ children, value }: { value: ContextValue; children: React.ReactNode }) => (
- <Context.Provider value={value}>{children}</Context.Provider>
- );
+ const Provider = ({ children, value }: { value: ContextValue; children: React.ReactNode }) => {
+ const memoizedValue = useMemoObject(value);
+ return <Context.Provider value={memoizedValue}>{children}</Context.Provider>;
+ };
 
  return [Provider, useSafeContext] as const;
 }

packages/@mantine/core/src/core/utils/use-memo-object/use-memo-object.ts

@@ -0,0 +1,15 @@
+import { useMemo, useRef } from 'react';
+
+// Memoize object value to avoid unnecessary renders
+export function useMemoObject<T>(value: T): T {
+ const valueRef = useRef(value);
+ useMemo(() => {
+ for (const field in value) {
+ if (valueRef.current[field] !== value[field]) {
+ valueRef.current = value;
+ return;
+ }
+ }
+ }, [value]);
+ return valueRef.current;
+}