Error: Rendered more hooks than during the previous render in Reactjs
Dung Do Tien May 25 2022 562
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.
- E0
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 multipleuseStateanduseEffectcalls.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.
* Type maximum 2000 characters.
* All comments have to wait approved before display.
* Please polite comment and respect questions and answers of others.