{"action":"opened","issue":{"url":"https://api.github.com/repos/formsy/formsy-react/issues/113","repository_url":"https://api.github.com/repos/formsy/formsy-react","labels_url":"https://api.github.com/repos/formsy/formsy-react/issues/113/labels{/name}","comments_url":"https://api.github.com/repos/formsy/formsy-react/issues/113/comments","events_url":"https://api.github.com/repos/formsy/formsy-react/issues/113/events","html_url":"https://github.com/formsy/formsy-react/issues/113","id":350437723,"node_id":"MDU6SXNzdWUzNTA0Mzc3MjM=","number":113,"title":"Unnecessary calls to validateForm kills performance","user":{"login":"larshelg","id":858422,"node_id":"MDQ6VXNlcjg1ODQyMg==","avatar_url":"https://avatars1.githubusercontent.com/u/858422?v=4","gravatar_id":"","url":"https://api.github.com/users/larshelg","html_url":"https://github.com/larshelg","followers_url":"https://api.github.com/users/larshelg/followers","following_url":"https://api.github.com/users/larshelg/following{/other_user}","gists_url":"https://api.github.com/users/larshelg/gists{/gist_id}","starred_url":"https://api.github.com/users/larshelg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/larshelg/subscriptions","organizations_url":"https://api.github.com/users/larshelg/orgs","repos_url":"https://api.github.com/users/larshelg/repos","events_url":"https://api.github.com/users/larshelg/events{/privacy}","received_events_url":"https://api.github.com/users/larshelg/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-08-14T13:51:17Z","updated_at":"2018-08-14T13:51:17Z","closed_at":null,"author_association":"NONE","body":"When a form is attached/mounted or detached/unmounted formsy calls validateForm not once but many times for each component. This can be seen by debugging into the attachToForm or detachFromForm methods in main.js. \r\n\r\nThis gives terrible performance when navigating from one big form to another. ValidateForm is then called first for every input component in the form you're navigating from and then for every component you're navigating to. For really big forms in Internet Explorer the app just freezes up with \"long execution script error\". \r\n\r\nIt would seem that it should be sufficient to do this once in componentDidMount and componentWillUnmount. \r\nAnd maybe even consider a prop for those who dont need a initial validating when a form mounts/unmounts.\r\n\r\nMonkeypatching like this solves the problem: \r\n\r\nFormsy.prototype.detachFromForm = function (component){\r\n  const componentPos = this.inputs.indexOf(component);\r\n  if (componentPos !== -1) {\r\n    this.inputs = this.inputs.slice(0, componentPos).concat(this.inputs.slice(componentPos + 1));\r\n  }\r\n  NB!!! validateForm is commented out\r\n   //this.validateForm();\r\n  \r\n};\r\n\r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"larshelg"}}