Error: Rendered more hooks than during the previous render in Reactjs

Dung Do Tien May 25 2022 57

Hello you guys. I am learning about useEffect and useState in ReactJs. I try to create a small Counter app, it helps me count values after clicking a button. I think it is very simple, like this:

CountApp.tsx

 import React, { useEffect, useState } from 'react';

export default function CountApp() {
  const [counter, setCounter] = useState(0);

  if (counter > 0) {
    useEffect(() => {
      console.log('count: ' + counter);
    });
  }

  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>Click counter</button>
      <h1>Total count: {counter}</h1>
    </div>
  );
} 

index.tsx

 import * as React from 'react';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import CountApp from './News';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <CountApp />
  </StrictMode>
);

But when I run the app, it threw an exception Error: Rendered more hooks than during the previous render.

 Error: Rendered more hooks than during the previous render.
    at updateWorkInProgressHook (react-dom.development.js:16377:13)
    at updateEffectImpl (react-dom.development.js:16933:14)
    at updateEffect (react-dom.development.js:16964:10)
    at Object.useEffect (react-dom.development.js:17756:14)
    at Object.useEffect (react.development.js:1632:21)
    at CountApp (News.tsx:28:17)
    at renderWithHooks (react-dom.development.js:16175:18)
    at updateFunctionComponent (react-dom.development.js:20387:20)
    at beginWork (react-dom.development.js:22430:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:14)

Here are some packages that are installed in my app:

 @types/react 18.0.8
@types/react-dom 18.0.2
axios 0.27.2
react 18.1.0
react-dom 18.1.0

Please help me if you know any solutions.

Thanks in advance.

Have 1 answer(s) found.
  • E

    Eslam Ali May 25 2022

    You need to know a bit about React Hook.

    Only Call Hooks at the Top Level
    Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. 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.

    It means, please change:

     if (counter > 0) {
        useEffect(() => {
          console.log('count: ' + counter);
        });
    }

    To

     useEffect(() => {
      if (counter > 0) {
      console.log('count: ' + counter);
       }
    });

    And your issue will be solved.

Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips

X Close