ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

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

Open babycourageous opened this issue 2 years ago • 1 comments

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 https://github.com/ionic-team/ionic-framework/issues/24987

Pull request checklist

Please check if your PR fulfills the following requirements:

  • [ ] Tests for the changes have been added (for bug fixes / features)
  • [x] Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • [x] Build (npm run build) was run locally and any changes were pushed
  • [x] 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:

  • [x] 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: https://github.com/ionic-team/ionic-framework/issues/24987

What is the new behavior?

Wrap router object returned by useIonRouter in useMemo.

Does this introduce a breaking change?

  • [ ] Yes
  • [x] No

Other information

babycourageous avatar Mar 25 '22 13:03 babycourageous

cool 👍

My current workaround is to destructure result

const { canGoBack } = useIonRouter()

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

piotr-cz avatar May 10 '22 14:05 piotr-cz

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.

babycourageous avatar Oct 26 '22 15:10 babycourageous

@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?

sean-perkins avatar Oct 26 '22 15:10 sean-perkins

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

babycourageous avatar Oct 26 '22 17:10 babycourageous

Merged. Thank you very much for the contribution!

liamdebeasi avatar Nov 18 '22 18:11 liamdebeasi

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

babycourageous avatar Nov 18 '22 18:11 babycourageous

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

crhayes avatar Nov 22 '22 16:11 crhayes