From 3f882fa1f50a3a3ed312f73c81eecab9daea3810 Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Fri, 25 Oct 2024 14:41:54 +0300 Subject: [PATCH] Fields: Fix React Compiler mutation errors (#66464) Co-authored-by: tyxla Co-authored-by: Mamaduka --- packages/fields/src/fields/slug/slug-edit.tsx | 10 +++++----- packages/fields/src/fields/slug/slug-view.tsx | 8 ++++---- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/fields/src/fields/slug/slug-edit.tsx b/packages/fields/src/fields/slug/slug-edit.tsx index 760e67c9cff3bf..aeb02ba42873b9 100644 --- a/packages/fields/src/fields/slug/slug-edit.tsx +++ b/packages/fields/src/fields/slug/slug-edit.tsx @@ -38,15 +38,15 @@ const SlugEdit = ( { const permalinkPrefix = prefix; const permalinkSuffix = suffix; const isEditable = PERMALINK_POSTNAME_REGEX.test( permalinkTemplate ); - const originalSlug = useRef( slug ); - const slugToDisplay = slug || originalSlug.current; + const originalSlugRef = useRef( slug ); + const slugToDisplay = slug || originalSlugRef.current; const permalink = isEditable ? `${ permalinkPrefix }${ slugToDisplay }${ permalinkSuffix }` : safeDecodeURIComponent( data.link || '' ); useEffect( () => { - if ( slug && originalSlug.current === undefined ) { - originalSlug.current = slug; + if ( slug && originalSlugRef.current === undefined ) { + originalSlugRef.current = slug; } }, [ slug ] ); @@ -111,7 +111,7 @@ const SlugEdit = ( { } } onBlur={ () => { if ( slug === '' ) { - onChangeControl( originalSlug.current ); + onChangeControl( originalSlugRef.current ); } } } aria-describedby={ postUrlSlugDescriptionId } diff --git a/packages/fields/src/fields/slug/slug-view.tsx b/packages/fields/src/fields/slug/slug-view.tsx index 7448673c6a8464..dc17eae128d68a 100644 --- a/packages/fields/src/fields/slug/slug-view.tsx +++ b/packages/fields/src/fields/slug/slug-view.tsx @@ -10,15 +10,15 @@ import type { BasePost } from '../../types'; const SlugView = ( { item }: { item: BasePost } ) => { const slug = item.slug; - const originalSlug = useRef( slug ); + const originalSlugRef = useRef( slug ); useEffect( () => { - if ( slug && originalSlug.current === undefined ) { - originalSlug.current = slug; + if ( slug && originalSlugRef.current === undefined ) { + originalSlugRef.current = slug; } }, [ slug ] ); - const slugToDisplay = slug || originalSlug.current; + const slugToDisplay = slug || originalSlugRef.current; return `/${ slugToDisplay ?? '' }`; };