CODEWITHSUNDEEP
reactjstypescripterror-handlingrender
Bernardo Rodrigues
Bernardo Rodrigues

Reputation: 1

React: Too many re-renders. React limits the number of renders to prevent an infinite loop

Can Anyone help me please. Basically I am using React with Typescript for a project for school and all of a sudden this error happens and I don't understand why... I tried solving it with a boolean state and a simple Work[], two states and it always spits out the same error: Too many re-renders and I can't imagine why. To the kind soul that saves me, you have my thanks

This is my component

export default function WorkList(props :any) {
   const id = props.id
   const [works, setWorks] = useState<Work[]>()

    useEffect(()=> {
        if(!works){
            Api.fetchFromAPI(
                HTTP_METHOD.GET,
                `/artist/${id}/worksofart?token=${AuthService.getToken()}`,
                new Headers()
            ).then((listOfWorks) => {
                setWorks(listOfWorks)
            })
        }
    }, [works])

    function renderWorks(work: Work) {
        return <WorkPost work={work}/>
    }

    return !works ? (
        <div>
            <h3>Loading works...</h3>
        </div>
    ) : (
        <div className={"work-panel"}>
            <h3>Works Of Art:</h3>
            <div>
                {works.map(renderWorks)}
            </div>
        </div>
    )
}

This is my work object

export class Work {
    public id: string;
    public work_name: string;
    public owner: string;
    public description: string;
    public reviews: number;
    public tags: Array<string>
    public content: string
    public fileExtension: string
    public comments: Array<string>;
    public ups: Array<string>;

    constructor(id: string, work_name: string, owner: string, description: string, reviews: number, tags: Array<string>, content: string, fileExtension: string, commments: Array<string>, ups: Array<string>) {
        this.id = id
        this.work_name = work_name
        this.owner = owner
        this.description = description
        this.reviews = reviews
        this.tags = tags
        this.content = content
        this.fileExtension = fileExtension
        this.comments = commments
        this.ups = ups
    }

}

My current thought on it is that my works array is very large and as a consequence takes a while to finish the setWorks and as it hasn't finished yet, it renders again and again and again. I might be absolutely wrong...

The output is this: Error message Error Output - Console

UPDATE: The error was in the WorkPost component and not here, even tho it said it was here. I had a state that was updating without control or review so it was rendering, updating, rendering, etc. Thanks for all your help!

Upvotes: 0

Views: 294

Answers (1)

Helsh-js
Helsh-js

Reputation: 111

Too many re-renders means you have an infinite loop somewhere. What I would do is: add a default value for works =>

const [works, setWorks] = useState<Work[]>([])

Can you also check the listOfWorks response? Because this could be empty, change the reference of work, retrigger the useEffect callback and start the infinite loop.

Why is it needed to have works as dependency in the useEffect? You could remove this, have an empty list as dependency and have this code run once, after mount.

useEffect(()=> {
        if(!works.length){
            Api.fetchFromAPI(
                HTTP_METHOD.GET,
                `/artist/${id}/worksofart?token=${AuthService.getToken()}`,
                new Headers()
            ).then((listOfWorks) => {
                setWorks(listOfWorks)
            })
        }
    }, [])

Upvotes: 0

Related Questions