Components: refactor ResizableBox to pass exhaustive-deps#44370
Merged
Components: refactor ResizableBox to pass exhaustive-deps#44370
ResizableBox to pass exhaustive-deps#44370Conversation
44 tasks
ResizeBox to pass exhaustive-depsResizableBox to pass exhaustive-deps
ciampo
approved these changes
Sep 23, 2022
Contributor
ciampo
left a comment
There was a problem hiding this comment.
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.
ciampo
reviewed
Sep 23, 2022
b0ba6e4 to
771341c
Compare
Contributor
|
Great! Feel free to merge once all CI checks are ✅ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Updates the
ResizeBoxcomponent to satisfy theexhaustive-depseslint ruleWhy?
Part of the effort in #41166 to apply
exhuastive-depsto the Components packageHow?
debounceUnsetMoveXYandonResizewere missing dependencies of the theuseResizeLabelhook. 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 thewidthandheightdeps (unless we wanted to memoize those).Now that it was a dependency,
debounceUnsetMoveXYneeded its ownuseCallback. This would, in turn, have neededunsetMoveXYas a dependency, leading to wrapping that method in yet anotheruseCallback.Instead, I moved
unsetMoveXYinto the single newly createduseCallback. Now that we have only one function handling all of theunsetMoveXYit makes more sense to call that simplyunsetMoveXYinstead ofdebounceUnsetMoveXY.The end result is a single
unsetMoveXYmethod containing its own debounce logic, all wrapped in a singleuseCallbackfor the benefit of theuseEffect's dependency array.The only two dependencies for the new
useCallbackarefadeTimeoutandisAxisControlled. While we could technically memoizeisAxisControlledto prevent it triggering theuseCallbackon every render, we'll still havefadeTimeoutwhich is a prop that likely won't be memoized before it's passed in, so I didn't see a benefit to an extrauseMemocall.Testing Instructions
npx eslint --rule 'react-hooks/exhaustive-deps: warn' packages/components/src/resizable-box/