{"action":"created","issue":{"url":"https://api.github.com/repos/jaredpalmer/formik/issues/597","repository_url":"https://api.github.com/repos/jaredpalmer/formik","labels_url":"https://api.github.com/repos/jaredpalmer/formik/issues/597/labels{/name}","comments_url":"https://api.github.com/repos/jaredpalmer/formik/issues/597/comments","events_url":"https://api.github.com/repos/jaredpalmer/formik/issues/597/events","html_url":"https://github.com/jaredpalmer/formik/issues/597","id":316712783,"node_id":"MDU6SXNzdWUzMTY3MTI3ODM=","number":597,"title":"Can't call setState (or forceUpdate) on an unmounted component.","user":{"login":"lookfirst","id":85355,"node_id":"MDQ6VXNlcjg1MzU1","avatar_url":"https://avatars0.githubusercontent.com/u/85355?v=4","gravatar_id":"","url":"https://api.github.com/users/lookfirst","html_url":"https://github.com/lookfirst","followers_url":"https://api.github.com/users/lookfirst/followers","following_url":"https://api.github.com/users/lookfirst/following{/other_user}","gists_url":"https://api.github.com/users/lookfirst/gists{/gist_id}","starred_url":"https://api.github.com/users/lookfirst/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lookfirst/subscriptions","organizations_url":"https://api.github.com/users/lookfirst/orgs","repos_url":"https://api.github.com/users/lookfirst/repos","events_url":"https://api.github.com/users/lookfirst/events{/privacy}","received_events_url":"https://api.github.com/users/lookfirst/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2018-04-23T08:33:24Z","updated_at":"2018-06-06T21:00:26Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"## Bug, Feature, or Question?\r\n\r\nAll of the above. Maybe there is a better way to do what I'm trying to do, which is wrap a material-ui component with a formik Field. =) In my own code, I use a nice re-usable component and TypeScript. I tried to simplify things here.\r\n\r\nPlease see the codesandbox: https://codesandbox.io/s/21jowlv4p\r\n\r\n1. Click the button.\r\n2. Type some text.\r\n3. Hit return.\r\n4. Look in the console.\r\n\r\nSince it is timing related (depends on when the promise executes), if you don't see the error, click the reload button in the sandbox and try again.\r\n\r\n## Current Behavior\r\n\r\nThere doesn't seem to be an easy way to hook into the promise of validateYupSchema. It resolves after the modal is closed and therefore the component has already unmounted and the setState call fails. \r\n\r\nUsing a promise like this doesn't seem like a good idea since promises really should be chained to ensure execution order. Given that onSuccess() could be null as well, that also seems dangerous.\r\n\r\n```\r\nvalidateYupSchema(values, schema).then(\r\n      () => {\r\n        this.setState({ errors: {} });\r\n        if (onSuccess) {\r\n          onSuccess();\r\n        }\r\n      },\r\n      (err: any) =>\r\n        this.setState({ errors: yupToFormErrors(err), isSubmitting: false })\r\n    );\r\n```\r\n\r\nhttps://github.com/jaredpalmer/formik/blob/master/src/Formik.tsx#L390\r\n\r\nThus, this error:\r\n\r\nWarning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.\r\n\r\n## Desired Behavior\r\n\r\nNo errors.\r\n\r\n## Suggested Solutions\r\n\r\nI'm not quite sure yet. I'd say start with doing that promise in another way.\r\n\r\n## Additional Information\r\n\r\n- Formik Version: 1.0.0.beta.2\r\n- React Version: 16.4.0\r\n- TypeScript Version: None\r\n- CodeSandbox Link: https://codesandbox.io/s/10x847p0xl\r\n- OS: OSX 10.13.4 (17E199), Chrome latest."},"comment":{"url":"https://api.github.com/repos/jaredpalmer/formik/issues/comments/395212232","html_url":"https://github.com/jaredpalmer/formik/issues/597#issuecomment-395212232","issue_url":"https://api.github.com/repos/jaredpalmer/formik/issues/597","id":395212232,"node_id":"MDEyOklzc3VlQ29tbWVudDM5NTIxMjIzMg==","user":{"login":"davidsavoie1","id":25533167,"node_id":"MDQ6VXNlcjI1NTMzMTY3","avatar_url":"https://avatars2.githubusercontent.com/u/25533167?v=4","gravatar_id":"","url":"https://api.github.com/users/davidsavoie1","html_url":"https://github.com/davidsavoie1","followers_url":"https://api.github.com/users/davidsavoie1/followers","following_url":"https://api.github.com/users/davidsavoie1/following{/other_user}","gists_url":"https://api.github.com/users/davidsavoie1/gists{/gist_id}","starred_url":"https://api.github.com/users/davidsavoie1/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/davidsavoie1/subscriptions","organizations_url":"https://api.github.com/users/davidsavoie1/orgs","repos_url":"https://api.github.com/users/davidsavoie1/repos","events_url":"https://api.github.com/users/davidsavoie1/events{/privacy}","received_events_url":"https://api.github.com/users/davidsavoie1/received_events","type":"User","site_admin":false},"created_at":"2018-06-06T21:00:26Z","updated_at":"2018-06-06T21:00:26Z","author_association":"NONE","body":"I have the same type of problem. I'm using a form in a popup that I close in my submitHandle's function success callback.\r\n\r\nThe workaround I have for now is to **delay closing the popup for 200 ms** in addition to preventing validation on blur as @lookfirst mentionned. Not pretty, but avoids the error for now. I'd be glad to have a more permanent fix, since validation on blur is quite useful for UX. \r\n\r\n```js\r\nconst formikOptions = {\r\n  mapPropsToValues: () => defaultValues,\r\n  validationSchema: schema,\r\n  handleSubmit({ name }, { props, resetForm }) {\r\n    myMethod({ name }, uiCbHndl({\r\n      onSuccess: () => setTimeout(props.closePopup, 200),\r\n      onEnd: () => resetForm(),\r\n    }));\r\n  },\r\n  validateOnBlur: false,\r\n};\r\n```"}}
{"actor":{"display_login":"davidsavoie1"}}