Prop (settings) changes do not reflect in behavior changes

[beaucollins]

When using the FlatfileButton component, changing the props is not reflected in changed behaviour.

Example:

cons Foo = () => {
  const [bar, setBar] = React.useState('');

  return (
    <>
      <input value={bar} onChange={(e) => setBar(e.target.value)} />
      <FlatfileButton settings={{ bar }} />
    </>
  );
}

If bar changes we expected the use of the FlatfileButton to use the latest settings provided to it via its props. However it only ever uses the settings with the initial state value of "" (empty string).

Looking at the implementation of FlatfileButton, the useEffect hook is never invalidated because it has an empty dependency array [] which means the FlatfileImporter instance will never change after the initial render.

react-adapter/src/components/FlatFileButton.tsx

Line 64 in 625e9fe

const tempImporter = new FlatfileImporter(licenseKey, settings, customer);

Our workaround was to set the key based on our bar state which causes the component instance to get garbage collected by React's render pass.

  return (
    <>
      <input value={bar} onChange={(e) => setBar(e.target.value)} />
      <FlatfileButton key={bar} settings={{ bar }} />
    </>
  );

[beaucollins]

After installing the eslint-plugin-react-hooks plugin the problem becomes more apparent (see #26):

./src/components/FlatFileButton.tsx
  96:6  warning  React Hook useEffect has missing dependencies: 'customer', 'fieldHooks', 'licenseKey', 'mountUrl', 'onBeforeFetch', 'onInteractionEvent', 'onRecordChange', 'onRecordInit', and 'settings'. Either include them or remove the dependency array. If 'onRecordChange' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps

[brentkulwicki]

Thanks for reporting this. This will actually take a new method addition to the underlying product to support (which we have on the product roadmap currently).