Resolve sluggish field behaviour

[chrisvxd]

Massively improve performance of array and object fields.

• Major refactor of array fields to eliminate re-renders
• Refactor of object fields to eliminate re-renders

Testing

• Test drag and drop of array fields
• Ensure undo/redo history restores array fields appropriately after moving things around
• Test complex combinations of fields (objects in arrays in arrays etc)

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
puck-demo	Ready	Preview	Comment	Sep 25, 2025 10:53am
puck-docs	Canceled		Comment	Sep 25, 2025 10:53am

[chrisvxd]

I believe this is working now 🚀

[FedericoBonel]

Some bugs I found so far:

When using the following config:

export const conf = {
  components: {
    TestNested: {
      fields: {
        array: {
          type: "array",
          arrayFields: {
            title: { type: "text" },
            nestedArray: {
              type: "array",
              arrayFields: { title: { type: "text" } },
            },
          },
          defaultItemProps: {
            title: "Title",
            nestedArray: [],
          },
        },
      },
      defaultProps: {
        array: [],
      },
      render: ({ array }) => {
        return (
          <ul>
            {array.map((arrayItem, outIndex) => (
              <li key={outIndex}>
                {arrayItem.title}
                <ul>
                  {arrayItem.nestedArray.map((nestedItem, inIndex) => (
                    <li key={inIndex}>{nestedItem.title}</li>
                  ))}
                </ul>
              </li>
            ))}
          </ul>
        );
      },
    },
  },
};

Nested items disappear

1. Add three outer items.
2. Add three nested items to one of them, and change its order.
3. Nested items disappear (they reappear if you add a new nested item).

This does not happen if the items are collapsed.

https://github.com/user-attachments/assets/de2640d9-c708-4c3f-92e6-4d65e08acaa2

Adds extra nested items

1. Add three outer items.
2. Add three nested items to the first outer item.
3. Add two nested items to the second outer item.
4. Add one nested item to the third outer item.
5. Expand the third outer item, leave all its nested items collapsed, then:
   • Move it to the first position.
   • Move it to the last position.
   • Move it to the middle position.
6. A nested item is added (not shown in the canvas) when moved to the first position.
7. Another nested item is added when moved back to the third position.
8. An item is removed when moved to the second position.

https://github.com/user-attachments/assets/b8d61f1a-6f97-407b-beef-77dc8cda6e98

[FedericoBonel]

Found another bug, it seems like AutoFields are not working correctly.

Using this config:

const config = {
  TestCustom: {
    fields: {
      array: {
        type: "custom",
        render: ({ value, onChange }) => {
          return (
            <AutoField
              field={{
                type: "array",
                arrayFields: { title: { type: "text" } },
                defaultItemProps: { title: "Title" },
              }}
              onChange={onChange}
              value={value}
            />
          );
        },
      },
    },
    defaultProps: {
      array: [],
    },
    render: ({ array }) => {
      return (
        <ul>
          {array.map((item, index) => (
            <li key={index}>{item.title}</li>
          ))}
        </ul>
      );
    },
  },
};

1. Drag and drop a TestCustom component.
2. Add items.
3. Expand one of the items.
   • The title field is empty even though the default item prop is visible in the canvas.
   • Trying to change the title field updates it in the canvas, but as soon as you click away from the field, it resets to empty in the sidebar.
4. Reorder one of the items.
   • All items disappear from the fields.

https://github.com/user-attachments/assets/a971ab23-0d5e-49cc-85ce-a15edd4aa690

[dj-fiorex]

is there any news on this? we need performance improvements for array (and slots) 👍

[FedericoBonel]

This issue might get closed with this PR: #1429

[FedericoBonel]

This issue might get closed with this PR: #1450