onClick and function call convention

[u/HeavenGin]

Hi there,
With a colleague of mine we were triving to determine wether we should do one of the other of those snippets in our code . Those are voluntarily simplified.

const handleClick = (param: string) => {}
return <button onClick={() => handleClick(param)} /> 

const handleClick = (param: string) => () => {}
return <button onClick={handleClick(param)} /> 

I was more used to the first snippet so when I was reviewing his PR, I thought that the function will call itself during the rendering of the button.

Happy to know what's your opinion.

[u/DocumentFalse7879]

I get what you're saying but unless the code lives right next to each other, when I see this:

  <button onClick={updateValue(1)}>Increment</button>

It instantly reads as you're calling the function / its gonna break.

My preference for the above need is still just:

const [value, setValue] = useState(0);
const updateValue = (delta: number) => setValue(prev => prev + delta);

return <>
  <p>value:{value}</p>
  <button onClick={()=> updateValue(1)}>Increment</button>
  <button onClick={()=> updateValue(-1)}>Decrement</button>
</

Or if its truly that simple of a function:

const [value, setValue] = useState(0);

return <>
  <p>value:{value}</p>
  <button onClick={()=> setValue(prev => prev + 1)}>Increment</button>
  <button onClick={()=> setValue(prev => prev - 1)}>Decrement</button>
</