Solve The Error “rendered more hooks than during the previous render”

React is a widely used JavaScript library for creating interactive UIs. Programmers and developers use it to design different projects. It is a worldwide accepted language that is quite easy to use. Libraries are always designed for providing ease to programmers. When you are working with react, you may experience the error “rendered more hooks than during the previous render”.

This error is quite common, though it seems complex. We help you solve it in a simple way. Check out how you land up in the error warning before proceeding to the solution section

How the error shows up

When you are working on a react project, you get the error warning. This is what you get

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

This error occurs when you try to use the following script

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

This script returns the error message. Check out the solutions to fix it

Solutions To Fix the Error “rendered more hooks than during the previous render”

The error warning appears when the setAllResultsVisible is called within the onClick, the state change will be triggered. It causes the error. Another reason can be the error in the code. We have a few solutions to handle the error

Solution 1 – Move the condition into useEffect

To solve the error efficiently, you need to move the condition into useEffect.

Check out the code as a reference point that returns the error

const Table = (listings) => {

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

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

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

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

Instead, you need to replace it with the below code

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

It eliminates the error warning.

Solution 2 – Change the onClick event

Changing the onClick event with an addition of ()=> can fix the error. You need to add it before setAllResultsVisible. Have a look at the below code

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

It resolves the error.

Conclusion

We have highlighted the solutions to handle the error “rendered more hooks than during the previous render”. You can implement any of the solutions to fix your code.

I hope you find it helpful!