While using useState hook and onClick event in react I get error when calling the function in onClick event

Question

import React,{useState} from 'react';

export function App(props) {
  const [fruit, setFruit ] = useState("apple")

  function settingFruit_1()
  {
    setFruit("mango");
  }

  return ( 
    <div className='App'>
      <h1>{fruit}</h1>
      //why am I getting the error when calling the function like this onClick = {settingFruit_1()}
      <button onClick = {settingFruit_1()}> submit </button> 
      
    </div>
  );
}

Here is the error that I see:

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
    at renderWithHooks (<anonymous>:11510:25)
    at mountIndeterminateComponent (<anonymous>:14733:23)
    at beginWork (<anonymous>:15659:24)
    at HTMLUnknownElement.callCallback2 (<anonymous>:3454:24)
    at Object.invokeGuardedCallbackDev (<anonymous>:3479:26)
    at invokeGuardedCallback (<anonymous>:3513:41)
    at beginWork$1 (<anonymous>:18904:17)
    at performUnitOfWork (<anonymous>:18371:22)
    at workLoopSync (<anonymous>:18308:15)

I know the solution but I am not able to understand why it has to be written like this onClick = {settingFruit_1} — JThind, Apr 28 '22 at 15:02

score 1 · Answer 1 · answered Apr 28 '22 at 15:02

1

onClick Function expects you to pass a reference to the callback that it executes when user click that button. But here you call that function in onClick.

Solution:

Try using below syntax:

<button onClick={settingFruit_1}>submit</button>

answered Apr 28 '22 at 15:02

Rithick

236
1
5

score 1 · Accepted Answer · edited Apr 28 '22 at 15:13

You are invoking the function rather than passing it's reference to the onClick handler

<button onClick = {settingFruit_1}> submit </button> // only pass reference without the ()

Why does this cause infinite rerenders? Because by invoking function directly, you are calling the functions directly, rather than calling after click. This causes rerender => component is set again => function invoked again => setFruits => rerender => .........

While using useState hook and onClick event in react I get error when calling the function in onClick event

2 Answers2