UsePuck() histories and index do not update with root changes

[jwartofsky-yext]

When using usePuck with histories, the histories and index params do not update when the root data does. However they do when other data is updated.

      <Puck
          config={
            {
              ...puckConfig,
              root: {
                ...puckConfig.root,
                fields: {
                  customField: {
                    label: "The Custom Field",
                    type: "text",
                  }
                },
                defaultProps: {
                  customField: "Custom Field Default"
                },
              }
            }
          }
</Puck>

...
  const {
    appState,
    history: {
      histories,
      index,
    },
  } = usePuck() as {
    appState: ReturnType<typeof usePuck>["appState"];
    history: Omit<ReturnType<typeof usePuck>["history"], "histories"> & {
      histories: History<Partial<AppState>>[];
    };
  };

  useEffect(() => {
    console.log("useEffect called here");
  }, [index, histories]);

When customField is updated, the history and index is not updated. However if another field in puck is updated, then the changes to the customField will be seen in the history along with the other change.

[FedericoBonel]

Hello! I tried replicating your issue, but with a basic Vite + React setup this is working as expected: The index and history get updated whenever anything changes in the editor, and the changes get logged to the console.

Vite.+.React.webm

This is how my setup looks like:

<Puck
  config={{
    ...config,
    root: {
      ...config.root,
      fields: {
        customField: {
          label: "The Custom Field",
          type: "text",
        },
      },
      defaultProps: {
        customField: "Custom Field Default",
      },
    },
  }}
  overrides={{
    iframe: ({ children }) => {
      const {
        history: { histories, index },
      } = usePuck();

      useEffect(() => {
        console.log("History changed:", histories, index);
      }, [index, histories]);

      return children;
    },
  }}
  data={{}}
  onPublish={onPublish}
/>

I think your issue might be that you're calling usePuck somewhere outside the Puck context. usePuck is supposed to be used inside overrides/custom fields, calling it outside those boundaries will cause unexpected behavior. Even doing it inside the render functions is not recommended.

Where are you running this part of your code?

const {
    appState,
    history: {
      histories,
      index,
    },
  } = usePuck() as {
    appState: ReturnType<typeof usePuck>["appState"];
    history: Omit<ReturnType<typeof usePuck>["history"], "histories"> & {
      histories: History<Partial<AppState>>[];
    };
  };

  useEffect(() => {
    console.log("useEffect called here");
  }, [index, histories]);

[jwartofsky-yext]

Hi,

In my setup we have an override for the Header and I'm calling usePuck() in there.

      <Puck
        config={config}
        data={{}} // we use puckInitialHistory instead
        initialHistory={puckInitialHistory}
        overrides={{
          header: () => (
            <LayoutHeader
              #use puck is called here
            />
          ),
        }}
      />

Inside LayoutHeader we have this:

const {
    appState,
    history: {
      histories,
      index,
    },
  } = usePuck() as {
    appState: ReturnType<typeof usePuck>["appState"];
    history: Omit<ReturnType<typeof usePuck>["history"], "histories"> & {
      histories: History<Partial<AppState>>[];
    };
  };

  useEffect(() => {
    console.log("useEffect called here");
  }, [index, histories]);

[jwartofsky-yext]

Hi, after some more investigation, it seems to be related to using initialHistory

Will post more once I have more info

[jwartofsky-yext]

Hi, I think I've narrowed down the problem

If puckInitialHistory is used, changes to the root fields do not update the histories and index from usePuck

However clicking anywhere in the editor window does

if puckInitialHistory is not used, changes to the root fields immediately update the histories and index from usePuck

[jwartofsky-yext]

More specifically, if appendData is false in initialHistory, then root changes are not reflected.

If it is true, then root changes update the histories and index

[FedericoBonel]

I tried setting up some initialHistory with appendData: false, but I'm still seeing logs from the effect whenever I change the root fields in this setup:

<Puck
  config={{
    ...config,
    root: {
      ...config.root,
      fields: {
        customField: {
          label: "The Custom Field",
          type: "text",
        },
      },
      defaultProps: {
        customField: "Custom Field Default",
      },
    },
  }}
  data={{}}
  overrides={{
    header: ({ children }) => {
      const { history } = usePuck();

      useEffect(() => {
        console.log(history.index, history.histories);
      }, [history.index, history.histories]);
      return children;
    },
  }}
  initialHistory={{
    index: 3,
    histories: [...some history],
    appendData: false,
  }}
/>

[jwartofsky-yext]

Hi, I've found the cause of the problem

If the initialHistory is missing props in the root, then updates to the root do not trigger updates to histories and index.

This initialHistory does trigger updates:

{
          index: 0,
          histories: [{
            state: {
              data: {
                content: [],
                root: {
                  props: {} // has props
                },
                zones: {},
              }
            },
          }],
          appendData: false,
        }

This does not:

{
          index: 0,
          histories: [{
            state: {
              data: {
                content: [],
                root: {}, // no props
                zones: {},
              }
            },
          }],
          appendData: false,
        }

Is this behavior expected?

If the initial history has nothing for root props, but then we make changes to the root, I would expect the history and index hooks to trigger.

[FedericoBonel]

Hello!

Thank you so much for debugging this and for all the information. I can confirm this is a bug, and I was able to reproduce it using your example as follows:

<Puck
  config={config}
  data={{}}
  overrides={{
    header: ({ children }) => {
      const { history } = usePuck();

      useEffect(() => {
        console.log(history.index, history.histories);
      }, [history.index, history.histories]);
      return children;
    },
  }}
  initialHistory={{
    index: 0,
    histories: [
      {
        state: {
          data: {
            content: [],
            root: {},
            zones: {},
          },
        },
      },
    ],
    appendData: false,
  }}
/>

This results in the histories and index not being updated when values at the root level change.