Skip to content

useMergeRefs custom hook#36024

Merged
dmanek merged 6 commits intomainfrom
merge-refs-hook
Sep 10, 2021
Merged

useMergeRefs custom hook#36024
dmanek merged 6 commits intomainfrom
merge-refs-hook

Conversation

@dmanek
Copy link
Copy Markdown
Contributor

@dmanek dmanek commented Sep 10, 2021

Carrying over from #35835 (comment)

* @param {any} refTwo
* @return {function()}
*/
export function useMergeRefs(refOne, refTwo) {
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Through https://github.com/theKashey/use-callback-ref#usemergerefs I came across react-hooks.org. This is inspired from their useForkRef implementation. Tradeoff is it only combines 2 refs, but for now it does what is required.

* Combines multiple refs to pass into `ref` prop.
* @param {...any} refs
* @return {function(!Element)}
* @param {any} ref
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

The any isn't valid closure 😢 . Should be *

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Updated type to {current: ?}|function()

* @return {function()}
*/
export function useMergeRefs(refOne, refTwo) {
return useMemo(() => {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Why would a ref be null?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Removed.

return null;
}
};
return (element) => {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

nit: Seems even easier to take an array

export function useMergeRefs(refs) {
  return useCallback(
    (element) => refs.forEach((ref) => setRef(ref, element)),
    refs
  );
}

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Updated, except used a native for loop since @jridgewell is not a fan of forEach 🙂

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

you learn fast 😆

* @return {function()}
*/
export function useMergeRefs(refOne, refTwo) {
return useMemo(() => {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I think useCallback is slightly better sugar for this situation

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Done.

@dmanek dmanek requested a review from samouri September 10, 2021 18:20
@dmanek dmanek merged commit ee14618 into main Sep 10, 2021
rbeckthomas pushed a commit to rbeckthomas/amphtml that referenced this pull request Sep 14, 2021
caroqliu pushed a commit to caroqliu/amphtml that referenced this pull request Sep 16, 2021
@rsimha rsimha deleted the merge-refs-hook branch October 19, 2021 17:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants