Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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:

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

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:7
  • Comments:14 (1 by maintainers)

github_iconTop GitHub Comments

ccpucommented, Feb 16, 2022

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 {
} 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, } = props;

    const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
        id: itemId,

    const sortablePropsMemo = useMemoObject({

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

dontsavecommented, Feb 16, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

SWS/S&M Extension - What's new?
Reminder: this new SWS version requires REAPER v5.982+! ... envelope point at the mouse cursor when the arrange view is scrolled (regression from...
Read more >
TIBCO EBX® Documentation - 6.0.5
In the breadcrumb trail, steps related to the history are now clearly identified. Workflow editor. The button for step creation also appears on...
Read more >
S2599 mouse ic, 28th august lottery results. Princess cut black diamond necklace, Small side french braid tutorial, Sin nombre trailer deutsch, ...
Read more >
How Is the Internet Changing the Way You Think? -
But, like other students, I did this with the same brain we've all had for millennia. ... that it is not the technology...
Read more >
whatsnew.txt - Reaper
... "mouse click/edit in arrange view changes track selection" both enabled, ... thousands of very small items (6.54 performance regression) [t=266082] + ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found