From b4dc1a21b5aa41f06321c2a459beb3bb940caa2b Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 25 Oct 2024 14:51:17 +0400 Subject: [PATCH 1/2] Rich Text: Fix React Complier error for 'useEventListeners' --- packages/rich-text/src/component/event-listeners/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/rich-text/src/component/event-listeners/index.js b/packages/rich-text/src/component/event-listeners/index.js index a6327fe6637c37..cd89c7df6a98ae 100644 --- a/packages/rich-text/src/component/event-listeners/index.js +++ b/packages/rich-text/src/component/event-listeners/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useMemo, useRef } from '@wordpress/element'; +import { useMemo, useRef, useLayoutEffect } from '@wordpress/element'; import { useRefEffect } from '@wordpress/compose'; /** @@ -25,7 +25,9 @@ const allEventListeners = [ export function useEventListeners( props ) { const propsRef = useRef( props ); - propsRef.current = props; + useLayoutEffect( () => { + propsRef.current = props; + }, [ props ] ); const refEffects = useMemo( () => allEventListeners.map( ( refEffect ) => refEffect( propsRef ) ), [ propsRef ] From faec41e9b3405af125a2c7030f95e803000ee29a Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 25 Oct 2024 15:34:41 +0400 Subject: [PATCH 2/2] Try 'useInsertionEffect' hook --- packages/rich-text/src/component/event-listeners/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/rich-text/src/component/event-listeners/index.js b/packages/rich-text/src/component/event-listeners/index.js index cd89c7df6a98ae..4f69db36db06a0 100644 --- a/packages/rich-text/src/component/event-listeners/index.js +++ b/packages/rich-text/src/component/event-listeners/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useMemo, useRef, useLayoutEffect } from '@wordpress/element'; +import { useMemo, useRef, useInsertionEffect } from '@wordpress/element'; import { useRefEffect } from '@wordpress/compose'; /** @@ -25,9 +25,9 @@ const allEventListeners = [ export function useEventListeners( props ) { const propsRef = useRef( props ); - useLayoutEffect( () => { + useInsertionEffect( () => { propsRef.current = props; - }, [ props ] ); + } ); const refEffects = useMemo( () => allEventListeners.map( ( refEffect ) => refEffect( propsRef ) ), [ propsRef ]