Getting a "Too many re-rerenders" error, trying to complete the 5th Challenge of the Front End Development Libraries course

[sbooyah]

My Issue:
I am working on the final challenge of the Front End Development Libraries course, and I have a solution that works. I’m in the process of going through all the user story requirements, but I’ve hit a snag. When I run the challenge’s Test Suite, I end up with an error that says: “Too many re-renders. React limits the number of renders to prevent an infinite loop.” I don’t get this error during my normal use of this app; it only occurs when running the Test Suite, which makes it very difficult for me to figure out what exactly is causing it or when it’s happening.

If you do take a look at my code, you should be able to reproduce the error simply by running the test suit (located in the top-left menu on the project page itself)

My Code:

Break Clock - FCC Challenge 5 - CodeSandbox

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.114 Safari/537.36

Challenge: Build a 25 + 5 Clock

Link to the challenge:

freeCodeCamp.org

[melvinn721]

Hey, did you manage to figure this out? Experiencing the same thing.

[morgansegura]

There is very little to go on based on your description, however sometimes if you try to call a useState variable as a function without emitting the function, you can ‘get too many re-renders error’. Example below. Hope this helps.

// Too many re-renders
import React from 'react

const ExampleFunction = () => {
    const [buttonClick, setButtonClick] = React.useState()
    return (
        <button onClick={setButtonClick()}>Click me</button>
    )
}

// The fix
import React from 'react

const ExampleFunction = () => {
    const [buttonClick, setButtonClick] = React.useState()
    return (
        <button onClick={() => setButtonClick()}>Click me</button>
    )
}