-
Notifications
You must be signed in to change notification settings - Fork 4.4k
Components: refactor ResizableBox
to pass exhaustive-deps
#44370
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
ResizeBox
to pass exhaustive-deps
ResizableBox
to pass exhaustive-deps
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code changes LGTM 🚀
When a "dependency" is only used inside a hook, it's totally reasonable to move the code for that dependency directly inside the hook, rather than adding it to the dependencies list
I just left a couple of comments, but don't consider them blocking — they're more of a suggestion and/or conversation than a strong change request.
b0ba6e4
to
771341c
Compare
Great! Feel free to merge once all CI checks are ✅ |
What?
Updates the
ResizeBox
component to satisfy theexhaustive-deps
eslint ruleWhy?
Part of the effort in #41166 to apply
exhuastive-deps
to the Components packageHow?
debounceUnsetMoveXY
andonResize
were missing dependencies of the theuseResizeLabel
hook. AddingonResize
(a passed in prop) will technically cause the effect to fire every time the hook is called, but that was already happening due to thewidth
andheight
deps (unless we wanted to memoize those).Now that it was a dependency,
debounceUnsetMoveXY
needed its ownuseCallback
. This would, in turn, have neededunsetMoveXY
as a dependency, leading to wrapping that method in yet anotheruseCallback
.Instead, I moved
unsetMoveXY
into the single newly createduseCallback
. Now that we have only one function handling all of theunsetMoveXY
it makes more sense to call that simplyunsetMoveXY
instead ofdebounceUnsetMoveXY
.The end result is a single
unsetMoveXY
method containing its own debounce logic, all wrapped in a singleuseCallback
for the benefit of theuseEffect
's dependency array.The only two dependencies for the new
useCallback
arefadeTimeout
andisAxisControlled
. While we could technically memoizeisAxisControlled
to prevent it triggering theuseCallback
on every render, we'll still havefadeTimeout
which is a prop that likely won't be memoized before it's passed in, so I didn't see a benefit to an extrauseMemo
call.Testing Instructions
npx eslint --rule 'react-hooks/exhaustive-deps: warn' packages/components/src/resizable-box/