JedWatson / JedWatson/react-select

Maximum update depth exceeded

Open
#6,003 1 comment 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

issue/bug-unconfirmed
Dominant language
TypeScript
Stars
28k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

react-select version:
5.8.3

production sentry caught the error:
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

call stack:

  1. /node_modules/react-select/dist/index-641ee5b8.esm.js in setMenuPortalElement at line 709:5

useLayoutEffect(function () {
runAutoUpdate();
}, [runAutoUpdate]);
var setMenuPortalElement = useCallback(function (menuPortalElement) {
menuPortalRef.current = menuPortalElement;
runAutoUpdate();
}, [runAutoUpdate]);
// bail early if required elements aren't present
if (!appendTo && menuPosition !== 'fixed' || !computedPosition) return null;

  1. /node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs in cleanupRef.current at line 627:1

resizeObserver = null;
if (animationFrame) {
cancelAnimationFrame(frameId);
}
};
}
/**

  • Resolves with an object of overflow side offsets that determine how much the
  • element is overflowing a given clipping boundary on each side.
    • positive = overflowing the boundary by that number of pixels
  1. /node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs in cleanupRef.current at line 613:3

    update();
    }
    prevRefRect = nextRefRect;
    frameId = requestAnimationFrame(frameLoop);
    }
    update();
    return () => {
    var _resizeObserver2;
    ancestors.forEach(ancestor => {
    ancestorScroll && ancestor.removeEventListener('scroll', update);
    ancestorResize && ancestor.removeEventListener('resize', update);

  2. /node_modules/react-select/dist/index-641ee5b8.esm.js in updateComputedPosition at line 684:7

if (!controlElement) return;
var rect = getBoundingClientObj(controlElement);
var scrollDistance = menuPosition === 'fixed' ? 0 : window.pageYOffset;
var offset = rect[placement] + scrollDistance;
if (offset !== (computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.offset) || rect.left !== (computedP {snip}
setComputedPosition({
offset: offset,
rect: rect
});
}
}, [controlElement, menuPosition, placement, computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.offset, {snip}

  1. then react-dom throws the update depth error

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the error with react-select 5.8.3, then inspect the compiled react-select code around setMenuPortalElement and updateComputedPosition and the referenced @floating-ui/dom cleanup callbacks. Done means the reported maximum update depth error no longer occurs in the affected menu-positioning path.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.