JedWatson / JedWatson/react-select
Maximum update depth exceeded
Nobody has claimed this yet.
- 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:
- /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;
- /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
-
/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); -
/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}
- then react-dom throws the update depth error
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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