Try: useMergeRefs #27768
Try: useMergeRefs #27768
Conversation
Size Change: +219 B (0%) Total Size: 1.28 MB
|
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 |
// - The value changes. | ||
// - The ref callback has changed (e.g. an updated dependency). | ||
if ( | ||
value !== lastValue.current || |
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)
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)
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.
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.
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.
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.
ellatrix
Dec 16, 2020
Author
Member
I'll try to add some test cases tomorrow.
I'll try to add some test cases tomorrow.
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.
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.
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.
You're right, it's calling the wrong callback. Changed the code and started adding tests, but it's still a work in progress.
@youknowriad I think I figured it out now. The new approach seems to work well in tests. |
ellatrix commentedDec 16, 2020
•
edited
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 inuseCallback
.How has this been tested?
Screenshots
Types of changes
Checklist: