Loss of state on React re-render

[eralmansouri]

Describe the bug
The issue here is that whenever the form or components re-renders, SurveyJS throws my cursor unexpectedly, deletes text even as I'm typing, and the whole input form constantly flashing.

Steps to reproduce

1. Create a parent react component that has state.
2. Add SurveyJS somewhere inside it.
3. Simulate state changes while you fill out the form.
4. The form starts flashing, your cursor placement keeps getting reset, your data is deleted partially or totally depending on input type.

Proof of Concept
Forked an example from the docs and simply added setInterval that updates state. You can find it here

[andrewtelnov]

@eralmansouri I strongly believe that you are re-creating the survey model and then load it's state from a database or something.
You should not re-create the SurveyModel object on the fly.
For example, our SurveyJS Creator contains many SurveyJS surveys/forms inside it and since we do not re-create these models, changing the state of the root component doesn't bring any issues.

Thank you,
Andrew

[eralmansouri]

@eralmansouri I strongly believe that you are re-creating the survey model and then load it's state from a database or something.
You should not re-create the SurveyModel object on the fly.
For example, our SurveyJS Creator contains many SurveyJS surveys/forms inside it and since we do not re-create these models, changing the state of the root component doesn't bring any issues.

Thank you,
Andrew

As you can see in the example, the survey model is memoized. My edits are simple and in only two files, so it should be easy to confirm.

Best regards,
Essam

[andrewtelnov]

@eralmansouri useMemo will return survey model with the original state, as it was on SurveyModel creation.
If you call this code before the rendering
console.log(JSON.stringify(survey.data, null, 3));, you will see that survey.data is empty.
It means on every second you are start editing an initial survey model.

Thank you,
Andrew

[eralmansouri]

@andrewtelnov I modified the code to demonstrate that even if I turn survey into a global variable that is never re-created, the problem persists.

const survey = new Model(json);
survey.onComplete.add((sender, options) => {
  console.log(JSON.stringify(sender.data, null, 3));
});

function SurveyComponent() {
  return <Survey model={survey} />;
}

const App = () => {
  // Just using this to trigger re-render.
  const [counter, setCounter] = React.useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => setCounter((v) => v + 1), 500);
    return () => clearInterval(timer);
  }, [setCounter]);

  return (
    <div>
      <b>The counter was incremented {counter} times</b>
      <SurveyComponent />
    </div>
  );
};

As you can see here, my code changes are entirely in the App component, and the SurveyComponent does not re-create the model. Maybe you can demonstrate any example where the survey re-renders without loss of state?

I have tried the following 3 options, all of which lose state.

1. Example from above where the survey is a variable defined outside the component.

const survey = new Model(json);
survey.onComplete.add((sender, options) => {
  console.log(JSON.stringify(sender.data, null, 3));
});

function SurveyComponent() {
  return <Survey model={survey} />;
}

2. This example code from your documentation.

function SurveyComponent() {
  const survey = new Model(json);
  survey.onComplete.add((sender, options) => {
    console.log(JSON.stringify(sender.data, null, 3));
  });
  return <Survey model={survey} />;
}

3. Used useMemo to avoid defining the variable outside the component.

function SurveyComponent() {
  const survey = React.useMemo(() => {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    return survey;
  }, []);
  return <Survey model={survey} />;
}

In all three cases, the form is unusable, and data is lost during re-render.

Best regards,
Essam

[andrewtelnov]

@eralmansouri You're right, I was initially misled by the 0.5-second update delay. I changed it to 5 seconds, which helped me understand the issue better.

During the root re-render, the SurveyJS React question component retrieves the value directly from the survey model. This is necessary because if not, updating question.value wouldn't reflect in the input field within the React component.

If the user is in the process of entering a value in a text or comment question, and the survey.textUpdateMode property is set to "onBlur" (the default), then the input value will reset to the current question value in the model upon losing focus or re-render.

There are two possible approaches to address this:

1. Manually trigger the onBlur event on the active text input, which commits the entered value.
2. Change the textUpdateMode property to "onTyping". However, note that this won't work with inputs that use masks, as the current implementation doesn't save the mask input value unless it's valid, which is often not the case.

In my opinion, a comprehensive solution at the SurveyJS level is challenging. Ideally, the survey model shouldn't re-render unless its model or data has actually changed.

If you have any other ideas, I’d be happy to discuss them, as I believe this could be an issue others encounter as well.

Thank you,
Andrew

[eralmansouri]

@eralmansouri You're right, I was initially misled by the 0.5-second update delay. I changed it to 5 seconds, which helped me understand the issue better.

During the root re-render, the SurveyJS React question component retrieves the value directly from the survey model. This is necessary because if not, updating question.value wouldn't reflect in the input field within the React component.

If the user is in the process of entering a value in a text or comment question, and the survey.textUpdateMode property is set to "onBlur" (the default), then the input value will reset to the current question value in the model upon losing focus or re-render.

