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

Replace useCombinedRefs with useRefObjectAsForwardedRef #2204

Merged
merged 4 commits into from
Aug 2, 2022

Conversation

iansan5653
Copy link
Contributor

@iansan5653 iansan5653 commented Aug 1, 2022

The useCombinedRefs hook only has one real use-case: combining forwarded refs with ref objects so that the value of the ref can be accessed with ref.current. Elements can only take one ref, hence we 'combine' the refs into a single ref.

In #2197 I attempted to improve the hook to make it more useful. However, @mattcosta7 noted that we could completely replace this one use case with a useImperativeHandle call, which is absolutely correct. By wrapping that call in a simple hook and replacing useCombinedRefs with the new hook, we reach a number of advantages:

  • It's easier to use (and more importantly, harder to use incorrectly)
  • It's simpler and less bug-prone
  • The intention is more explicit
  • ESLint only recognizes useRef and forwarded refs as refs. By not creating a new ref through a hook, we avoid having to pass ref objects as dependencies to effects & memos

So this PR supersedes #2197, and I feel that it's a major improvement.

Note: I don't think this is a breaking change because this hook is not exported through hooks/index.

Merge checklist

  • [ ] Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

@iansan5653 iansan5653 self-assigned this Aug 1, 2022
@iansan5653 iansan5653 requested a review from a team August 1, 2022 19:02
@changeset-bot
Copy link

changeset-bot bot commented Aug 1, 2022

🦋 Changeset detected

Latest commit: be7528b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

*
* **NOTE**: The `refObject` should be passed to the underlying element, NOT the `forwardedRef`.
*/
export function useRefObjectAsForwardedRef<T>(forwardedRef: ForwardedRef<T>, refObject: RefObject<T>): void {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm open to suggestions for naming this. I think this name works but it could maybe be clearer. Other options I considered include:

  • useForwardedRefObject
  • useForwardedRefAsRefObject
  • useRefObjectAsHandle

@github-actions
Copy link
Contributor

github-actions bot commented Aug 1, 2022

size-limit report 📦

Path Size
dist/browser.esm.js 72.9 KB (-0.04% 🔽)
dist/browser.umd.js 73.28 KB (-0.02% 🔽)

@iansan5653 iansan5653 temporarily deployed to github-pages August 1, 2022 19:13 Inactive
Copy link
Contributor

@colebemis colebemis left a comment

Choose a reason for hiding this comment

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

Clean ✨ I like it!

@iansan5653 iansan5653 enabled auto-merge (squash) August 2, 2022 17:46
@iansan5653 iansan5653 temporarily deployed to github-pages August 2, 2022 18:14 Inactive
@iansan5653 iansan5653 temporarily deployed to github-pages August 2, 2022 18:31 Inactive
@iansan5653 iansan5653 merged commit 522f580 into main Aug 2, 2022
@iansan5653 iansan5653 deleted the replace-use-combined-refs branch August 2, 2022 18:32
@primer-css primer-css mentioned this pull request Aug 3, 2022
siddharthkp added a commit that referenced this pull request Aug 16, 2022
@siddharthkp siddharthkp mentioned this pull request Aug 16, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants