components: Add useLatestRef hook #33137

sarayourfriend · 2021-07-01T14:19:57Z

Description

I'll be honest, I have no idea how to use this or what it does exactly, or what value it brings us. The examples in the JSDoc are not at all helpful to me. If anyone has any suggestions for how to test this thing please let me know (it's used by TextInput so we need to add it one way or another).

How has this been tested?

I added a unit test, but it honestly just demonstrates the existing behavior. I have no idea what else to test.

Types of changes

New feature.

Checklist:

My code is tested.
My code follows the WordPress code style.
[N/A] My code follows the accessibility standards.
[N/A] I've tested my changes with keyboard and screen readers.
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 (please manually search all *.native.js files for terms that need renaming or removal).

github-actions · 2021-07-01T14:26:57Z

Size Change: 0 B

Total Size: 1.07 MB

ℹ️ View Unchanged

Filename	Size
`build/a11y/index.min.js`	1.12 kB
`build/admin-manifest/index.min.js`	1.41 kB
`build/annotations/index.min.js`	2.93 kB
`build/api-fetch/index.min.js`	2.44 kB
`build/autop/index.min.js`	2.28 kB
`build/blob/index.min.js`	673 B
`build/block-directory/index.min.js`	6.61 kB
`build/block-directory/style-rtl.css`	1.02 kB
`build/block-directory/style.css`	1.02 kB
`build/block-editor/index.min.js`	126 kB
`build/block-editor/style-rtl.css`	14 kB
`build/block-editor/style.css`	13.9 kB
`build/block-library/blocks/archives/editor-rtl.css`	61 B
`build/block-library/blocks/archives/editor.css`	60 B
`build/block-library/blocks/archives/style-rtl.css`	65 B
`build/block-library/blocks/archives/style.css`	65 B
`build/block-library/blocks/audio/editor-rtl.css`	58 B
`build/block-library/blocks/audio/editor.css`	58 B
`build/block-library/blocks/audio/style-rtl.css`	112 B
`build/block-library/blocks/audio/style.css`	112 B
`build/block-library/blocks/audio/theme-rtl.css`	125 B
`build/block-library/blocks/audio/theme.css`	125 B
`build/block-library/blocks/block/editor-rtl.css`	161 B
`build/block-library/blocks/block/editor.css`	161 B
`build/block-library/blocks/button/editor-rtl.css`	475 B
`build/block-library/blocks/button/editor.css`	474 B
`build/block-library/blocks/button/style-rtl.css`	603 B
`build/block-library/blocks/button/style.css`	602 B
`build/block-library/blocks/buttons/editor-rtl.css`	315 B
`build/block-library/blocks/buttons/editor.css`	315 B
`build/block-library/blocks/buttons/style-rtl.css`	375 B
`build/block-library/blocks/buttons/style.css`	375 B
`build/block-library/blocks/calendar/style-rtl.css`	208 B
`build/block-library/blocks/calendar/style.css`	208 B
`build/block-library/blocks/categories/editor-rtl.css`	84 B
`build/block-library/blocks/categories/editor.css`	83 B
`build/block-library/blocks/categories/style-rtl.css`	79 B
`build/block-library/blocks/categories/style.css`	79 B
`build/block-library/blocks/code/style-rtl.css`	90 B
`build/block-library/blocks/code/style.css`	90 B
`build/block-library/blocks/code/theme-rtl.css`	131 B
`build/block-library/blocks/code/theme.css`	131 B
`build/block-library/blocks/columns/editor-rtl.css`	190 B
`build/block-library/blocks/columns/editor.css`	190 B
`build/block-library/blocks/columns/style-rtl.css`	475 B
`build/block-library/blocks/columns/style.css`	476 B
`build/block-library/blocks/cover/editor-rtl.css`	670 B
`build/block-library/blocks/cover/editor.css`	670 B
`build/block-library/blocks/cover/style-rtl.css`	1.22 kB
`build/block-library/blocks/cover/style.css`	1.23 kB
`build/block-library/blocks/embed/editor-rtl.css`	486 B
`build/block-library/blocks/embed/editor.css`	486 B
`build/block-library/blocks/embed/style-rtl.css`	401 B
`build/block-library/blocks/embed/style.css`	400 B
`build/block-library/blocks/embed/theme-rtl.css`	124 B
`build/block-library/blocks/embed/theme.css`	124 B
`build/block-library/blocks/file/editor-rtl.css`	301 B
`build/block-library/blocks/file/editor.css`	300 B
`build/block-library/blocks/file/style-rtl.css`	255 B
`build/block-library/blocks/file/style.css`	255 B
`build/block-library/blocks/file/view.min.js`	780 B
`build/block-library/blocks/freeform/editor-rtl.css`	2.44 kB
`build/block-library/blocks/freeform/editor.css`	2.44 kB
`build/block-library/blocks/gallery/editor-rtl.css`	704 B
`build/block-library/blocks/gallery/editor.css`	705 B
`build/block-library/blocks/gallery/style-rtl.css`	1.06 kB
`build/block-library/blocks/gallery/style.css`	1.06 kB
`build/block-library/blocks/gallery/theme-rtl.css`	122 B
`build/block-library/blocks/gallery/theme.css`	122 B
`build/block-library/blocks/group/editor-rtl.css`	160 B
`build/block-library/blocks/group/editor.css`	160 B
`build/block-library/blocks/group/style-rtl.css`	57 B
`build/block-library/blocks/group/style.css`	57 B
`build/block-library/blocks/group/theme-rtl.css`	93 B
`build/block-library/blocks/group/theme.css`	93 B
`build/block-library/blocks/heading/editor-rtl.css`	152 B
`build/block-library/blocks/heading/editor.css`	152 B
`build/block-library/blocks/heading/style-rtl.css`	76 B
`build/block-library/blocks/heading/style.css`	76 B
`build/block-library/blocks/home-link/style-rtl.css`	259 B
`build/block-library/blocks/home-link/style.css`	259 B
`build/block-library/blocks/html/editor-rtl.css`	281 B
`build/block-library/blocks/html/editor.css`	281 B
`build/block-library/blocks/image/editor-rtl.css`	729 B
`build/block-library/blocks/image/editor.css`	727 B
`build/block-library/blocks/image/style-rtl.css`	481 B
`build/block-library/blocks/image/style.css`	485 B
`build/block-library/blocks/image/theme-rtl.css`	124 B
`build/block-library/blocks/image/theme.css`	124 B
`build/block-library/blocks/latest-comments/style-rtl.css`	286 B
`build/block-library/blocks/latest-comments/style.css`	286 B
`build/block-library/blocks/latest-posts/editor-rtl.css`	137 B
`build/block-library/blocks/latest-posts/editor.css`	137 B
`build/block-library/blocks/latest-posts/style-rtl.css`	526 B
`build/block-library/blocks/latest-posts/style.css`	524 B
`build/block-library/blocks/list/style-rtl.css`	63 B
`build/block-library/blocks/list/style.css`	63 B
`build/block-library/blocks/media-text/editor-rtl.css`	263 B
`build/block-library/blocks/media-text/editor.css`	264 B
`build/block-library/blocks/media-text/style-rtl.css`	492 B
`build/block-library/blocks/media-text/style.css`	489 B
`build/block-library/blocks/more/editor-rtl.css`	434 B
`build/block-library/blocks/more/editor.css`	434 B
`build/block-library/blocks/navigation-link/editor-rtl.css`	474 B
`build/block-library/blocks/navigation-link/editor.css`	473 B
`build/block-library/blocks/navigation-link/style-rtl.css`	94 B
`build/block-library/blocks/navigation-link/style.css`	94 B
`build/block-library/blocks/navigation/editor-rtl.css`	1.69 kB
`build/block-library/blocks/navigation/editor.css`	1.69 kB
`build/block-library/blocks/navigation/style-rtl.css`	1.65 kB
`build/block-library/blocks/navigation/style.css`	1.65 kB
`build/block-library/blocks/navigation/view.min.js`	2.87 kB
`build/block-library/blocks/nextpage/editor-rtl.css`	395 B
`build/block-library/blocks/nextpage/editor.css`	395 B
`build/block-library/blocks/page-list/editor-rtl.css`	310 B
`build/block-library/blocks/page-list/editor.css`	311 B
`build/block-library/blocks/page-list/style-rtl.css`	240 B
`build/block-library/blocks/page-list/style.css`	240 B
`build/block-library/blocks/paragraph/editor-rtl.css`	157 B
`build/block-library/blocks/paragraph/editor.css`	157 B
`build/block-library/blocks/paragraph/style-rtl.css`	247 B
`build/block-library/blocks/paragraph/style.css`	248 B
`build/block-library/blocks/post-author/editor-rtl.css`	209 B
`build/block-library/blocks/post-author/editor.css`	209 B
`build/block-library/blocks/post-author/style-rtl.css`	183 B
`build/block-library/blocks/post-author/style.css`	184 B
`build/block-library/blocks/post-comments-form/style-rtl.css`	140 B
`build/block-library/blocks/post-comments-form/style.css`	140 B
`build/block-library/blocks/post-comments/style-rtl.css`	360 B
`build/block-library/blocks/post-comments/style.css`	359 B
`build/block-library/blocks/post-content/editor-rtl.css`	139 B
`build/block-library/blocks/post-content/editor.css`	139 B
`build/block-library/blocks/post-excerpt/editor-rtl.css`	73 B
`build/block-library/blocks/post-excerpt/editor.css`	73 B
`build/block-library/blocks/post-excerpt/style-rtl.css`	69 B
`build/block-library/blocks/post-excerpt/style.css`	69 B
`build/block-library/blocks/post-featured-image/editor-rtl.css`	338 B
`build/block-library/blocks/post-featured-image/editor.css`	338 B
`build/block-library/blocks/post-featured-image/style-rtl.css`	141 B
`build/block-library/blocks/post-featured-image/style.css`	141 B
`build/block-library/blocks/post-template/editor-rtl.css`	100 B
`build/block-library/blocks/post-template/editor.css`	99 B
`build/block-library/blocks/post-template/style-rtl.css`	379 B
`build/block-library/blocks/post-template/style.css`	380 B
`build/block-library/blocks/post-terms/style-rtl.css`	73 B
`build/block-library/blocks/post-terms/style.css`	73 B
`build/block-library/blocks/post-title/style-rtl.css`	60 B
`build/block-library/blocks/post-title/style.css`	60 B
`build/block-library/blocks/preformatted/style-rtl.css`	103 B
`build/block-library/blocks/preformatted/style.css`	103 B
`build/block-library/blocks/pullquote/editor-rtl.css`	183 B
`build/block-library/blocks/pullquote/editor.css`	183 B
`build/block-library/blocks/pullquote/style-rtl.css`	318 B
`build/block-library/blocks/pullquote/style.css`	318 B
`build/block-library/blocks/pullquote/theme-rtl.css`	169 B
`build/block-library/blocks/pullquote/theme.css`	169 B
`build/block-library/blocks/query-pagination-numbers/editor-rtl.css`	122 B
`build/block-library/blocks/query-pagination-numbers/editor.css`	121 B
`build/block-library/blocks/query-pagination/editor-rtl.css`	270 B
`build/block-library/blocks/query-pagination/editor.css`	262 B
`build/block-library/blocks/query-pagination/style-rtl.css`	168 B
`build/block-library/blocks/query-pagination/style.css`	168 B
`build/block-library/blocks/query-title/editor-rtl.css`	86 B
`build/block-library/blocks/query-title/editor.css`	86 B
`build/block-library/blocks/query/editor-rtl.css`	131 B
`build/block-library/blocks/query/editor.css`	132 B
`build/block-library/blocks/quote/style-rtl.css`	169 B
`build/block-library/blocks/quote/style.css`	169 B
`build/block-library/blocks/quote/theme-rtl.css`	221 B
`build/block-library/blocks/quote/theme.css`	221 B
`build/block-library/blocks/rss/editor-rtl.css`	201 B
`build/block-library/blocks/rss/editor.css`	202 B
`build/block-library/blocks/rss/style-rtl.css`	290 B
`build/block-library/blocks/rss/style.css`	290 B
`build/block-library/blocks/search/editor-rtl.css`	211 B
`build/block-library/blocks/search/editor.css`	211 B
`build/block-library/blocks/search/style-rtl.css`	359 B
`build/block-library/blocks/search/style.css`	362 B
`build/block-library/blocks/search/theme-rtl.css`	64 B
`build/block-library/blocks/search/theme.css`	64 B
`build/block-library/blocks/separator/editor-rtl.css`	99 B
`build/block-library/blocks/separator/editor.css`	99 B
`build/block-library/blocks/separator/style-rtl.css`	251 B
`build/block-library/blocks/separator/style.css`	251 B
`build/block-library/blocks/separator/theme-rtl.css`	172 B
`build/block-library/blocks/separator/theme.css`	172 B
`build/block-library/blocks/shortcode/editor-rtl.css`	476 B
`build/block-library/blocks/shortcode/editor.css`	476 B
`build/block-library/blocks/site-logo/editor-rtl.css`	465 B
`build/block-library/blocks/site-logo/editor.css`	465 B
`build/block-library/blocks/site-logo/style-rtl.css`	154 B
`build/block-library/blocks/site-logo/style.css`	154 B
`build/block-library/blocks/site-tagline/editor-rtl.css`	87 B
`build/block-library/blocks/site-tagline/editor.css`	87 B
`build/block-library/blocks/site-title/editor-rtl.css`	85 B
`build/block-library/blocks/site-title/editor.css`	85 B
`build/block-library/blocks/social-link/editor-rtl.css`	164 B
`build/block-library/blocks/social-link/editor.css`	165 B
`build/block-library/blocks/social-links/editor-rtl.css`	800 B
`build/block-library/blocks/social-links/editor.css`	799 B
`build/block-library/blocks/social-links/style-rtl.css`	1.34 kB
`build/block-library/blocks/social-links/style.css`	1.34 kB
`build/block-library/blocks/spacer/editor-rtl.css`	308 B
`build/block-library/blocks/spacer/editor.css`	308 B
`build/block-library/blocks/spacer/style-rtl.css`	48 B
`build/block-library/blocks/spacer/style.css`	48 B
`build/block-library/blocks/table/editor-rtl.css`	478 B
`build/block-library/blocks/table/editor.css`	478 B
`build/block-library/blocks/table/style-rtl.css`	480 B
`build/block-library/blocks/table/style.css`	480 B
`build/block-library/blocks/table/theme-rtl.css`	188 B
`build/block-library/blocks/table/theme.css`	188 B
`build/block-library/blocks/tag-cloud/style-rtl.css`	146 B
`build/block-library/blocks/tag-cloud/style.css`	146 B
`build/block-library/blocks/template-part/editor-rtl.css`	551 B
`build/block-library/blocks/template-part/editor.css`	550 B
`build/block-library/blocks/template-part/theme-rtl.css`	101 B
`build/block-library/blocks/template-part/theme.css`	101 B
`build/block-library/blocks/term-description/editor-rtl.css`	90 B
`build/block-library/blocks/term-description/editor.css`	90 B
`build/block-library/blocks/text-columns/editor-rtl.css`	95 B
`build/block-library/blocks/text-columns/editor.css`	95 B
`build/block-library/blocks/text-columns/style-rtl.css`	166 B
`build/block-library/blocks/text-columns/style.css`	166 B
`build/block-library/blocks/verse/style-rtl.css`	87 B
`build/block-library/blocks/verse/style.css`	87 B
`build/block-library/blocks/video/editor-rtl.css`	569 B
`build/block-library/blocks/video/editor.css`	570 B
`build/block-library/blocks/video/style-rtl.css`	173 B
`build/block-library/blocks/video/style.css`	173 B
`build/block-library/blocks/video/theme-rtl.css`	124 B
`build/block-library/blocks/video/theme.css`	124 B
`build/block-library/common-rtl.css`	1.29 kB
`build/block-library/common.css`	1.29 kB
`build/block-library/editor-rtl.css`	9.81 kB
`build/block-library/editor.css`	9.81 kB
`build/block-library/index.min.js`	146 kB
`build/block-library/reset-rtl.css`	514 B
`build/block-library/reset.css`	515 B
`build/block-library/style-rtl.css`	10.3 kB
`build/block-library/style.css`	10.3 kB
`build/block-library/theme-rtl.css`	692 B
`build/block-library/theme.css`	693 B
`build/block-serialization-default-parser/index.min.js`	1.3 kB
`build/block-serialization-spec-parser/index.min.js`	3.06 kB
`build/blocks/index.min.js`	47.2 kB
`build/components/index.min.js`	194 kB
`build/components/style-rtl.css`	16.1 kB
`build/components/style.css`	16.1 kB
`build/compose/index.min.js`	10.2 kB
`build/core-data/index.min.js`	12.4 kB
`build/customize-widgets/index.min.js`	10.3 kB
`build/customize-widgets/style-rtl.css`	1.48 kB
`build/customize-widgets/style.css`	1.48 kB
`build/data-controls/index.min.js`	830 B
`build/data/index.min.js`	7.22 kB
`build/date/index.min.js`	31.8 kB
`build/deprecated/index.min.js`	738 B
`build/dom-ready/index.min.js`	576 B
`build/dom/index.min.js`	4.66 kB
`build/edit-navigation/index.min.js`	13.8 kB
`build/edit-navigation/style-rtl.css`	3.12 kB
`build/edit-navigation/style.css`	3.12 kB
`build/edit-post/classic-rtl.css`	483 B
`build/edit-post/classic.css`	483 B
`build/edit-post/index.min.js`	58.6 kB
`build/edit-post/style-rtl.css`	7.25 kB
`build/edit-post/style.css`	7.24 kB
`build/edit-site/index.min.js`	25.9 kB
`build/edit-site/style-rtl.css`	5.04 kB
`build/edit-site/style.css`	5.03 kB
`build/edit-widgets/index.min.js`	16.1 kB
`build/edit-widgets/style-rtl.css`	3.88 kB
`build/edit-widgets/style.css`	3.89 kB
`build/editor/index.min.js`	38.6 kB
`build/editor/style-rtl.css`	3.88 kB
`build/editor/style.css`	3.88 kB
`build/element/index.min.js`	3.44 kB
`build/escape-html/index.min.js`	739 B
`build/format-library/index.min.js`	5.71 kB
`build/format-library/style-rtl.css`	668 B
`build/format-library/style.css`	669 B
`build/hooks/index.min.js`	1.76 kB
`build/html-entities/index.min.js`	628 B
`build/i18n/index.min.js`	3.73 kB
`build/is-shallow-equal/index.min.js`	709 B
`build/keyboard-shortcuts/index.min.js`	1.74 kB
`build/keycodes/index.min.js`	1.43 kB
`build/list-reusable-blocks/index.min.js`	2.07 kB
`build/list-reusable-blocks/style-rtl.css`	842 B
`build/list-reusable-blocks/style.css`	842 B
`build/media-utils/index.min.js`	3.08 kB
`build/notices/index.min.js`	1.07 kB
`build/nux/index.min.js`	2.31 kB
`build/nux/style-rtl.css`	745 B
`build/nux/style.css`	742 B
`build/plugins/index.min.js`	1.99 kB
`build/primitives/index.min.js`	1.03 kB
`build/priority-queue/index.min.js`	790 B
`build/react-i18n/index.min.js`	924 B
`build/redux-routine/index.min.js`	2.82 kB
`build/reusable-blocks/index.min.js`	2.56 kB
`build/reusable-blocks/style-rtl.css`	256 B
`build/reusable-blocks/style.css`	256 B
`build/rich-text/index.min.js`	10.6 kB
`build/server-side-render/index.min.js`	1.64 kB
`build/shortcode/index.min.js`	1.68 kB
`build/token-list/index.min.js`	847 B
`build/url/index.min.js`	1.95 kB
`build/viewport/index.min.js`	1.28 kB
`build/warning/index.min.js`	1.16 kB
`build/widgets/index.min.js`	6.45 kB
`build/widgets/style-rtl.css`	1.04 kB
`build/widgets/style.css`	1.05 kB
`build/wordcount/index.min.js`	1.24 kB

