Uncaught Invariant Violation: Rendered more hooks than during the previous render

by

I faced the same issue. What I was doing was something like this:

const Table = (listings) => {

    const {isLoading} = useSelector(state => state.tableReducer);

    if(isLoading){
        return <h1>Loading...</h1>
    }

    useEffect(() => {
       console.log("Run something")
    }, [])

    return (<table>{listings}</table>)
}

I think what was happening was that on the first render, the component returned early and the useEffect didn’t run. When the isLoading state changed, the useEffect ran and I got the error – the hook rendered more times than the previous render.

A simple change fixed it:

const Table = (listings) => {
    
    const {isLoading} = useSelector(state => state.tableReducer);
        
    useEffect(() => {
        console.log("Run something")
    }, [])
    
    if(isLoading){
        return <h1>Loading...</h1>
    }
    return (<table>{listings}</table>)
}

More Related Contents:

  1. React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
  2. How can I use multiple refs for an array of elements with hooks?
  3. React useEffect in depth / use of useEffect?
  4. Is useState synchronous? [duplicate]
  5. React hooks – right way to clear timeouts and intervals
  6. Invalid hook call. Hooks can only be called inside of the body of a function component
  7. React Hooks useState() with Object
  8. Can I set state inside a useEffect hook
  9. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  10. Where can I make API call with hooks in react?
  11. Multiple calls to state updater from useState in component causes multiple re-renders
  12. What’s the difference between `useRef` and `createRef`?
  13. How can I force a component to re-render with hooks in React?
  14. Executing async code on update of state with react-hooks
  15. Why React Hook useState uses const and not let
  16. How to change the value of a Context with useContext?
  17. How to prevent re-rendering of components that have not changed?
  18. How target DOM with react useRef in map
  19. How to programmatically clear/reset React-Select?
  20. React Hooks Error: Hooks can only be called inside the body of a function component
  21. React hooks: call component as function vs render as element
  22. React hooks useState setValue still rerender one more time when value is equal
  23. React Hooks useState+useEffect+event gives stale state
  24. How to add “refs” dynamically with react hooks?
  25. Why can’t React Hooks be called inside loops or nested function?
  26. How to set initial state for useState Hook in jest and enzyme?
  27. useMemo vs. useEffect + useState
  28. TypeError dispatcher.useState is not a function when using React Hooks
  29. useState hook, setState function. Accessing previous state value
  30. React Hooks render twice

Leave a Comment