uniforms icon indicating copy to clipboard operation
uniforms copied to clipboard

Check `mounted` state before using setState in onSubmit

Open chrisngobanh opened this issue 3 years ago • 1 comments

  • Version: Latest

https://github.com/vazco/uniforms/blob/a103efdd8724e9f9794ff3ecab776bb9559f728d/packages/uniforms/src/BaseForm.tsx#L261-L278

In BaseForm's onSubmit method, there may be instances where calling props.onSubmit would cause the component to be unmounted (e.g. if an API call is successful, navigate to a different page; On failure, error boundary catches it and shows an error page). In this scenario, a Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. error would be thrown when the setState is called.

A quick fix to this issue would be to check this.mounted before calling setState. Another fix would be to bring back the onSubmitSuccess and onSubmitFailure props to be called after all setStates and instruct the consumer to put their logic in here that would result in the form component being unmounted

chrisngobanh avatar Jul 28 '22 20:07 chrisngobanh

Hey @chrisngobanh, and thanks for the report! Agreed, we should add a check for the component being mounted there (we already have it, so it's going to be easy). Maybe you'd like to file a PR for that?

Also, heads up: https://github.com/facebook/react/pull/22114.

radekmie avatar Aug 09 '22 07:08 radekmie