There are two possible approaches to address this:

1. Manually trigger the onBlur event on the active text input, which commits the entered value.
2. Change the textUpdateMode property to "onTyping". However, note that this won't work with inputs that use masks, as the current implementation doesn't save the mask input value unless it's valid, which is often not the case.

In my opinion, a comprehensive solution at the SurveyJS level is challenging. Ideally, the survey model shouldn't re-render unless its model or data has actually changed.

If you have any other ideas, I’d be happy to discuss them, as I believe this could be an issue others encounter as well.

Thank you,
Andrew

Ok but even assuming the workaround is good enough to avoid data loss, it still doesn't solve the issue of the cursor shifting around and losing focus.

I feel like saying the library has native react support is a bit strange when re-rendering breaks it. It is also very strange that this bug apparently existed for years without being discovered.

Best regards,
Essam

[andrewtelnov]

@eralmansouri, I believe you'll face a similar issue with any React component that updates its input value programmatically and saves onBlur. Handling both behaviors simultaneously is inherently challenging.

If you have a reactive value property and update it while the user is editing, how do you synchronize these updates without conflicting with their ongoing input? Managing both at the same time can lead to unexpected behavior.

React provides the ability to bypass re-rendering for components if their props haven't changed. I recommend considering this approach. For example, you can structure your app with a root React component and several child components that are not directly in the root, preventing unnecessary re-renders when props update. SurveyJS Creator, which includes numerous React components and at least a dozen of SurveyJS components, manages this effectively without encountering the same issue.

Thank you,
Andrew

[eralmansouri]

@eralmansouri, I believe you'll face a similar issue with any React component that updates its input value programmatically and saves onBlur. Handling both behaviors simultaneously is inherently challenging.

If you have a reactive value property and update it while the user is editing, how do you synchronize these updates without conflicting with their ongoing input? Managing both at the same time can lead to unexpected behavior.

I don't think I understood you here. As an example, I've also updated the sandbox linked above and added this component:

function CustomInput() {
  const [value, setValue] = React.useState("");

  const handleBlur = React.useCallback((e) => {
    setValue(e.target.value);
  }, []);

  return (
    <div style={{ display: "block" }}>
      <label for="custom">Uncontrolled</label>
      <input id="custom" type="text" onBlur={handleBlur} />
      <a>Saved value: {value}</a>
    </div>
  );
}

You will see that it keeps track of the "saved value" on blur that you can read next to the input field, and the ongoing value is never lost. It is also part of the same tree that the surveyJs form is in, so it is re-rendering equally as often or more, but does not lose any state. I've also included an example of a controlled input with onChange that has the same behavior.

I intentionally didn't use any library but something like Tanstack Form or React Hook Form also would never lose state on a re-render.

React provides the ability to bypass re-rendering for components if their props haven't changed. I recommend considering this approach. For example, you can structure your app with a root React component and several child components that are not directly in the root, preventing unnecessary re-renders when props update.

True, but if my custom component uses value from React context, I expect it to re-render even though no props have changed. And re-rendering shouldn't cause loss of state anyways. I would be better off wrapping the whole thing in an iframe over using it with react if re-rendering is not safe. So really this feels like a way to skirt around the fact that re-rendering is causing data loss, instead of addressing it.

SurveyJS Creator, which includes numerous React components and at least a dozen of SurveyJS components, manages this effectively without encountering the same issue.

Actually, no, it has the same problem. I created another example here, this time with SurveyJS Creator and it also loses state on re-render. Rendering is a core aspect of React. It is effectively its main core feature that it re-renders automatically. In what way does this support React if the core function of React causes loss of state?

Best regards,
Essam

[andrewtelnov]

@eralmansouri FYI: We have discussed this issue on our daily today. I will try to make a proxy property that will store the data entered onChange event and render it instead of the real value. If it works, you will see PR related to this issue.

PS: It is better do not render SurveyJS component anyway, since we may have a similar issue with searching for choices in dropdown and in other questions. Plus it would make the app way faster.

Thank you,
Andrew

[eralmansouri]

@eralmansouri FYI: We have discussed this issue on our daily today. I will try to make a proxy property that will store the data entered onChange event and render it instead of the real value. If it works, you will see PR related to this issue.

PS: It is better do not render SurveyJS component anyway, since we may have a similar issue with searching for choices in dropdown and in other questions. Plus it would make the app way faster.

Thank you,
Andrew

Hey @andrewtelnov Thank you for the update. You might want to update the question tag to bug instead.

No need to rush a fix I am not a customer and I just wanted to make sure it was reported. I will take a quick look to see if I can help with a fix.

Also I want to apologize if I came across as frustrated, it was just a bit of a shock for me and upon re-reading my comments I realize that in my effort to convey my surprise I might've conveyed frustration instead.

Thanks for the discussion. Good luck.

Best regards,
Essam