_{compressed-size-action}

diegohaz · 2021-07-01T19:04:51Z

I've seen 3 variations of this hook:

`useLazyRef`

export function useLazyRef<T>(init: () => T) {
  const ref = useRef<T>();
  if (ref.current === undefined) {
    ref.current = init();
  }
  return ref.current;
}

useLazyRef is useful when we need to instantiate something only in the first render. This is one of the few cases where accessing ref.current in the render phase will not break React's concurrent mode.

const set = useLazyRef(() => new Set());

Reference: https://twitter.com/dan_abramov/status/1149120970856075264

`useLiveRef`

export function useLiveRef<T>(value: T) {
  const ref = useRef(value);
  useLayoutEffect(() => {
    ref.current = value;
  });
  return ref;
}

useLiveRef, which looks more like the implementation in this PR, is useful when we need to use some value in an effect or memorized callback, but we don't want to re-run the effect when they change.

For example, in the component below, the effect will run not only when value changes, but also when the onChange prop is updated. Since the onChange prop is passed as an inline function (as usually it is), that will trigger the effect and call onChange every time Parent is re-rendered.

function Component({ onChange }) {
  const [value, setValue] = useState("");
  useEffect(() => {
    onChange?.(value);
  }, [onChange, value]);
  ...
}

function Parent() {
  return <Component onChange={() => {}} />;
}

You can see that happening here: https://codesandbox.io/s/aged-fire-un639?file=/src/App.js (clicking on "Re-render parent component" triggers onChange).

We could prevent that by omitting the onChange prop in the effect deps:

  useEffect(() => {
    onChange?.(value);
- }, [onChange, value]);
+ }, [value]);

That works, but React recommends against doing that. To be honest, though, I haven't found any issues with that when using callback props.

However, we can use this useLiveRef hook (or usePropRef in this PR) to store the current value of the prop and safely omit it from the effect dependencies:

function Component({ onChange }) {
  const [value, setValue] = useState("");
  const onChangeRef = useLiveRef(onChange);
  useEffect(() => {
    onChangeRef.current?.(value);
  }, [value]);
}

You can see that clicking on "Re-render parent component" doesn't trigger the onChange prop anymore: https://codesandbox.io/s/recursing-drake-o761c?file=/src/App.js

That's useful not only for callbacks or props, but any value that you don't want to trigger the effect on change, but you still want to use them inside the effect. For example, here we want to focus the element when a move has been performed and the element is the current active item, but we don't want to do that when the currently active item has been changed without a move. So we ignore changes on the isCurrentItem value by using useLiveRef.

Since this can be used for more things than just props, I would call it useLiveRef or useLatestRef (which I think is more common) instead of usePropRef.

`useEventCallback`

export function useEventCallback<T extends (...args: any) => any>(callback?: T) {
  // @ts-ignore
  const ref = useRef<T | undefined>(() => {
    throw new Error("Cannot call an event handler while rendering.");
  });
  useLayoutEffect(() => {
    ref.current = callback;
  });
  return useCallback(
    (...args: Parameters<T>): ReturnType<T> => ref.current?.(...args),
    []
  );
}

useEventCallback is a more specialized version of useLiveRef for callbacks. This always returns a memorized function (and not a ref) and throws an error if the user tries to call it in the render phase (that is, before layout effects are applied), as this would likely break React concurrent mode.

It's also a bit more convenient than useLiveRef:

function Component({ onChange: onChangeProp }) {
  const [value, setValue] = useState("");
  const onChange = useEventCallback(onChangeProp);
  useEffect(() => {
    onChange(value);
  // we put the callback in the deps array, but the callback's reference will never change.
  }, [onChange, value]);
}

packages/components/src/utils/hooks/use-prop-ref.ts

sarayourfriend · 2021-07-01T21:17:05Z

Thanks so much, Diego! I'll update the tests with your suggested changes now.

diegohaz

Made some suggestions, but we should collect better (and valid) use cases to use as examples in the JSDocs and tests. I'm having trouble trying to create a simple example. I made this CodeSandbox trying to explain how this useLatestRef works in case it helps others.

