Question 73876 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Error => Too many re-renders. React limits the number of renders to prevent an infinite loop – Reactjs

Hello, EveryOne

I’m Learning ReactJs.

I’m getting this error whenever I upadate isOpen state.

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

here is code

import React, { useState } from "react";
import { slide as Menu } from "react-burger-menu";
import { Link } from "react-router-dom";
import { useLocation } from "react-router-dom";
import "./SideBar.css";

const withLocation = (SideBar) => (props) => {
    const location = useLocation();
    return true ? <SideBar {...props} location={location} /> : "";
};

const SideBar = () => {
    const [isOpen, setIsOpen] = useState(true);

    const location = useLocation();
    const homeClass = location.pathname === "/" ? "active-item" : "";
    const aboutClass = location.pathname === "/about" ? "active-item" : "";
    const projectClass = location.pathname === "/projects" ? "active-item" : "";
    const skillsClass = location.pathname === "/skills" ? "active-item" : "";
    const contactClass = location.pathname === "/contact" ? "active-item" : "";
    
    return (
        <Menu isOpen={isOpen}>
            <Link
                to='/'
                onClick={setIsOpen(false)}
                className={`menu-item ${homeClass}`}>
                Home
            </Link>
            <Link to='/about' className={`menu-item ${aboutClass}`}>
                About
            </Link>
            <Link to='/projects' className={`menu-item ${projectClass}`}>
                Projects
            </Link>
            <Link to='/skills' className={`menu-item ${skillsClass}`}>
                Skills
            </Link>
            <Link to='/contact' className={`menu-item ${contactClass}`}>
                Contact
            </Link>
        </Menu>
    );
};
export default withLocation(SideBar);

I don’t know how to solve this Problem.

Tags:

4

Answers


  1. 0

    onClick={setIsOpen(false)} will be calling everytime you render your page. Setting a state will render your page too. What that mean is you are creating infinite loop.

    onClick={() => setIsOpen(false)}

    will solve your problem.

    Login or Signup to reply.
  2. 0

    The problem is your button that fires the setState immediately causing too many re-renders,

    Replace

           <Link
            to='/'
            onClick={setIsOpen(false)}
            className={`menu-item ${homeClass}`}>
            Home
      </Link>

    To

           <Link
            to='/'
            onClick={() => setIsOpen(false)}
            className={`menu-item ${homeClass}`}>
            Home
      </Link>

    if you want to read about more solutions check out this article

    Login or Signup to reply.
  3. 0

    change your code on Link as

           <Link
          to='/'
          onClick={()=>setIsOpen(false)}
          className={`menu-item ${homeClass}`}>

    when we call a function directly without arrow function, it calls automatically when it renders first time. and are using setState in in that function so component re-renders after executing first time and then again and again because of state update.

    Login or Signup to reply.
  4. 0

    The problem is with this line:

    onClick={setIsOpen(false)}

    When setting attributes like this the code inside the brackets is executed during rendering and the value of the attribute is set to the result.

    When calling setIsOpen the state is updated and this triggers a new render, which in turn callse setIsOpen again and triggers another render etc.

    What you want is the set the onClick handler to the function that should run when the link is clicked, to do that you should do this:

    onClick={() => setIsOpen(!isOpen)}

    This will not call setIsOpen untill the link is clicked. As executing the code inside the brackets will not actually call setIsOpen but instead returns a function that will call setIsOpen when the function is called.

    Setting handlers can be a bit confusing at first, but remember that when setting handlers like this you want to set the value to a function and not the result of calling the function.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search