ReactJS: Too many re-renders in function

Question

I am trying to make a small function, which makes a likable Button. My function should work, but the error I get is too many re-renders (even tough the setState only gets called onClick) Code below:

    function ClickMeToLike(){
  const [isLiked, setIsLiked] = useState(false);

  return (
    <Col><p>
    {
    isLiked ?
    <Icon.Heart onClick={setIsLiked(true)}/> :
    <Icon.HeartFill onClick={setIsLiked(false)}/>
    }
    </p></Col>
  )
}

score 1 · Accepted Answer · answered Jan 19 '21 at 22:26

1

you need to use an arrow function in your onClick

try this

onClick = {() => setIsLiked(true)}

best practice is to use what the answer above me is though and define a separate function to handle your clicks

answered Jan 19 '21 at 22:26

wjpayne83

192
1
11

Thanks for the answer! What's the difference though? – Jan 19 '21 at 22:28
1

If Arrow functions are used in render method, then they create a new instance everytime render is called just like how bind would work. – wjpayne83 Jan 19 '21 at 22:37
https://stackoverflow.com/questions/48699573/correct-use-of-arrow-functions-in-react this is a great read to understand what I am talking about – wjpayne83 Jan 19 '21 at 22:38
Oh! Thanks! Very nice of you to help me :) – Jan 19 '21 at 22:41
no worries! I am in the process of learning react as well..... so this fixed your issue?? – wjpayne83 Jan 19 '21 at 22:42
Yes it luckily did – Jan 20 '21 at 09:45

jaesle · Answer 2 · 2021-01-19T22:51:02.537

0

Yes, you shouldn't handle clicking inside a return. You need to define a separate function for handling the click.

function ClickMeToLike(){
  const [isLiked, setIsLiked] = React.useState(false);

  onClick = () => setIsLiked(!isLiked);
  
  return (
    <div>
      <button onClick={onClick}>Button</button>
      {isLiked?"clicked":"not clicked"}
    </div>
  )
}

edited Jan 19 '21 at 22:51

answered Jan 19 '21 at 22:26

jaesle

548
4
14

So the problem is the inline-if? – Jan 19 '21 at 22:27

ReactJS: Too many re-renders in function

2 Answers2