Plugin override components remount on every overrides prop change

[imironyak]

Description

When a plugin provides an override, any change to the prop-level overrides object passed to <Puck> causes the plugin's override subtree to fully unmount and remount - even if the plugin itself or its override components haven't changed.

Environment

• Puck version: 0.21.2

Steps to reproduce

import { useEffect, useState } from "react";
  import { Puck, type Config, type Plugin } from "@puckeditor/core";

  const config: Config = {
    components: {
      Text: {
        render: () => <p>Hello</p>,
      },
    },
  };

  const data = { content: [], root: { props: {} } };

  const myPlugin: Plugin = {
    overrides: {
      puck: ({ children }) => {
        useEffect(() => {
          console.log("puck override MOUNTED");
          return () => console.log("puck override UNMOUNTED");
        }, []);
        return <>{children}</>;
      },
    },
  };

  export default function App() {
    const [count, setCount] = useState(0);

    return (
      <>
        <button onClick={() => setCount((c) => c + 1)}>
          Re-render ({count})
        </button>
        <Puck
          config={config}
          data={data}
          plugins={[myPlugin]}
          overrides={{
            headerActions: ({ children }) => (
              <>
                {children}
                <span>Count: {count}</span>
              </>
            ),
          }}
        />
      </>
    );
  }

1. Open the console
2. Click the "Re-render" button

What happens

Every click logs "puck override UNMOUNTED" followed by "puck override MOUNTED". The entire subtree wrapped by the plugin's puck override is destroyed and recreated, and the editor blinks.

What I expect to happen

The plugin override stays mounted because the plugin hasn't changed.

Debugging

loadOverrides (packages/core/lib/load-overrides.ts:39-44) wraps every override in a new inline arrow function on each invocation:

const childNode = collected[overridesType];
const Comp = (props: any) =>
  plugin.overrides![overridesType]!({
    ...props,
    children: childNode ? childNode(props) : props.children,
  });
collected[overridesType] = Comp;

useLoadedOverrides re-runs loadOverrides whenever the overrides or plugins prop changes, which creates a new function reference for every override:

return useMemo(() => loadOverrides({ overrides, plugins }), [plugins, overrides]);

As a result, React sees each override as a different component and unmounts and remounts the entire tree.

Any consumer that passes an override prop using a closure for rendering will trigger a full remount of all overrides on every change, even when the overrides themselves have not changed or are provided as plugins.

[FedericoBonel]

Hey @imironyak! Thanks for reporting this and opening a PR.

For the record, this is tricky because although we accept render functions like this, and use them internally with a lot of care, defining a component inside another component is generally not recommended since it triggers a full remount and is widely considered an anti-pattern.

A workaround, and what I would recommend, is extracting your overrides and plugins definitions so the component reference stays stable, then using context for component-level overrides instead of relying on a closure. I agree this requires more setup, but it would be the more "React" way of doing things, and, when the dependency changes, it will re-render your component instead of doing a full remount (which preserves any state you might have in the override):

// Context: -------------------------------------------------
const CountContext = createContext(0);

const useCount = () => useContext(CountContext);

// Plugin: ---------------------------------------------------
const PuckOverride = ({ children }: PropsWithChildren) => {
  useEffect(() => {
    console.log("puck override MOUNTED");

    return () => console.log("puck override UNMOUNTED");
  }, []);
  return <>{children}</>;
};

const myPlugin: Plugin = {
  overrides: {
    puck: PuckOverride,
  },
};

const plugins = [myPlugin];

// Puck overrides: ---------------------------------------------------
const HeaderOverride = ({ children }: PropsWithChildren) => {
  const count = useCount(); // Getting dependencies from context

  return (
    <>
      {children}
      <span>Count: {count}</span>
    </>
  );
};

const overrides: Partial<Overrides> = {
  headerActions: HeaderOverride,
};

// Editor component: ---------------------------------------------------
export function Client() {
  const [count, setCount] = useState(0);

  return (
    // You can also extract this into its own CountContextProvider with state
    <CountContext.Provider value={count}>
      <button onClick={() => setCount((c) => c + 1)}>
        Re-render ({count})
      </button>
      <Puck
        config={config}
        data={data}
        plugins={plugins}
        overrides={overrides}
      />
    </CountContext.Provider>
  );
}

cursorful-video-1775619974095.mp4

[imironyak]

Thanks for the detailed response and the workaround, @FedericoBonel! Using context with extracted components is definitely the cleaner pattern, and I'll adopt it.

[FedericoBonel]

Glad to hear! I'll be closing this as not planned then, let me know if you'd like me to keep it open though!