EDIT: Updated the CodeSandbox and it's a bit more simple now, so maybe we can use something like that (debounce) in the tests.

packages/components/src/utils/hooks/test/use-latest-ref.js

packages/components/src/utils/hooks/use-latest-ref.ts

diegohaz

This looks good! Thanks @sarayourfriend!

Co-authored-by: Haz <hazdiego@gmail.com>

sarayourfriend added [Package] Components /packages/components [Feature] Component System WordPress component system labels Jul 1, 2021

sarayourfriend requested review from ciampo, diegohaz and tyxla July 1, 2021 14:19

sarayourfriend self-assigned this Jul 1, 2021

sarayourfriend requested review from ajitbohra and chrisvanpatten as code owners July 1, 2021 14:19

diegohaz reviewed Jul 1, 2021

View reviewed changes

packages/components/src/utils/hooks/use-prop-ref.ts Outdated Show resolved Hide resolved

sarayourfriend force-pushed the add/use-prop-ref branch from 2e8b22d to 012425e Compare July 2, 2021 14:48

sarayourfriend changed the title ~~components: Add usePropRef hook~~ components: Add useLatestRef hook Jul 2, 2021

sarayourfriend requested a review from diegohaz July 2, 2021 15:38

diegohaz reviewed Jul 2, 2021

