разница между {foo ()} и {foo}

Question

Я столкнулся с выражением JSX, когда пользователь нажимает кнопку, функция должна выполняться. Я хочу знать разницу между ссылками на функцию и вызовом функции с помощью '()'

Например, когда использовать что?

1)

       <button onClick={foo}>Something here</button>

2)

       <button onClick={foo()}>Something here</button>

и функция foo

       const foo = () => {
          console.log('something here');            
        } 

Answer 1

Использование

<button onClick={foo()}>Something here</button>

приведет к вызову функции foo каждый раз при рендеринге компонента.

Использование

<button onClick={foo}>Something here</button>

будет вызывать ее только при нажатии кнопки.