Components: refactor NavigationItem to pass exhaustive-deps
#41639
Conversation
This file contains 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
chad1008
added
[Type] Code Quality
44 tasks
chad1008
force-pushed
the
enhance/NavigationItem-exhuastive-deps
branch
from
66be9aa
to
47f5650
Compare
|
Size Change: 0 B Total Size: 1.25 MB ℹ️ View Unchanged
|
chad1008
force-pushed
the
enhance/NavigationItem-exhuastive-deps
branch
from
47f5650
to
ad95e3b
Compare
mirka
reviewed
Jun 24, 2022
|
|
||
| export const useNavigationTreeNodes = () => { | ||
| const [ nodes, setNodes ] = useState( {} ); | ||
|
|
||
| const getNode = ( key ) => nodes[ key ]; | ||
|
|
||
| const addNode = ( key, value ) => { | ||
| const addNode = useCallback( ( key, value ) => { |
There was a problem hiding this comment.
Hmm, I feel the same way I felt about the useCallbacks in #41749 (comment), where it moves the responsibility away from the module that should be responsible for preventing breakage, which is useNavigationTreeItem itself. These Navigation modules look pretty complex, and it would be hard to know that referential stability in useNavigationTreeNodes could subtly break a useEffect somewhere far from it.
Comment on lines
37
to
46
| }, [ | ||
| activeMenu, | ||
| search, | ||
| addItem, | ||
| removeItem, | ||
| props, | ||
| group, | ||
| itemId, | ||
| menu, | ||
| ] ); |
There was a problem hiding this comment.
Unfortunately there weren't any unit tests for this, but I noticed that search mode is now broken. (Not that trunk is in great shape — the input field CSS is somehow borked 😅 But the functionality is there.)
Given that Navigation is kind of deprecated in favor of Navigator (if I understood correctly), I think it would be fine to stuff everything else in a ref object or eslint-disable this one if it gets gnarly. Unless we're going to do a deep clean rewrite of this chunk of code, I think it might actually be useful to retain some indication of the original author's intent (i.e. only fire the effect when activeMenu or search changes).
There was a problem hiding this comment.
Unfortunately there weren't any unit tests for this, but I noticed that search mode is now broken. (Not that trunk is in great shape — the input field CSS is somehow borked 😅 But the functionality is there.)
I see the CSS issues for sure, depending on the fate of Navigation, might be worth a follow up PR. Are there other/new issues in Search that I missed? Or just that special input CSS? 😆
For the rest - that all makes sense, thanks for pointing out where the responsibility should lie. For now, I'll update this PR to disable the rule for this particular component, linking back here for context if it's ever needed in the future!
There was a problem hiding this comment.
Are there other/new issues in Search that I missed?
The only two that I noticed was the infinite update loop that was happening pre-revert (b2a0fc7), and the CSS issue (pre-existing).
There was a problem hiding this comment.
Gotcha, thank you!
chad1008
force-pushed
the
enhance/NavigationItem-exhuastive-deps
branch
from
8590f54
to
798f3fe
Compare
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
NavigationItemcomponent ignore theexhaustive-depseslint rule for now.Navigationlooks like it might need a deeper dive refactor to easily satisfyexhuastive-deps, and we may actually prefer usingNavigatorinstead. For now, we'll disable warnings for this component, and can revisit the eslint rule if/when this component gets more attention in the future.Why?
Part of the effort in #41166 to apply
exhuastive-depsto the Components packageHow?
TheuseEffectinuseNavigationTreeItem.jswas missing most of its dependencies. Most (props,group,itemId, andmenu) were addable without introducing unexpected behavior.addItemandremoveItemhowever were being redeclared on each render before being read from context. Wrapping each inuseCallbackallows for more stable references, preventing additional re-renders.Testing Instructions
npx eslint --rule 'react-hooks/exhaustive-deps: warn' packages/components/src/navigation/itemnavigationunit tests still passNavigationcomponent stories and/or docs still work as expected