View reviewed changes

packages/components/src/utils/hooks/test/use-latest-ref.js Outdated Show resolved Hide resolved

packages/components/src/utils/hooks/test/use-latest-ref.js Outdated Show resolved Hide resolved

packages/components/src/utils/hooks/use-latest-ref.ts Outdated Show resolved Hide resolved

sarayourfriend force-pushed the add/use-prop-ref branch from 07d5a14 to 5d95615 Compare July 5, 2021 19:06

sarayourfriend requested a review from diegohaz July 6, 2021 13:48

diegohaz approved these changes Jul 7, 2021

View reviewed changes

sarayourfriend force-pushed the add/use-prop-ref branch from 5d95615 to 413764b Compare July 8, 2021 16:36

sarayourfriend and others added 6 commits July 12, 2021 09:06

components: Add usePropRef hook

85fd0f3

Rename to useLatestRef

5d8f3bf

Co-authored-by: Haz <hazdiego@gmail.com>

Use useIsomorphicLayoutEffect

288ccf1

Update documentation to point to codesandbox example

3258da6

Remove unit tests

17c33ad

Add unit tests

90f09cd

sarayourfriend force-pushed the add/use-prop-ref branch from 413764b to 90f09cd Compare July 12, 2021 16:06

sarayourfriend merged commit dc1821f into trunk Jul 12, 2021

