How to effectively manage formSchema and formData for getting and setting data?

[tuthanhoancanh012]

I am facing a situation where the component re-renders, unmounts, and remounts multiple times when updating formSchema and formData, which causes the form to very lag each time the value (data/schema) changes.

What is the correct approach for managing formSchema and formData when I need to get and set values on them?
Currently, I am storing both in State and managing them internally. Is there another approach to get and set values if I need to update data in the FormBuilder?

[optimajet]

At this point, any manipulation to change the schema actually results in recreating the entire form. Can you please tell us in more detail why you need to change the scheme not through the designer interface, but programmatically?

[tuthanhoancanh012]

Hi @optimajet , I have developed some new components in my code, and I want to know the best way to manage the schema and data properly. Every time I update the schema and formData, the entire form unmounts and remounts, causing some of my components to lag due to DOM reflow and repaint. I’d like to know if there’s a more efficient way to manage the state of the schema and formData, because it’s possible that the way I’m currently storing and updating them in state is not optimal.

[optimajet]

We are currently working on a redesign of the form state. For historical reasons, form state is dynamically calculated from component values. And we are changing this behaviour to manage the form state through a shared object. With this change, data management will be simplified.

Effectively changing the JSON of a form is not available to end users right now, except for users who have changed part of the source code.

[tuthanhoancanh012]

Thank you for your information @optimajet , For now you show me how to manage formSchema and formData more effectively? Currently, every time I update the form schema, the entire component unmounts and remounts. If the form contains many components, this causes lag and stuttering—especially when I'm typing values into input fields.

import React, { useCallback, useEffect, useMemo, useState } from 'react';

const MyDropdown = (props: SelectProps & { multiple?: boolean }) => {
    const { options, ...rest } = props;
    const parsedOptions = JSON.parse(JSON.stringify(options)) 
  
    const mappedOptions =
      parsedOptions?.map((item) => {
        return {
          label: item.label as string,
          value: item.label as string,
        };
      }) || [];
    
    return (
      <Select
        mode={props?.multiple ? 'multiple' : undefined}
        maxTagCount={props?.multiple ? 'responsive' : undefined}
        value={(props?.multiple ? rest.value : rest?.value?.[0]) || undefined}
        maxCount={5}
        onChange={rest?.onChange}
        options={mappedOptions}
        placeholder={('Select')}
      />
    );
  };
  
  export const Dropdown = define((MyDropdown), 'Dropdown')
    .name('Dropdown')
    .category('fields')
    .props({
      options: array.default([]),
      value: array.valued.default([]),
      multiple: boolean.default(true),
    })

    
const Example = () => {
  // another code
  const [formData, setFormData] = useState();
  const [schema, setSchema] = useState();

  const loadForm = useCallback(() => {
    return JSON.stringify(schema);
  }, [schema]);
  const handleChangeData = useCallback(
    ({ data }) => {
      if (JSON.stringify(data) !== JSON.stringify(formData)) {
        setFormData(data);
      }
    },
    [formData]
  );

  const handleFormSchemaChange = useCallback(
    (newSchema) => {
      if (JSON.stringify(newSchema) !== JSON.stringify(schema)) {
        // In this case, I have a custom input field component. 
        // The form builder contains many fields, and whenever I input a value into the input field, it refreshes the entire form schema. 
        // This causes typing to lag or stutter, even though I’ve already implemented debounce on the input.
        setSchema(newSchema);
      }
    },
    [schema]
  );
  return (
    <FormBuilder
      theme='light'
      view={view}
      onFormSchemaChange={handleFormSchemaChange}
      initialData={formData}
      onFormDataChange={handleChangeData}
      getForm={loadForm}
      viewMode='desktop'
    />
  );
};

[optimajet]

@tuthanhoancanh012 thanks for the example. We will improve this behaviour.

[tuthanhoancanh012]

Hello @optimajet, Do we have any updates on this, or any suggestions on how I can manage formData and the schema more effectively?

[optimajet]

Hello, @tuthanhoancanh012. Not yet. We'll be sure to post when there's an update.