SlotFill: fix dependencies of registration effects, deduplicate code (#…

…67071)

* SlotFill: fix dependencies of registration effects, deduplicate code

* Add changelog entry

Co-authored-by: jsnajdr <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: Mamaduka <[email protected]>

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

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;
 }