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

…ordPress#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]>
carstingaxion · Nov 18, 2024 · f6e6e45 · f6e6e45
1 parent c22ecef
commit f6e6e45
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 21 deletions.
diff --git 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
@@ -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;
 }