React useEffect warning to put missing dependency. But dependency value changes in the hook

1
votes

I want to change the value of formStepTouched when the value for step changes, so I am using useEffect. But useEffect throws a warning that its missing dependency of formStepTouched. As that is the value that's changing, putting that in the dependency array would cause infinite calls.

 const [step, setStep] = useState(0);
 const [formStepTouched, setFormStepTouched] = useState(
    Array(childrenArray.length)
      .fill(false)
      .map((_, idx) => idx === 0)
 )

 useEffect(() => {
    const newFormStepTouched = [...formStepTouched];
    newFormStepTouched[step] = true;
    setFormStepTouched(newFormStepTouched);
  }, [step]);

Please refer to the codesandbox link below: https://codesandbox.io/s/brave-gould-ymjt0?file=/src/App.js

As you can see the demo works perfectly however an error message is shown. If the dependecy is added useEffect will be called infinitely.

How to get rid of the error message.

2
reactjsreact-hooksuse-effect
Is there a closing bracket missing for useState in the snippet above? - lotype
could you please provide an example inside codesandbox? - phen0menon
Yes a closing bracket was missing, that has been fixed. Link with the codesandbox demo has been added. - dracarys

2 Answers

1
votes

You can pass a callback to state setter:

const { useEffect, useState } = React;

const App = () => {
  const [step, setStep] = useState(0);
  const [formStepTouched, setFormStepTouched] = useState(
    Array(5)
      .fill(false)
      .map((_, idx) => idx === 0)
  );

  useEffect(() => {
    //pass a callback to state setter
    setFormStepTouched((formStepTouched) => {
      if (formStepTouched[step] === true) {
        //nothing to change
        return formStepTouched;
      }
      return formStepTouched.map((s, i) =>
        i === step ? true : s
      );
    });
  }, [step]);

  return (
    <div>
      <button onClick={() => setStep(step + 1)}>
        nex step
      </button>
      <div>
        <pre>
          {JSON.stringify(formStepTouched, undefined, 2)}
        </pre>
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
1
votes
   useEffect(() => {
    setFormStepTouched(prevState =>  {
      const newFormStepTouched = [...prevState]
      newFormStepTouched[step] = true
      return newFormStepTouched
    });
  }, [step]);

The linter is telling you that have an external dependency that may change, you can read more here