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

Try: useMergeRefs #27768

Open
wants to merge 8 commits into
base: master
from
Open

Try: useMergeRefs #27768

wants to merge 8 commits into from

Conversation

@ellatrix
Copy link
Member

@ellatrix ellatrix commented Dec 16, 2020

Description

See #27675 (comment).

This useMergeRefs hook would allow you to merge refs even if any if any ref callbacks have dependencies. The trick is to have the wrapping ref called as many times as all the dependencies combined, but to check for each ref individually if it wants to be called, that is, when the value of the ref changed or when the ref callback itself changed.

The problem with the external mergeRefs function is that is calls all merged callbacks on every render and doesn't respect refs wrapped in useCallback.

How has this been tested?

Screenshots

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.
@ellatrix ellatrix force-pushed the try/use-merge-refs branch from 9c24593 to 457db3a Dec 16, 2020
@github-actions
Copy link

@github-actions github-actions bot commented Dec 16, 2020

Size Change: +219 B (0%)

Total Size: 1.28 MB

Filename Size Change
build/a11y/index.js 1.14 kB -1 B
build/annotations/index.js 3.81 kB +2 B (0%)
build/api-fetch/index.js 3.42 kB -2 B (0%)
build/autop/index.js 2.83 kB -1 B
build/block-directory/index.js 8.71 kB -10 B (0%)
build/block-editor/index.js 129 kB +230 B (0%)
build/block-library/index.js 150 kB +14 B (0%)
build/block-serialization-default-parser/index.js 1.88 kB +2 B (0%)
build/blocks/index.js 48.1 kB -31 B (0%)
build/components/index.js 171 kB -40 B (0%)
build/compose/index.js 10.8 kB -114 B (1%)
build/core-data/index.js 15.4 kB +1 B
build/data-controls/index.js 829 B +2 B (0%)
build/data/index.js 8.99 kB +10 B (0%)
build/date/index.js 31.8 kB -3 B (0%)
build/edit-navigation/index.js 11.1 kB -5 B (0%)
build/edit-post/index.js 306 kB +142 B (0%)
build/edit-site/index.js 24.4 kB +2 B (0%)
build/edit-widgets/index.js 26.3 kB +15 B (0%)
build/editor/index.js 43.3 kB +12 B (0%)
build/element/index.js 4.63 kB -3 B (0%)
build/hooks/index.js 2.27 kB -2 B (0%)
build/html-entities/index.js 623 B +1 B
build/i18n/index.js 3.57 kB -1 B
build/keyboard-shortcuts/index.js 2.54 kB -1 B
build/media-utils/index.js 5.32 kB -1 B
build/notices/index.js 1.86 kB -1 B
build/nux/index.js 3.42 kB -2 B (0%)
build/plugins/index.js 2.54 kB -2 B (0%)
build/primitives/index.js 1.43 kB +1 B
build/priority-queue/index.js 790 B +1 B
build/reusable-blocks/index.js 2.92 kB -4 B (0%)
build/rich-text/index.js 13.4 kB +2 B (0%)
build/server-side-render/index.js 2.77 kB +5 B (0%)
build/shortcode/index.js 1.7 kB -1 B
build/token-list/index.js 1.27 kB -1 B
build/url/index.js 2.84 kB +5 B (0%)
build/viewport/index.js 1.86 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/blob/index.js 665 B 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/style-rtl.css 11.2 kB 0 B
build/block-editor/style.css 11.2 kB 0 B
build/block-library/blocks/archives/editor-rtl.css 120 B 0 B
build/block-library/blocks/archives/editor.css 119 B 0 B
build/block-library/blocks/audio/editor-rtl.css 118 B 0 B
build/block-library/blocks/audio/editor.css 118 B 0 B
build/block-library/blocks/audio/style-rtl.css 152 B 0 B
build/block-library/blocks/audio/style.css 152 B 0 B
build/block-library/blocks/block/editor-rtl.css 211 B 0 B
build/block-library/blocks/block/editor.css 211 B 0 B
build/block-library/blocks/button/editor-rtl.css 513 B 0 B
build/block-library/blocks/button/editor.css 513 B 0 B
build/block-library/blocks/button/style-rtl.css 488 B 0 B
build/block-library/blocks/button/style.css 488 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 275 B 0 B
build/block-library/blocks/buttons/editor.css 275 B 0 B
build/block-library/blocks/buttons/style-rtl.css 346 B 0 B
build/block-library/blocks/buttons/style.css 346 B 0 B
build/block-library/blocks/calendar/style-rtl.css 249 B 0 B
build/block-library/blocks/calendar/style.css 249 B 0 B
build/block-library/blocks/categories/editor-rtl.css 135 B 0 B
build/block-library/blocks/categories/editor.css 135 B 0 B
build/block-library/blocks/categories/style-rtl.css 132 B 0 B
build/block-library/blocks/categories/style.css 132 B 0 B
build/block-library/blocks/code/style-rtl.css 152 B 0 B
build/block-library/blocks/code/style.css 152 B 0 B
build/block-library/blocks/columns/editor-rtl.css 239 B 0 B
build/block-library/blocks/columns/editor.css 239 B 0 B
build/block-library/blocks/columns/style-rtl.css 467 B 0 B
build/block-library/blocks/columns/style.css 466 B 0 B
build/block-library/blocks/cover/editor-rtl.css 440 B 0 B
build/block-library/blocks/cover/editor.css 438 B 0 B
build/block-library/blocks/cover/style-rtl.css 1.27 kB 0 B
build/block-library/blocks/cover/style.css 1.27 kB 0 B
build/block-library/blocks/embed/editor-rtl.css 529 B 0 B
build/block-library/blocks/embed/editor.css 529 B 0 B
build/block-library/blocks/embed/style-rtl.css 419 B 0 B
build/block-library/blocks/embed/style.css 419 B 0 B
build/block-library/blocks/file/editor-rtl.css 246 B 0 B
build/block-library/blocks/file/editor.css 245 B 0 B
build/block-library/blocks/file/style-rtl.css 288 B 0 B
build/block-library/blocks/file/style.css 289 B 0 B
build/block-library/blocks/freeform/editor-rtl.css 2.49 kB 0 B
build/block-library/blocks/freeform/editor.css 2.49 kB 0 B
build/block-library/blocks/gallery/editor-rtl.css 692 B 0 B
build/block-library/blocks/gallery/editor.css 693 B 0 B
build/block-library/blocks/gallery/style-rtl.css 1.11 kB 0 B
build/block-library/blocks/gallery/style.css 1.11 kB 0 B
build/block-library/blocks/group/editor-rtl.css 364 B 0 B
build/block-library/blocks/group/editor.css 364 B 0 B
build/block-library/blocks/group/style-rtl.css 117 B 0 B
build/block-library/blocks/group/style.css 117 B 0 B
build/block-library/blocks/heading/editor-rtl.css 174 B 0 B
build/block-library/blocks/heading/editor.css 174 B 0 B
build/block-library/blocks/heading/style-rtl.css 137 B 0 B
build/block-library/blocks/heading/style.css 137 B 0 B
build/block-library/blocks/html/editor-rtl.css 324 B 0 B
build/block-library/blocks/html/editor.css 325 B 0 B
build/block-library/blocks/image/editor-rtl.css 738 B 0 B
build/block-library/blocks/image/editor.css 737 B 0 B
build/block-library/blocks/image/style-rtl.css 510 B 0 B
build/block-library/blocks/image/style.css 511 B 0 B
build/block-library/blocks/latest-comments/editor-rtl.css 201 B 0 B
build/block-library/blocks/latest-comments/editor.css 200 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 315 B 0 B
build/block-library/blocks/latest-comments/style.css 315 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 183 B 0 B
build/block-library/blocks/latest-posts/editor.css 183 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 568 B 0 B
build/block-library/blocks/latest-posts/style.css 567 B 0 B
build/block-library/blocks/list/editor-rtl.css 129 B 0 B
build/block-library/blocks/list/editor.css 129 B 0 B
build/block-library/blocks/list/style-rtl.css 127 B 0 B
build/block-library/blocks/list/style.css 127 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 240 B 0 B
build/block-library/blocks/media-text/editor.css 240 B 0 B
build/block-library/blocks/media-text/style-rtl.css 579 B 0 B
build/block-library/blocks/media-text/style.css 577 B 0 B
build/block-library/blocks/more/editor-rtl.css 479 B 0 B
build/block-library/blocks/more/editor.css 479 B 0 B
build/block-library/blocks/navigation-link/editor-rtl.css 438 B 0 B
build/block-library/blocks/navigation-link/editor.css 440 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 747 B 0 B
build/block-library/blocks/navigation-link/style.css 745 B 0 B
build/block-library/blocks/navigation/editor-rtl.css 1.31 kB 0 B
build/block-library/blocks/navigation/editor.css 1.31 kB 0 B
build/block-library/blocks/navigation/style-rtl.css 222 B 0 B
build/block-library/blocks/navigation/style.css 222 B 0 B
build/block-library/blocks/nextpage/editor-rtl.css 440 B 0 B
build/block-library/blocks/nextpage/editor.css 440 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 161 B 0 B
build/block-library/blocks/paragraph/editor.css 161 B 0 B
build/block-library/blocks/paragraph/style-rtl.css 279 B 0 B
build/block-library/blocks/paragraph/style.css 279 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 255 B 0 B
build/block-library/blocks/post-author/editor.css 255 B 0 B
build/block-library/blocks/post-author/style-rtl.css 229 B 0 B
build/block-library/blocks/post-author/style.css 230 B 0 B
build/block-library/blocks/post-comments-form/style-rtl.css 293 B 0 B
build/block-library/blocks/post-comments-form/style.css 293 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 187 B 0 B
build/block-library/blocks/post-content/editor.css 187 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 134 B 0 B
build/block-library/blocks/post-excerpt/editor.css 134 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 387 B 0 B
build/block-library/blocks/post-featured-image/editor.css 386 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 149 B 0 B
build/block-library/blocks/post-featured-image/style.css 149 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 119 B 0 B
build/block-library/blocks/preformatted/style.css 119 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 231 B 0 B
build/block-library/blocks/pullquote/editor.css 231 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 359 B 0 B
build/block-library/blocks/pullquote/style.css 359 B 0 B
build/block-library/blocks/query-loop/editor-rtl.css 142 B 0 B
build/block-library/blocks/query-loop/editor.css 141 B 0 B
build/block-library/blocks/query-loop/style-rtl.css 361 B 0 B
build/block-library/blocks/query-loop/style.css 363 B 0 B
build/block-library/blocks/query/editor-rtl.css 210 B 0 B
build/block-library/blocks/query/editor.css 210 B 0 B
build/block-library/blocks/quote/editor-rtl.css 121 B 0 B
build/block-library/blocks/quote/editor.css 121 B 0 B
build/block-library/blocks/quote/style-rtl.css 215 B 0 B
build/block-library/blocks/quote/style.css 214 B 0 B
build/block-library/blocks/rss/editor-rtl.css 270 B 0 B
build/block-library/blocks/rss/editor.css 270 B 0 B
build/block-library/blocks/rss/style-rtl.css 314 B 0 B
build/block-library/blocks/rss/style.css 313 B 0 B
build/block-library/blocks/search/editor-rtl.css 213 B 0 B
build/block-library/blocks/search/editor.css 213 B 0 B
build/block-library/blocks/search/style-rtl.css 384 B 0 B
build/block-library/blocks/search/style.css 386 B 0 B
build/block-library/blocks/separator/editor-rtl.css 151 B 0 B
build/block-library/blocks/separator/editor.css 151 B 0 B
build/block-library/blocks/separator/style-rtl.css 281 B 0 B
build/block-library/blocks/separator/style.css 281 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 547 B 0 B
build/block-library/blocks/shortcode/editor.css 547 B 0 B
build/block-library/blocks/site-logo/editor-rtl.css 251 B 0 B
build/block-library/blocks/site-logo/editor.css 251 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 166 B 0 B
build/block-library/blocks/site-logo/style.css 166 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 211 B 0 B
build/block-library/blocks/social-link/editor.css 211 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 749 B 0 B
build/block-library/blocks/social-links/editor.css 749 B 0 B
build/block-library/blocks/social-links/style-rtl.css 1.37 kB 0 B
build/block-library/blocks/social-links/style.css 1.37 kB 0 B
build/block-library/blocks/spacer/editor-rtl.css 321 B 0 B
build/block-library/blocks/spacer/editor.css 321 B 0 B
build/block-library/blocks/spacer/style-rtl.css 107 B 0 B
build/block-library/blocks/spacer/style.css 107 B 0 B
build/block-library/blocks/subhead/editor-rtl.css 148 B 0 B
build/block-library/blocks/subhead/editor.css 148 B 0 B
build/block-library/blocks/subhead/style-rtl.css 134 B 0 B
build/block-library/blocks/subhead/style.css 134 B 0 B
build/block-library/blocks/table/editor-rtl.css 530 B 0 B
build/block-library/blocks/table/editor.css 530 B 0 B
build/block-library/blocks/table/style-rtl.css 433 B 0 B
build/block-library/blocks/table/style.css 433 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 162 B 0 B
build/block-library/blocks/tag-cloud/editor.css 162 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 145 B 0 B
build/block-library/blocks/tag-cloud/style.css 145 B 0 B
build/block-library/blocks/template-part/editor-rtl.css 644 B 0 B
build/block-library/blocks/template-part/editor.css 645 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 146 B 0 B
build/block-library/blocks/text-columns/editor.css 146 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 209 B 0 B
build/block-library/blocks/text-columns/style.css 209 B 0 B
build/block-library/blocks/verse/editor-rtl.css 118 B 0 B
build/block-library/blocks/verse/editor.css 118 B 0 B
build/block-library/blocks/verse/style-rtl.css 137 B 0 B
build/block-library/blocks/verse/style.css 137 B 0 B
build/block-library/blocks/video/editor-rtl.css 547 B 0 B
build/block-library/blocks/video/editor.css 548 B 0 B
build/block-library/blocks/video/style-rtl.css 241 B 0 B
build/block-library/blocks/video/style.css 241 B 0 B
build/block-library/common-rtl.css 940 B 0 B
build/block-library/common.css 937 B 0 B
build/block-library/editor-rtl.css 9.08 kB 0 B
build/block-library/editor.css 9.08 kB 0 B
build/block-library/style-rtl.css 8.48 kB 0 B
build/block-library/style.css 8.48 kB 0 B
build/block-library/theme-rtl.css 789 B 0 B
build/block-library/theme.css 790 B 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/components/style-rtl.css 15.4 kB 0 B
build/components/style.css 15.4 kB 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.95 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/style-rtl.css 6.47 kB 0 B
build/edit-post/style.css 6.45 kB 0 B
build/edit-site/style-rtl.css 3.91 kB 0 B
build/edit-site/style.css 3.91 kB 0 B
build/edit-widgets/style-rtl.css 3.1 kB 0 B
build/edit-widgets/style.css 3.1 kB 0 B
build/editor/editor-styles-rtl.css 476 B 0 B
build/editor/editor-styles.css 478 B 0 B
build/editor/style-rtl.css 3.84 kB 0 B
build/editor/style.css 3.84 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.73 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/is-shallow-equal/index.js 698 B 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.1 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

