Strange behavior when saving a custom enum component.

[ebower12]

Prerequisites

• [x] I have read the documentation;
• [ ] In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.

Description

I've got a custom component I'm using for an enum field in my uiSchema and I'm passing in the value, options, and onChange props from the formData object.

  <div>
      <Button.Group basic>
        {options.map(option => (
          <Button
            key={option.label}
            active={value.includes(option.value)}
            onClick={() => {
              const newValue = value.includes(option.value) ? value.filter(x => x !== option.value) : [...value, option.value]
              onChange(newValue)
            }}
          >
            {option.label}
          </Button>
        ))}
      </Button.Group>
  </div>

When I edit the formData by toggling one of the enum values, an ajax call goes out with the correct data, and the form updates with the expected result, but the form actually re-renders three times in quick succession, once with the new value, once with the old value, and then again with the new value, as can be seen in these console logs.

Refreshing the page or rendering a different component and then re-rendering this component causes the form to then render with the old value instead of the new value. If I make multiple changes to the data in a row before navigating away and re-rendering the component, whatever was the SECOND to last instance of formData is populated in my component. Essentially the formData seems to be updating as expected initially, but then somehow consistently reverting to the previous version when re-rendered.

I'm not sure if the issue is on my end or not, but it seems like the form is somehow caching old data and overwriting the new data when it re-renders. This seems similar to issue #231 but that fix was merged in years ago in version 0.33.2, and I'm using version 1.0.4.

Expected behavior

• When I edit the formData through my custom component
• And I navigate away, and back to the component, re-rendering it
• Then The component still has the new formData saved

Actual behavior

• When I edit the formData through my custom component
• And I navigate away, and back to the component, re-rendering it
• The The form has old data in the custom component

Version

1.0.4

[dmethvin-gov]

I'm just coming up to speed with this library myself and I don't see a full test case, but does your component have state? I'm wondering if you need to follow the example of the AltDateWidget and implement a custom shouldComponentUpdate() method.

[ebower12]

My component doesn't have state, I'm passing it in to the uiSchema as a pure function. It may be worth converting it to a class though if some lifecycle methods could be useful.

[loganvolkers]

It sounds like maybe the problem could be in how formData is pushed into the Form from your AJAX component and less to do with your custom widget.

In complex cases like this, a SSCCE for example on CodeSandbox.io would be very helpful both for you in isolating and understanding what's going on, but also in helping diagnose any bugs that might exist in this library.