sarayourfriend deleted the add/use-prop-ref branch July 12, 2021 16:46

github-actions bot added this to the Gutenberg 11.1 milestone Jul 12, 2021

priethor mentioned this pull request Jul 19, 2021

Automate grouping of release Changelog PRs by feature #33229

Merged

12 tasks

tyxla mentioned this pull request Feb 29, 2024

Components: Remove unused useLatestRef() hook #59471

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

components: Add useLatestRef hook #33137

components: Add useLatestRef hook #33137

sarayourfriend commented Jul 1, 2021 •

edited

Loading

github-actions bot commented Jul 1, 2021 •

edited

Loading

diegohaz commented Jul 1, 2021 •

edited

Loading

sarayourfriend commented Jul 1, 2021

diegohaz left a comment •

edited

Loading

diegohaz left a comment

components: Add useLatestRef hook #33137

components: Add useLatestRef hook #33137

Conversation

sarayourfriend commented Jul 1, 2021 • edited Loading

Description

How has this been tested?

Types of changes

Checklist:

github-actions bot commented Jul 1, 2021 • edited Loading

diegohaz commented Jul 1, 2021 • edited Loading

useLazyRef

useLiveRef

useEventCallback

sarayourfriend commented Jul 1, 2021

diegohaz left a comment • edited Loading

Choose a reason for hiding this comment

diegohaz left a comment

Choose a reason for hiding this comment

sarayourfriend commented Jul 1, 2021 •

edited

Loading

github-actions bot commented Jul 1, 2021 •

edited

Loading

diegohaz commented Jul 1, 2021 •

edited

Loading

`useLazyRef`

`useLiveRef`

`useEventCallback`

diegohaz left a comment •

edited

Loading