Skip to content

SlotFill: add dependencies to updateFill effect #77907

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jsnajdr merged 2 commits into from
May 4, 2026
+3 −2
Merged

SlotFill: add dependencies to updateFill effect #77907

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4e08f99
SlotFill: add dependencies to updateFill effect
jsnajdr May 4, 2026
c7c3743
Add changelog entry
jsnajdr May 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
### Internal

- Update code to comply with `eslint-plugin-react-hooks` v7 ([#69962](https://github.com/WordPress/gutenberg/pull/69962)).
- `SlotFill`: Add dependencies to `updateFill` effect ([#77907](https://github.com/WordPress/gutenberg/pull/77907)).

## 33.0.0 (2026-04-29)

Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/slot-fill/fill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@ export default function Fill( { name, children }: FillComponentProps ) {
useLayoutEffect( () => {
registry.updateFill( name, {
instance: instanceRef.current,
children: childrenRef.current,
children,

@aduth aduth May 4, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder how this might impact the separate useLayoutEffect above. Do we need both of them? Why does the other use childrenRef and this one children ? (Do we need childrenRef at all?)

@jsnajdr jsnajdr May 11, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are three effects that collaborate together:

  • we need to call registerFill on mount and unregisterFill on unmount. The registerFill call needs a children arg, but we don't want to re-register the fill on every children change. That's why the value needs to be passed into the effect as a ref. That's also the only reason why childrenRef is needed.
  • we need to call updateFill on every re-render, when new children value is passed. This effect wants to run on every children change, so the children dependency is warranted. The updateFill method does its own internal check whether prevChildren !== nextChildren, so even the effect without any dependencies, running on every render, was OK. It just raises eyebrows (both human and linter's).

} );
} );
}, [ registry, name, children ] );

const slot = useObservableValue( registry.slots, name );

Expand Down
Loading