From baf4546813cfac6ab86fca58168aa84fc952fe90 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 20 Sep 2023 11:08:29 +0100 Subject: [PATCH 1/4] Update docs --- .../src/components/link-control/README.md | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md index fef68318867e8a..c445b3db31d163 100644 --- a/packages/block-editor/src/components/link-control/README.md +++ b/packages/block-editor/src/components/link-control/README.md @@ -59,6 +59,30 @@ The resulting default properties of `value` include: - `title` (`string`, optional): Link title. - `opensInNewTab` (`boolean`, optional): Whether link should open in a new browser tab. This value is only assigned when not providing a custom `settings` prop. +Note that as `` is often rendered within other components that may themselves re-render it is advisable that consumers memoize the `value` prop before passing it to the component. This avoids re-renders of LinkControl which may result in unwanted loss of +changes users have may made when interacting with the control prior to the re-rendering. + +```jsx +const memoizedValue = useMemo( + () => ( { + url: attributes.url, + type: attributes.type, + opensInNewTab: attributes.target === '_blank', + title: attributes.text, + } ), + [ + attributes.url, + attributes.type, + attributes.target, + attributes.text, + ] +); + + +``` + ### settings - Type: `Array` From 70ffeee00ac7c3dc76cdff7327787ae6d730195b Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 20 Sep 2023 11:43:46 +0100 Subject: [PATCH 2/4] Update reasoning --- packages/block-editor/src/components/link-control/README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md index c445b3db31d163..48fc4145ec50f1 100644 --- a/packages/block-editor/src/components/link-control/README.md +++ b/packages/block-editor/src/components/link-control/README.md @@ -59,8 +59,7 @@ The resulting default properties of `value` include: - `title` (`string`, optional): Link title. - `opensInNewTab` (`boolean`, optional): Whether link should open in a new browser tab. This value is only assigned when not providing a custom `settings` prop. -Note that as `` is often rendered within other components that may themselves re-render it is advisable that consumers memoize the `value` prop before passing it to the component. This avoids re-renders of LinkControl which may result in unwanted loss of -changes users have may made when interacting with the control prior to the re-rendering. +Note: `` maintains an internal state tracking temporary user edits to the link `value` prior to submission. To avoid unwanted syncroni`ation of this internal value, it is advised that the `value` prop passed to the component is stablized (likely via memozation) before it is passed to the component. This will avoid unwanted loss of any changes users have may made whilst interacting with the control. ```jsx const memoizedValue = useMemo( From 6fb2d75f430ead5dfc5ba71f515df0bd242233bf Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 4 Oct 2023 13:33:48 +0100 Subject: [PATCH 3/4] Update wording to match review comment --- packages/block-editor/src/components/link-control/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md index 48fc4145ec50f1..c4d1db5b2b61b2 100644 --- a/packages/block-editor/src/components/link-control/README.md +++ b/packages/block-editor/src/components/link-control/README.md @@ -59,7 +59,7 @@ The resulting default properties of `value` include: - `title` (`string`, optional): Link title. - `opensInNewTab` (`boolean`, optional): Whether link should open in a new browser tab. This value is only assigned when not providing a custom `settings` prop. -Note: `` maintains an internal state tracking temporary user edits to the link `value` prior to submission. To avoid unwanted syncroni`ation of this internal value, it is advised that the `value` prop passed to the component is stablized (likely via memozation) before it is passed to the component. This will avoid unwanted loss of any changes users have may made whilst interacting with the control. +Note: `` maintains an internal state tracking temporary user edits to the link `value` prior to submission. To avoid unwanted synchronization of this internal value, it is advised that the `value` prop passed to the component is stablized (likely via memozation) before it is passed to the component. This will avoid unwanted loss of any changes users have may made whilst interacting with the control. ```jsx const memoizedValue = useMemo( From 78a4f1f3251fe0494408f1db681fcf0cdd4a1d07 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 5 Oct 2023 11:35:02 +0100 Subject: [PATCH 4/4] Actually update the text --- packages/block-editor/src/components/link-control/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md index c4d1db5b2b61b2..9479863e36f407 100644 --- a/packages/block-editor/src/components/link-control/README.md +++ b/packages/block-editor/src/components/link-control/README.md @@ -59,7 +59,7 @@ The resulting default properties of `value` include: - `title` (`string`, optional): Link title. - `opensInNewTab` (`boolean`, optional): Whether link should open in a new browser tab. This value is only assigned when not providing a custom `settings` prop. -Note: `` maintains an internal state tracking temporary user edits to the link `value` prior to submission. To avoid unwanted synchronization of this internal value, it is advised that the `value` prop passed to the component is stablized (likely via memozation) before it is passed to the component. This will avoid unwanted loss of any changes users have may made whilst interacting with the control. +Note: `` maintains an internal state tracking temporary user edits to the link `value` prior to submission. To avoid unwanted synchronization of this internal value, it is advised that the `value` prop is stablized (likely via memozation) before it is passed to the component. This will avoid unwanted loss of any changes users have may made whilst interacting with the control. ```jsx const memoizedValue = useMemo(