Skip to content

Root slot content unmounts and remounts on every default-zone or field update in Puck. #1665

Description

@ashhugoel

Description

I’m seeing a performance issue where anything rendered inside a root slot re-renders whenever:

  • content inside the default zone changes, or
  • any unrelated field value updates.

Example configuration:

root: {
  fields: {
    header: {
      type: "slot",
    },
  },

  render: ({ children, header: Header }) => {
    return (
      <div>
        <Header />
        {children}
      </div>
    );
  },
},

For example, an image component rendered inside the header slot re-renders whenever content inside the default zone changes.

The children subtree (default zone) appears stable and does not fully re-render, while the slot subtree always does.

Is this expected behavior for root slots in Puck? And is there a recommended workaround to preserve/memoize slot subtree renders so unrelated updates do not trigger re-renders?


Environment

  • Puck version: 0.21.2
  • React version: 18.3.1
  • Framework: Next.js 15.5.15
  • OS: Windows

Steps to reproduce

  1. Create a root slot field:
fields: {
  header: {
    type: "slot",
  },
}
  1. Render the slot inside root.render:
render: ({ children, header: Header }) => {
  return (
    <div>
      <Header />
      {children}
    </div>
  );
}
  1. Add a component inside the header slot.

  2. Update any field inside the default zone.

  3. Observe that the slot subtree re-renders even though the slot content itself did not change.


What happens

Components rendered inside the root slot subtree re-render on every unrelated editor update, including default-zone content updates and unrelated field changes.

This causes unnecessary renders and performance issues for heavier slot content.


What I expect to happen

Root slot content should remain stable and avoid re-rendering when unrelated parts of the editor update.

Ideally, slot subtrees should preserve/memoize renders unless their own content changes.


Additional Media

puck-root-slot.mp4

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions