Why does my Form reset/cleared when I use useState [React]

[junixquiaoit]

So, using useState (set) triggers re-render of component. Current data is being reset/cleared every time 'setState' is triggered. How to prevent this?

Just a simple show or hide of an element triggers re-render, and my form will be cleared out.

[sergeythrees]

Hi, @junixquiaoit
Please send us your code and describe the steps to reproduce the problem.

[junixquiaoit]

Steps:

1. Just input anything on the input fields, i use custom(ant d) and default input component.
2. Click toggle element
3. Inputted data from fields are cleared.

`'use client';

// First-party libraries
import React, { useCallback, useState } from 'react';

// Third-party libraries
import {
ltrCssLoader,
RsLocalizationWrapper,
rSuiteComponents,
rtlCssLoader,
} from '@react-form-builder/components-rsuite';
import {
BiDi,
ComponentLocalizer,
createView,
Validators,
} from '@react-form-builder/core';

const FormViewer = dynamic(() => import('@react-form-builder/core').then((mod) => mod.FormViewer), {
ssr: false,
});

import { customInput } from '@/lib/formbuilder/components/CustomInput';
import { customLabel } from '@/lib/formbuilder/components/CustomLabel';

// Services
import dynamic from 'next/dynamic';

const customComponents = [
customInput.build().model,
customLabel.build().model,
];

const componentsMetadata = [
...rSuiteComponents.map((definer) => definer.build().model),
...customComponents, // Custom components
];

const view = createView(componentsMetadata)
.withViewerWrapper(RsLocalizationWrapper)
.withCssLoader(BiDi.LTR, ltrCssLoader)
.withCssLoader(BiDi.RTL, rtlCssLoader);

const validators: Validators = {
string: {
isHex: {
validate: (value) => /^[0-9A-F]*$/i.test(value),
},
isHappy: {
params: [],
validate: (value) => value === 'Happy',
},
equals: {
params: [
{ key: 'value', type: 'string', required: false, default: 'Ring' },
{
key: 'message',
type: 'string',
required: false,
default: 'Value must be equal to ',
},
],
validate: (value, _, args) => {
const errorMessage = args?.['message'] as string;
const checkedValue = args?.['value'] as string;
const errorResult = errorMessage ? errorMessage + checkedValue : false;
return value !== args?.['value'] ? errorResult : true;
},
},
},
number: {},
boolean: {
onlyTrue: {
validate: (value) => value === true,
},
},
};

const TestPage = () => {

const [isShowElement, setIsShowElement] = useState(false);

const loadForm = async () => {
return JSON.stringify(form);
};

const form = {
"version": "1",
"tooltipType": "RsTooltip",
"errorType": "RsErrorMessage",
"form": {
"key": "Screen",
"type": "Screen",
"props": {},
"children": [
{
"key": "rsInput1",
"type": "RsInput",
"props": {}
},
{
"key": "customInput1",
"type": "CustomInput",
"props": {
"layout": {
"value": "vertical"
}
}
}
]
},
"localization": {},
"languages": [
{
"code": "en",
"dialect": "US",
"name": "English",
"description": "American English",
"bidi": "ltr"
}
],
"defaultLanguage": "en-US"
};

const localizeFn = useCallback((componentStore, language) => {
return componentStore.key === 'submit' && language.code === 'en' ? { children: Submit } : {};
}, []);

return (
<div style={{ display: 'block', width: '100%' }}>
<FormViewer
readOnly={false}
view={view}
getForm={loadForm}
formName={'testForm'}
localize={localizeFn}
validators={validators}
/>

  <button type='button' onClick={() => setIsShowElement(!isShowElement)}>
    Toggle Element
  </button>

  {isShowElement && (
    <div>
      <p>This is a conditional element.</p>
    </div>
  )}
</div>

);
};
export default TestPage;`

[sergeythrees]

Hi, @junixquiaoit
you forgot to wrap the loadForm function in a useCallback, so a re-render occurs.