diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 8b72af17cae987..8c217c90ba1b7d 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -15,6 +15,10 @@ - `SlotFill`: Remove registration API methods from return value of `__experimentalUseSlot` ([#67070](https://github.com/WordPress/gutenberg/pull/67070)). +### Internal + +- `SlotFill`: fix dependencies of `Fill` registration effects ([#67071](https://github.com/WordPress/gutenberg/pull/67071)). + ## 28.12.0 (2024-11-16) ### Deprecations diff --git a/packages/components/src/slot-fill/fill.ts b/packages/components/src/slot-fill/fill.ts index 4134af25684b07..b11b7af09b82f0 100644 --- a/packages/components/src/slot-fill/fill.ts +++ b/packages/components/src/slot-fill/fill.ts @@ -11,7 +11,7 @@ import useSlot from './use-slot'; import type { FillComponentProps } from './types'; export default function Fill( { name, children }: FillComponentProps ) { - const { registerFill, unregisterFill } = useContext( SlotFillContext ); + const registry = useContext( SlotFillContext ); const slot = useSlot( name ); const ref = useRef( { @@ -21,32 +21,17 @@ export default function Fill( { name, children }: FillComponentProps ) { useLayoutEffect( () => { const refValue = ref.current; - registerFill( name, refValue ); - return () => unregisterFill( name, refValue ); - // The useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior. - // We'll leave them as-is until a more detailed investigation/refactor can be performed. - }, [] ); + refValue.name = name; + registry.registerFill( name, refValue ); + return () => registry.unregisterFill( name, refValue ); + }, [ registry, name ] ); useLayoutEffect( () => { ref.current.children = children; if ( slot ) { slot.forceUpdate(); } - // The useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior. - // We'll leave them as-is until a more detailed investigation/refactor can be performed. - }, [ children ] ); - - useLayoutEffect( () => { - if ( name === ref.current.name ) { - // Ignore initial effect. - return; - } - unregisterFill( ref.current.name, ref.current ); - ref.current.name = name; - registerFill( name, ref.current ); - // The useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior. - // We'll leave them as-is until a more detailed investigation/refactor can be performed. - }, [ name ] ); + }, [ slot, children ] ); return null; }