Hooks can't be used inside fieldTransforms

[FedericoBonel]

Description

Using any hooks inside field transforms throws an error. This includes copying and pasting the example of how to use field transforms from the docs, and also using the PuckAPI.

This might be happening because of the use of useMemo when initializing fieldTransforms here.

Environment

• Puck version: 0.20.0

Steps to reproduce

1. Copy and paste the "Making it interactive" example from the fieldTransforms docs, which uses two hooks (useEffect and useRef):

import { registerOverlayPortal } from "@measured/puck";

const EditableText = ({ value }) => {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      // Register the element as an overlay portal
      registerOverlayPortal(ref.current);
    }
  }, [ref.current]);

  return (
    // Mark the element as editable for inline text editing
    <p ref={ref} contentEditable>
      {value}
    </p>
  );
};

const fieldTransforms = {
  text: EditableText,
};

const Example = () => <Puck fieldTransforms={fieldTransforms} />;

2. Add a config with a component that uses the transformed field (in this case, a text field):

const Example = () => (
  <Puck
    config={{
      components: {
        Heading: {
          fields: { title: { type: "text" } },
          defaultProps: { title: "Something" },
          render: ({ title }) => {
            return <div>{title}</div>;
          },
        },
      },
    }}
    fieldTransforms={fieldTransforms}
  />
);

3. Navigate to the editor
4. Drag and drop the component that uses the transformed field

What happens

An error is thrown:

Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. 
You can only call Hooks at the top level of your React function. 
For more information, see https://react.dev/link/rules-of-hooks

What I expect to happen

Hooks should be usable inside field transforms without breaking the application.

Additional Media

[n1crack]

Yes, I am also facing the same problem. Thank you to bring it up.

[FedericoBonel]

So, after discussing this with the team, we realized this happens because of how React treats render functions versus components and where they get called. It also makes sense why we were not able to detect this before.

When using fieldTransforms, you cannot pass the component that uses hooks directly to the transform. Instead, you need to render it and return it. That is how you fix this:

const TextTransform = ({ value }) => {
  useEffect(() => console.log("Running effect"), []);

  return <div>{value}</div>;
};

// This will throw an error:
const wrongTransforms = {
  text: TextTransform,
};

// This will not throw an error:
const correctTransforms = {
  text: ({ value }) => <TextTransform value={value} />,
};

We will update the docs to show this and add a clarification about this consideration.

[n1crack]

hey @FedericoBonel

how can we update the value ? should we pass the onChange as well ? how can we sync the values ? I have a custom component

[FedericoBonel]

Hey @n1crack! Yes, you can pass all the props if you want to, just spread them:

const TextTransform = (props) => {
  // Use any of the transformFields props here

  useEffect(() => console.log("Running effect"), []);

  return <div>{props.value}</div>;
};

const correctTransforms = {
  text: (props) => <TextTransform {...props} />,
};

You can check out all the fieldTransforms props here.

[n1crack]

we cant use onChange method there right ? how can I update the field value manually ?

[FedericoBonel]

You can use the PuckAPI to get the component data with getItemById. Then, update the field value by using the propPath fieldTransforms prop together with the new setDeep utility. And finally, dispatch a replace action for that component with the updated data.

Here is an example:

const componentItemSelector = getSelectorForId(componentId);

const componentData = getItemById(componentId);

const newComponentProps = setDeep(componentData.props, propPath, value);

dispatch({
  type: "replace",
  data: { ...componentData, props: newComponentProps },
  destinationIndex: componentItemSelector.index,
  destinationZone: componentItemSelector.zone,
});

You can check out an example of this in our internal InlineTextField implementation, which is what handles inline text editing.

[n1crack]

I think I figured it out. Thank you for the detailed explanation.