Skip to content
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

fix(react): export stable router reference for useIonRouter hook #25000

Merged

Conversation

babycourageous
Copy link
Contributor

@babycourageous babycourageous commented Mar 25, 2022

Wrap router object that is returned in a useMemo to provide stable reference for any dependency arrays it may be supplied to.

This would address and close #24987

Pull request checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Build (npm run build) was run locally and any changes were pushed
  • Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

Putting the router object exported by useIonRouter in dependency array of useEffect causes maximum update depth exceeded due to it being unstable reference.

Issue URL: #24987

What is the new behavior?

Wrap router object returned by useIonRouter in useMemo.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Wrap router object that is returned in a `useMemo` to provide stable reference for any dependency arrays it may be supplied to.

This would address and close ionic-team#24987
@babycourageous babycourageous requested a review from a team as a code owner March 25, 2022 13:42
@github-actions github-actions bot added the package: react @ionic/react package label Mar 25, 2022
@liamdebeasi liamdebeasi requested review from liamdebeasi, averyjohnston and sean-perkins and removed request for a team March 29, 2022 14:02
@piotr-cz
Copy link

cool 👍

My current workaround is to destructure result

const { canGoBack } = useIonRouter()

useEffect(() => {
  // ...
}, [canGoBack])

Copy link
Contributor

@sean-perkins sean-perkins left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apologies for the delay around reviewing this PR. Had one suggested change and a question around the list of properties used.

Also, is there anyway we can write test around this behavior so that this does not regress in the future?

For example, could we re-create the failing test case in the reproduction app and write an E2E test that validates some level of functional behavior (no error, etc.)? I can help with this portion if you are unfamiliar with our testing suite.

packages/react/src/components/IonRouterContext.tsx Outdated Show resolved Hide resolved
@sean-perkins sean-perkins requested a review from a team as a code owner October 24, 2022 18:26
@babycourageous
Copy link
Contributor Author

Thanks @sean-perkins ! I let this slip off the radar. I was having some trouble with my fork so really appreciate you making this commit. Sorry again!

I did notice goBack was missing in the dependency array. That would need to be in there too since it's exported. I can try my fork again or if you wanna make the change.

@sean-perkins
Copy link
Contributor

@babycourageous no worries, thanks for the contribution!

Both back and goBack are mapped to context.back. There is no equivalent context.goBack to add to the dependency array. If the context value of back changes, that should force this hook to recalculate it's value (for both back and goBack), right?

@babycourageous
Copy link
Contributor Author

ah yes - i missed that detail. You're spot on!

@liamdebeasi liamdebeasi merged commit 89e3cd6 into ionic-team:main Nov 18, 2022
@liamdebeasi
Copy link
Contributor

Merged. Thank you very much for the contribution!

@babycourageous
Copy link
Contributor Author

@liamdebeasi You're welcome! Thanks for having me and I hope to keep on contributing!

@crhayes
Copy link

crhayes commented Nov 22, 2022

Just experienced this for the first time yesterday. Nice to see this bug fix!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: react @ionic/react package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug: Ionic React useIonRouter returns unstable reference causing maximum update depth error in useEffect
6 participants