// - The value changes.
// - The ref callback has changed (e.g. an updated dependency).
if (
value !== lastValue.current ||

This comment has been minimized.

@youknowriad

youknowriad Dec 16, 2020
Contributor

I believe comparing to the previous value is not useful because if one of the ref changes, React will first call the old function with "null" and then call the new function with the new node which mean this check is always true which also means that the implementation here is equivalent to useCallback( merge(refs), refs ) and in both situations we can't have a callback with dependencies as ref because if it changes, all the other merged refs, even the ones that didn't change,w ill be called again (creating memory leaks or unexpected behavior)

This comment has been minimized.

@ellatrix

ellatrix Dec 16, 2020
Author Member

all the other merged refs, even the ones that didn't change,w ill be called again

No, they won't be called since we check if the callback has been changed. Only if it's changed we call it, and we leave any others that remain the same alone. The value check is there to ensure that, even if the callback didn't change, the ref callback is still called.

This comment has been minimized.

@ellatrix

ellatrix Dec 16, 2020
Author Member

Added clearer documentation in ece1982. I tested ref callbacks with and without dependencies and they both work as expected. If a dependency changes, old callback is called with null, the new with the node. If no dependency changes, the callback is never called, even if other ref callback dependencies change.

This comment has been minimized.

@ellatrix

ellatrix Dec 16, 2020
Author Member

I'll try to add some test cases tomorrow.

This comment has been minimized.

@youknowriad

youknowriad Dec 16, 2020
Contributor

Here's the failing test case:

const ref1 = useCallback( dosomething, [dep1]);
const ref2 = useCallback( dosomething2, [] );
const ref = useMergeRef( [ ref1, ref2 ] );

if the node doesn't change and dep1 change, dosomething2 will be called again while it shouldn't be. (I didn't test but that's my read of the code) Let's add this unit test and see.

This comment has been minimized.

@ellatrix

ellatrix Dec 16, 2020
Author Member

You're right, it's calling the wrong callback. Changed the code and started adding tests, but it's still a work in progress.

ellatrix added 4 commits Dec 16, 2020
wip
@ellatrix
Copy link
Member Author

@ellatrix ellatrix commented Dec 17, 2020

@youknowriad I think I figured it out now. The new approach seems to work well in tests.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants
You can’t perform that action at this time.