Infinite Render with Code Component State

Developer Support
1

I registered a component to upload a file but it’s driving me crazy. According to what I understand from the documentation, I am doing everything right, but every time the onChange is triggered, the component re-renders infinitely, entering a loop, and I don’t understand why. My code looks like this:

Component

import { Upload, UploadFile } from "antd";
import ImgCrop from "antd-img-crop";

export interface CropperProps {
    content  : JSX.Element;
    onChange : (file : UploadFile) => void;
};

export default function Cropper({
    content,
    onChange,
} : CropperProps) {
    return (
        <ImgCrop
            showGrid
            showReset
            rotationSlider
            cropShape="round"
            modalOk="Recortar"
            modalCancel="Cancelar"
            resetText="Restablecer"
        >
            <Upload
                accept="image/*"
                multiple={false}
                showUploadList={false}
                onChange={ ({ file }) => {
                    onChange(file);
                }}
            >
                {content}
            </Upload>
        </ImgCrop>
    );
};

Registration

const CropperConfig : ExtendedCodeComponentMeta = {
    id          : "cropper",
    name        : "Cropper",
    importPath  : "~/components/Cropper/Cropper.tsx",
    isDefaultExport : true,
    displayName : "Cropper",
    styleSections : true,
    states : {
        file : {
            type         : "writable",
            variableType : "object",
            valueProp    : "value",
            onChangeProp : "onChange",
        },
    },
    props : {
        value : {
            type        : "object",
            displayName : "Value",
            advanced    : true,
        },
        onChange : {
            type        : "eventHandler",
            displayName : "On Change",
            argTypes    : [
                {
                    name : "file",
                    type : "object",
                },
            ],
            advanced    : true,
        },
        content : {
            type         : "slot",
            displayName  : "Content",
            defaultValue : [
                {
                    type  : "text",
                    value : "Cropper",
                },
            ],
        },
    }
};```
2

Any response?

3

Hello @andres_murillo.

Is the infinite rendering only happening in interactive mode? Can you send your project ID?

4

Yup, this is my project id: 5nPYJMkHKsudqrrya3SLGq

And it happens in the “Cropper” component

5

image
image1920×935 128 KB

6

Thanks for reporting @andres_murillo, the team will be investigating the issue.

7

any updates on this?

8

We are still working on this issue. For now, can you use our live preview feature to check your changes in this component?

9

Do we have an update on this one? It keeps happening to me each time I use writable states por my code components. For example:

export const Rate = ({
    value,
    onChange,
    className,
    ...props
}: RateProps) => {
    const handleChange = (value: number) => {
        onChange && onChange(value);
    };

    return (
        <AntdRate
            value={value}
            onChange={handleChange}
            className={`inprodi-rate ${className}`}
            {...props}
        />
    );
};

and the registration:

export const rateMeta: CodeComponentMeta<RateProps> = {
    name: "Rate",
    displayName: "Rate",
    providesData: true,
    states: {
        value: {
            type: "writable",
            variableType: "number",
            valueProp: "value",
            onChangeProp: "onChange",
        },
    },
    props: {
        value: {
            type: "number",
            defaultValue: 0,
        },
        onChange: {
            type: "eventHandler",
            argTypes: [{ name: "value", type: "number" }],
        },
     ...
    },
    importPath: "inprodi-design-system",
    importName: "Rate",
};

The result:

image
image1920×1103 115 KB

I really dont know if this is a bug, or I am doing something wrong…

10

Hey @andres_murillo.

Can you try changing the handleChange function to this?

    const handleChange = (value: number) => {
        onChange && onChange(value);
    };

    const handleChange = useCallback((value: number) => {
        onChange && onChange(value);
    }, [onChange]);