Resolve React Hook useEffect warning

[Xtrah]

Several places in the code has an ESLint warning react-hooks/exhaustive-deps that should be resolved. Run npm run check in the project root folder to find each instance.

warning React Hook useEffect has missing dependencies...

[eivindkopperud]

I've had a look at this.

An example on how to fix it

For example, in ApplicationForm.tsx we have the following code:

	useEffect(() => {
	  if (form.values.text.length) {
		  form.validateField('text')
	  }
	  if (form.values.main_board_text.length) {
		  form.validateField('main_board_text')
	  }
	}, [form.values.text, form.values.main_board_text])

which gives a such warning. This can be fixed by changing it to:

	useEffect(() => {
		const validateForm = () => {
			if (form.values.text.length) {
				form.validateField('text')
			}
			if (form.values.main_board_text.length) {
				form.validateField('main_board_text')
			}
		}
		validateForm()
	}, [form.values.text, form.values.main_board_text])

See this stack overflow for reference

Another example on how to fix it

Use // eslint-disable-next-line react-hooks/exhaustive-deps to ignore the warning

Discussion

I don't really know if it has a practical consequenses having it as we have it? The first option seems more cluttered. On the other hand, it would be nice to summarize what the useEffect actually does, as they currently have a lot of code in them. Thoughts? I think the first option might be the way to go, if we're able to give meaningful names to the functions.