Switch Statement Causing - React limits the number of renders to prevent an infinite loop

Question

In my React code below, I'm getting an error:

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

If I comment out the switch statement, the error goes away. So, what in this switch statement is causing this? This all started from trying to use the useState.

const UserBillableGoals = () => {

    //Set User
    const { user } = useAuth0();
    const [goal, setGoal] = useState(0);
    const [teamMemberName, setTeamMemberName] = useState("");

    switch (user.email) {
        case "adam@example.com":
        setTeamMemberName("Adam");
        setGoal(0);
        break;
        case "andrew@example.com":
        setTeamMemberName("Andrew");
        setGoal(12000);
        break;
        case "kacye@example.com":
        setTeamMemberName("Kacye");
        setGoal(0);
        break;
        case "gabriela@example.com":
        setTeamMemberName("Gabriela");
        setGoal(17000);
        break;
        case "jazmin@example.com":
        setTeamMemberName("Jazmin");
        setGoal(14000);
        break;
        default:
        setTeamMemberName("No Name Found");
        setGoal(0);
        break;
    }

    
    
    
    return (
    <div>
      
      <div>
        <p>{year}, {month}</p>
        <p>{path}</p>
      </div>
    </div>
  );
}

score 1 · Answer 1 · answered Aug 04 '21 at 05:24

React is reactive, and this is more true with functional components.

Your switch statement is changing the state of the component before it has a chance to render. Every time the state changes, the component has to re-render which triggers the switch statement again.

You can solve this by wrapping the switch with a useEffect:

useEffect(() => {
  switch (user.email) {
    case "adam@example.com":
    setTeamMemberName("Adam");
    setGoal(0);
    break;
    case "andrew@example.com":
    setTeamMemberName("Andrew");
    setGoal(12000);
    break;
    case "kacye@example.com":
    setTeamMemberName("Kacye");
    setGoal(0);
    break;
    case "gabriela@example.com":
    setTeamMemberName("Gabriela");
    setGoal(17000);
    break;
    case "jazmin@example.com":
    setTeamMemberName("Jazmin");
    setGoal(14000);
    break;
    default:
    setTeamMemberName("No Name Found");
    setGoal(0);
    break;
  }
}, []);

This ensures that the state changes only happen after the initial render

Yep, that was it. Thank you so much! – Adam Norton Aug 04 '21 at 05:28 — Adam Norton, Aug 04 '21 at 05:28

Switch Statement Causing - React limits the number of renders to prevent an infinite loop

1 Answers1