perf regression: all Sortables in 5.0 rerender constantly on even smallest mouse movement

Hi there. Thanks for this amazing, composable library. We are upgrading from 4.0 to 5.0 and noticed a performance regression. Each Sortable now rerenders constantly on even the smallest mouse movement. This is visible by turning rerender indicators on in react dev tools and visiting an example Sortable story:

https://user-images.githubusercontent.com/3527177/153221284-20794b8f-9384-439a-acf8-25a0b343adf7.mov

In previous versions the Sortables do not rerender unless there is a change on the over state. This would be the expected behavior:

https://user-images.githubusercontent.com/3527177/153223557-ec66c6eb-95ed-4a77-9148-f5a28312cf1f.mov

[ccpu]

I agree that it should be used in the library to improve performance, but for now I am using ‘useContextSelector’ locally to resolve the issue… here is the code:

import {
  ContextSelector,
  createContext,
  useContextSelector,
} from '@fluentui/react-context-selector';

const sortableItemContext = createContext<SortableItemContextStates>(
  {} as SortableItemContextStates,
);
const { Provider, Consumer } = sortableItemContext;

export const useSortableItemContextSelector = <T>(
  selector: ContextSelector<SortableItemContextStates, T>,
) => {
  return useContextSelector(sortableItemContext, selector);
};

export const useSortableItemContext = () => {
  return useContextSelector(sortableItemContext, (c) => c);
};

export const SortableItemProvider = forwardRef<HTMLDivElement, any>(
  (props, ref) => {
    const { itemId, children, ...rest } = props;

    const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
      useSortable({
        id: itemId,
      });

    const sortablePropsMemo = useMemoObject({
      attributes,
      isDragging,
      listeners,
      setNodeRef,
      transform,
      transition,
    });

    return (
      <Provider value={sortablePropsMemo}>
        {React.cloneElement(children as any, { ...rest, ref })}
      </Provider>
    );
  },
);

[dontsave]

i would advocate for its use in the library. dndkit is highly dependent on react context, which makes for a clean architecture, but also causes the standard performance issues that come with it (all consumers rerender regardless of what part of the context value changes). i get wanting the keep the library zero dependency, but if there is any wiggle room in that requirement useContextSelector would be the ideal fix. it looks very likely to be adopted natively into react anyway, at which point the library could go back to not depending on anything