Performance React Hooks?

Question

React

1. How does the functional structure and re-creation of handler functions affect memory and performance in React WEB and React Native?

const SomeButton = () => {
    const [count, setCount] = useState(0);
    return <Button onClick = {() => setCount(count + 1)}/>
}

In fact, this leads to the re-creation of the handler functions.
And it's bad practice.
2. How much faster are they (and are they faster) than class components?
3. There is a way to cache handlers through useCallback, but I still ask about this particular case (point 1), since I met when they wrote it this way, with the excuse that it doesn’t hurt performance much.

Answer 1

1. It is clear that the creation of additional functions takes additional time. You will hardly notice the difference in the case of handlers.
2. It all depends on a number of circumstances. If you have nothing to do, then you can try writing benchmarks for different cases. For rendering a list of 1000 simple elements, it will not even be possible to fix the exact difference, since the timers work with a small error, and the count here goes to thousandths of a second and their fractions.
3. Even if you use the useCallback function, the function will still be re-created every render, moreover, when using useCallback, there will be a few additional internal calls. But the example from point 1, if the Button is a functional component, then this is exactly the case when useCallback, it seems, should be used, since it prevents the call of the theoretically more expensive operation - redrawing the Button.