57

React Hooks documentation says to not call Hooks inside loops, conditions, or nested functions.

I understood that the order of execution was important so React can know which state corresponds to which useState call. Given that, it's obvious that a hook cannot be called inside a condition.

But I don't see what is the problem if we call useState inside a loop where the number of iterations doen't change over the time. Here is an example :

const App = () => {
  const inputs = [];

  for(let i = 0; i < 10; i++) {
    inputs[i] = useState('name' + i);
  }

  return inputs.map(([value, setValue], index) => (
    <div key={index}> 
      <input value={value} onChange={e => setValue(e.target.value)} />
    </div>
  ));
}

export default App;

Is there a problem with this code above ? And what is the problem of calling useState inside a nested function, if this function is called on every render ?

1 Answer 1

45

The reference states the actual cause,

By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

and provides the example that shows why this is important.

Loops, conditions and nested functions are common places where the order in which hooks are executed may be disturbed. If a developer is sure that a loop, etc. is justified and guarantees the order then there's no problem.

In fact, a loop would be considered valid custom hook if it was extracted to a function, a linter rule can be disabled where needed (a demo):

// eslint-disable-next-line react-hooks/rules-of-hooks
const useInputs = n => [...Array(n)].map((_, i) => useState('name' + i));

The example above won't cause problems but a loop isn't necessarily justified; it can be a single array state:

const App = () => {
  const [inputs, setInputs] = useState(Array(10).fill(''));
  const setInput = (i, v) => {
    setInputs(Object.assign([...inputs], { [i]: v }));
  };

  return inputs.map((v, i) => (
    <div key={i}> 
      <input value={v} onChange={e => setInput(i, e.target.value)} />
    </div>
  ));
}
15
  • 22
    so the sentence Don’t call Hooks inside loops, conditions, or nested functions. is wrong. If the order is respected, we can call hooks inside loops Dec 23, 2018 at 20:30
  • 1
    That's correct. It's ok as long as i < 10 condition leaves no space for errors. Dec 23, 2018 at 20:33
  • 1
    There were mismatched parentheses. It works in other respects, stackblitz.com/edit/react-d1atmc Dec 23, 2018 at 20:36
  • 1
    As for Object.assign, it's perfectly ok with arrays. It's a one-liner for immutable state that could be written as newInputs = [...inputs]; newInputs[i] = v; setInputs(newInputs). I provided a fix for uncontrolled inputs. Dec 23, 2018 at 20:41
  • 1
    @UAvalos What does 'not run' mean? The answer contains workable code. If your case differs, consider asking a question and providing stackoverflow.com/help/mcve that can replicate your problem. Aug 9, 2019 at 6:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.