Why can’t React Hooks be called inside loops or nested function?

by

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>
  ));
}

More Related Contents:

  1. State not updating when using React state hook within setInterval
  2. Make React useEffect hook not run on initial render
  3. Push method in React Hooks (useState)?
  4. React useEffect in depth / use of useEffect?
  5. Is useState synchronous? [duplicate]
  6. Wrong React hooks behaviour with event listener
  7. React hooks – right way to clear timeouts and intervals
  8. How to call loading function with React useEffect only once
  9. React Hooks useState() with Object
  10. How to use componentWillMount() in React Hooks?
  11. Is it possible to share states between components using the useState() hook in React?
  12. react useEffect comparing objects
  13. React useState hook event handler using initial state
  14. Multiple calls to state updater from useState in component causes multiple re-renders
  15. What’s the difference between `useRef` and `createRef`?
  16. React useEffect causing: Can’t perform a React state update on an unmounted component
  17. How to programmatically clear/reset React-Select?
  18. How does JavaScript mechanism behind react hooks work?
  19. What is useState() in React?
  20. React – useState – why setTimeout function does not have latest state value?
  21. What does useCallback/useMemo do in React?
  22. React Hooks useState+useEffect+event gives stale state
  23. How to add “refs” dynamically with react hooks?
  24. Do we still need functional setState way in react hooks?
  25. Proper way of using React hooks + WebSockets
  26. How to set initial state for useState Hook in jest and enzyme?
  27. useMemo vs. useEffect + useState
  28. Equivalent to componentDidUpdate using React hooks
  29. Updating state to the same value directly in the component body during render causes infinite loop
  30. React Hooks render twice

Leave a Comment