Różnica w przekazaniu funkcji do onClick

Mam dwa przypadki:

onClick={setCounter((prevCounter) => prevCounter + 1)}

onClick={() => setCounter((prevCounter) => prevCounter + 1)}

W pierwszym przypadku funkcja wykonuje się od razu przy renderowaniu komponentu i tym samym zwraca błąd, który informuje, że aplikacja wykonała zbyt dużo re-renderingów. Natomiast w drugim przypadku funkcja wykona się dopiero po kliknięciu w button.

Moje pytanie czy ten pierwszy zapis React traktuje jako wywołanie funkcji, a drugi zapis jako definicje funkcji ?

to, co masz w klamerkach, się transpiluje do JSa.
to tak jakbyś napisał w pierwszym przypadku
setCounter((prevCounter) => prevCounter + 1)
czyli wywołujesz funkcję setCounter
w drugim przypadku
() => setCounter((prevCounter) => prevCounter + 1)
czyli definiujesz funkcję, która wywołuje funkcję setCounter

weź sobie wejdź na jakiś sandboks Babela i zobacz sam jak wygląda JSX po stranspilowaniu do JSa:
https://babeljs.io/repl#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&corejs=3.21&spec=false&loose=false&code_lz=DwEwlgbgBA9gdgYQDZgMYGsC8BvAzgUwBcEYBXOQ_AJwAoaAHK_CE8yqgSikwD4pHmrCtSgBqKAEYOAXygB6HgG4AUKEixEKDDhpdeUAsTLDaDJi2Ps9fARbYjxU2QsVA&debug=false&forceAllTransforms=false&modules=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-2%2Ctypescript&prettier=false&targets=&version=7.21.3&externalPlugins=&assumptions=%7B%7D

czyli w pierwszym przypadku od razu odpalasz funkcję setCounter, czego nie powinieneś ani nie chcesz robić w tym przypadku, tylko chcesz przekazać sam obiekt funkcji do Reacta.

Ja proponuje jednak na początek nauczyć się czystego JS. A potem siadać do frameworków.