Here is an example of 2 buttons with click handlers, one function is created in the component body, the other in the JSX. Is there any performance differences?
function Parent() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={handleClick} />
<button onClick={() => setCount(count + 1)}>Increment Count</button>
</div>
);
}
My understanding is the they are the same, and the function gets recreated on every Parent
re-render. But I’m curious if I’m missing anything. I know I can use useCallback
or other memoizing techniques, but this question is just purely these 2 scenarios.