What is the syntax for click events in React Hooks for passing arguments
This is perfectly suitable way to do this:
<Button onClick={() => handleClick(myValue)}></Button>
The only downside is that onClick
prop has new value on each render and triggers a re-render of child component - even if it's pure. This may or may not cause performance problems depending on specific component; this will be a problem if there are many Button
instances or their re-renders are expensive.
If a value is static, a callback can be defined as constant function outside a component:
// outside function component
const myValue = "Hello World";
const myHandleClick = () => handleClick(myValue);
...
// inside function component
<Button onClick={myHandleClick}></Button>
If a value is dynamic and is available only inside a component, a function can be defined inside a component and memoized with useMemo
or useCallback
hook (as another answer already mentions):
// inside function component
const myHandleClick = useCallback(() => handleClick(myValue), [myValue]);
...
<Button onClick={myHandleClick}></Button>
The first and last versions in your question both create a new function, so if you can get away with just giving the function handleClick
to a prop, you should do that.
If you need to pass arguments to the function you can still use your first version in function components, but since this
is not used, you can just set it to null
.
<Button onClick={handleClick.bind(null, myValue)}></Button>