How to use useState and useEffect over array

Question

In the code below, I have a few textareas where the user should input jsons.

I tried to use and array (well, object with numeric keys, just for the ease from rest operator assignment), and I also wanted to avoid parsing both JSONs at every change of either.

It works well, except that for the first render, I get validation only on the second json. I am pretty sure it comes down to scope, with old values being stored in the useEffect, but I added the callback versions of setErrors and that didn't work.

What am I doing wrong, and what is the right pattern for this?

PS: I intend to move each textarea into individual components of course, but would like to understand what is wrong here first.

 const [jsons, setJsons] = useState<{ [k: number]: string }>({ 0: '', 1: '' }); const [containers, setContainers] = useState<{ [k: number]: object }>({ 0: {}, 1: {} }); const [errors, setErrors] = useState<{ [k: number]: string }>({ 0: '', 1: '' }); const useContainerEffect = (index: number) => { useEffect(() => { let container = {}; try { container = JSON.parse(jsons[index]); setErrors(() => ({...errors, [index]: '' })) } catch (e) { setErrors(() => ({...errors, [index]: VALUE_IS_NOT_JSON })) } setContainers(() => ({...containers, [index]: container })) }, [jsons[index]]); } useContainerEffect(0); useContainerEffect(1); const jsonInputChange = (e: HTMLTextAreaElement, i: number) => { setJsons({...jsons, [i]: e.value }) }

Answer 1

Try using functional form of useState to set your errors. Also it's a good practice not to use complex dependencies in dependency array, so they can be statically checked:

  const useContainerEffect = (index: number) => {
    useEffect(() => {
      let container = {};
      try {
        container = JSON.parse(jsons[index]);
        setErrors((err) => ({ ...err, [index]: '' }));
      } catch (e) {
        setErrors((err) => ({ ...err, [index]: 'VALUE_IS_NOT_JSON' }));
      }
      setContainers(() => ({ ...containers, [index]: container }));
    }, [index]);
  };