Breaking News: Grepper is joining You.com. Read the official announcement!

Rendered more hooks than during the previous rende

Add Answer

Jolly Jay answered on December 20, 2020 Popularity 10/10 Helpfulness 1/10

answer Rendered more hooks than during the previous rende

related rendered more hooks than during the previous render

related Error: Rendered more hooks than during the previous render.

Rendered more hooks than during the previous rende

Comment

Rendered lesser hooks than the previous render.
Rendered more hooks than the previous render.
In both the cases thing can be like you have a conditional statement calling the same function which returns render from different places like both wrapped in a parent return function:

const parentFunc = () => {
    if(case==1)
        return function_a();
    if (case==2)
        return function_b();
}
now function_a() could be a function creating two or one hook suppose useStyle() or anything else

and function_b() could be a function creating no hook.

Now, when parentFunc returns function_a() rendering one hook and function_b() rendering no hook then react will tell you that from the same render function two different renders were returned one with two or one hook and the other with one hook this disparity leads to the error. Error being

less hooks were rendered. And the error is quite obvious.

When cases are reversed and function_b() is returned first cause of the conditionals then react will tell you that from the same render function different renders were returned and error will be .

Rendered more hooks than previous render.

Now, Solution:

Change the code flow like maybe create function_ab() which will ensure all the hooks being used are rendered and in that function:

const function_ab = () => {
    if(case==1)
         return (<div></div>) //or whatever
    if(case==2)
         return (<div>I am 2 </div>) //or whatever
}

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Dec 20 2020

Jolly Jay

0 Answers Avg Quality 2/10

Closely Related Answers

rendered more hooks than during the previous render

Comment

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 
didnt 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>)
}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Dec 04 2022

Enter Name Here

0 Answers Avg Quality 2/10

Error: Rendered more hooks than during the previous render.

Comment

//just move the conditional render after all of the hooks.

  const theme = useTheme();
  if (!isAuthenticated) {
    return <Authentication />;
  }

Popularity 6/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Mar 29 2024

Anant Tiwari

0 Answers Avg Quality 2/10

Rendered more hooks than during the previous rende

Contents

More Related Answers

Rendered more hooks than during the previous rende

Closely Related Answers

rendered more hooks than during the previous render

Error: Rendered more hooks than during the previous render.

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.