Components: refactor NavigatorScreen to pass exhaustive-deps#43876
Components: refactor NavigatorScreen to pass exhaustive-deps#43876
NavigatorScreen to pass exhaustive-deps#43876Conversation
There was a problem hiding this comment.
- ✅ Code changes make sense
- ✅ Unit tests are passing
- ✅ Storybook example behaves as expected
- ✅ Global Styles sidebar in the Site editor works as expected
This does cause some additional renders on navigation between screens, but they don't appear problematic in my tests.
Does it cause more component re-renders, or just that useEffect to run more often?
Also, I wonder if we should add an if statement around elementToFocus.focus(); and make sure that we only focus if document.activeElement !== elementToFocus ?
Good point. I was conflating the two. Upon closer inspection, before this change there were four re-renders and two
Makes sense! No need to I'll put a followup PR together 👍 |
What?
Updates the
NavigatorScreencomponent pass theexhaustive-depseslint rule.Why?
Part of the effort in #41166 to apply
exhuastive-depsto the Components packageHow?
Adding
location.isBackandpreviousLocation?.focusTargetSelectorto theuseEffectdeps array.This does cause some additional renders on navigation between screens, but they don't appear problematic in my tests. I think they're happening because each time you navigate the
locationHistory changes. This triggers an update to thegoToandgoBackvalues that are being drawn from context. This, in turn, causes an update to the context value as a whole (goToandgoBackboth appear in theuseMemodep array fornavigatorContextValue). Updating thenavigatorContextValuemeans that even if it didn't change on this particular render, alllocationvalues are being redeclared, which will trigger a re-render thanks to our new dependencies.All of that said, I know
Navigatoris your brainchild @ciampo so please let me know if that logic sounds flawed! 🙂Testing Instructions
npx eslint --rule 'react-hooks/exhaustive-deps: warn' packages/components/src/navigatior/navigator-screennavigatorunit tests still passNavigatorcomponent stories and/or docs still work as expected