Check mounted state before using setState in onSubmit

[chrisngobanh]

• Version: Latest

uniforms/packages/uniforms/src/BaseForm.tsx

Lines 261 to 278 in a103efd

	onSubmit(event?: SyntheticEvent) {
	if (event) {
	event.preventDefault();
	event.stopPropagation();
	}
	this.setState(state => (state.submitted ? null : { submitted: true }));
	const result = this.props.onSubmit(this.getModel('submit'));
	if (!(result instanceof Promise)) {
	return Promise.resolve();
	}
	this.setState({ submitting: true });
	return result.finally(() => {
	this.setState({ submitting: false });
	});
	}

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

[radekmie]

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: facebook/react#22114.