@mui/x-data-grid/hooks/utils/useGridSelector.mjs

The Community plan edition of the MUI X Data Grid components.

'use client';

import * as React from 'react';
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
import { warnOnce } from '@mui/x-internals/warning';
import { useLazyRef } from "./useLazyRef.mjs";
const defaultCompare = Object.is;
export const objectShallowCompare = fastObjectShallowCompare;
const arrayShallowCompare = (a, b) => {
  if (a === b) {
    return true;
  }
  return a.length === b.length && a.every((v, i) => v === b[i]);
};
const argsEqual = (prev, curr) => {
  let fn = Object.is;
  if (curr instanceof Array) {
    fn = arrayShallowCompare;
  } else if (curr instanceof Object) {
    fn = objectShallowCompare;
  }
  return fn(prev, curr);
};
const createRefs = () => ({
  state: null,
  equals: null,
  selector: null,
  args: undefined,
  storeState: null
});
const EMPTY = [];
export function useGridSelector(apiRef, selector, args = undefined, equals = defaultCompare) {
  if (process.env.NODE_ENV !== 'production' && !apiRef.current.state) {
    warnOnce(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
  }
  const refs = useLazyRef(createRefs);
  const didInit = refs.current.selector !== null;
  const [state, setState] = React.useState(
  // We don't use an initialization function to avoid allocations
  didInit ? null : selector(apiRef, args));
  refs.current.state = state;
  if (!didInit) {
    refs.current.storeState = apiRef.current.store.state;
  }
  refs.current.equals = equals;
  refs.current.selector = selector;
  const prevArgs = refs.current.args;
  refs.current.args = args;
  if (didInit && !argsEqual(prevArgs, args)) {
    const newState = refs.current.selector(apiRef, refs.current.args);
    if (!refs.current.equals(refs.current.state, newState)) {
      refs.current.state = newState;
      setState(newState);
    }
    refs.current.storeState = apiRef.current.store.state;
  }
  const updateState = React.useCallback(() => {
    const storeState = apiRef.current.store.state;
    if (refs.current.storeState !== storeState) {
      const newState = refs.current.selector(apiRef, refs.current.args);
      refs.current.storeState = storeState;
      if (!refs.current.equals(refs.current.state, newState)) {
        refs.current.state = newState;
        setState(newState);
      }
    }
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/use-memo
  EMPTY);

  // Why subscribe in an effect instead of during render: a component can render without
  // ever mounting (e.g. when it suspends during hydration). If it subscribed during render,
  // it could receive a store update and call `setState` before being mounted (#17077).
  // Effects only run for mounted components, so subscribing here is safe.
  //
  // Using a layout effect because the store may already have changed
  // between render and mount (e.g. from a child's ref callback or layout effect).
  // `updateState()` picks up such changes, so the corrected value is shown right away instead of in a second frame.
  useEnhancedEffect(() => {
    updateState();
    return apiRef.current.store.subscribe(updateState);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, EMPTY);
  return state;
}