Home/ Questions/How to fix “rendered more hooks than during the previous render”
Next
Answered
Maël Reynaud
  • 27
Asked: 2022-05-12T10:12:20+00:00 In:

How to fix “rendered more hooks than during the previous render”

  • 27

. Advertisement .

..3..

. Advertisement .

..4..

As the title says, I am getting the “rendered more hooks than during the previous render” error. How can I fix it so the error goes away? Here is my detail:

const component = (props: PropTypes) => {
 
  const [allResultsVisible, setAllResultsVisible] = useState(false);
 
  const renderResults = () => {
  return (
  <section>
  <p onClick={ setAllResultsVisible(!allResultsVisible) }>
  More results v
  </p>
  {
  allResultsVisible &&
  <section className="entity-block--hidden-results">
  ...
  </section>
  }
  </section>
  );
  };
 
  return <div>{ renderResults() }</div>;
 }
const component = (props: PropTypes) => {
 
  const [allResultsVisible, setAllResultsVisible] = useState(false);
 
  const handleToggle = () => {
  setAllResultsVisible(!allResultsVisible);
  }
 
  const renderResults = () => {
  return (
  <section>
  <p onClick={ handleToggle }>
  More results v
  </p>
  {
  allResultsVisible &&
  <section className="entity-block--hidden-results">
  ...
  </section>
  }
  </section>
  );
  };
 
  return <div>{ renderResults() }</div>;
 }

When I operated it and I received the error text:

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

I appreciate any help from you.

uncaught invariant violation
Share

2 Answers

  1. Best Answer
    Expert

    The cause: This error happens because of within the onClick as the setAllResultsVisible is called, it will trigger state change and result on every render

    The solution:  Before setAllResultsVisible, you should change your onlick event add()=> 

    
<p onClick={() => setAllResultsVisible(!allResultsVisible) }>
    More results v
</p>

    • 23

  2. The same problem was faced by me. This is what I did: 

    const Table = (listings) => {

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

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

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

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

    The problem was that the component returned before the render was finished and the useEffect failed to run. The isLoading state was changed and the useEffect ran. I received an error message stating that the hook had been rendered more times than before.

    It was a simple fix: 

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

Leave an answer

You must login to add an answer.

Need An Account,