React, functional components, components, classes, hooks?

Hello.
I want to clarify a few issues.
There is a component, which is represented by a class.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.clickHandler = this.clickHandler.bind(this);
}
clickHandler() {
// Do here something useful
}
render() {
return (
the <div>
<p>{this.props.children}</p>
<button type="button" onClick={this.clickHandler}>Click me</button>
</div>
);
}
}

But I see that the adherents of the functional components of the writing thus
function MyComponent(props) {
const clickHandler = () => {
// Do here something useful
};
return (
the <div>
<p>{props.children}</p>
<button type="button" onClick={clickHandler}>Click me</button>
</div>
);
}

The examples are too simplified. But that's not it.
Isn't the second example is less productive?
In the first case, clickHandler is a method, and in the second case, it is declared directly in the function.
Aren't we going to kolbek be re-evaluated every time the component is redrawn again? For example, when I changed props.

Here is the second question.
Recently in React brought the hooks.
In principle, an interesting thing. Now many components that were required classes, you can do functional.
Honestly, the classes I still seem to be more readable and better structured, but I guess everything is a matter of taste.
And again, how it's productive. Given the fact that virtually all of the logic moves in the body of the function.
And as for the hooks. Well, useState and useEffect all clear. But useCallback a little fezam. More precisely, I'm not sure I understood it correctly.
What applications useCallback in which cases to use and where will that be too much?

Thank you.
March 19th 20 at 08:32
2 answers
March 19th 20 at 08:34
Solution
Hooks, in fact, solve only one problem - the problem of reusing the logic state of the components. If you don't need to use classes if they prefer. In case you have not seen good examples of the use of hooks, rate the capabilities of custom hooks.

useCallback prevents updating child component, in the surrender of handler,. Call useCallback(fn, deps) is equivalent to useMemo(() => fn deps). Whenever you update the parent feature without this wrapper would return a new reference to a function and would trigger the update of the child component. With useCallback will return the old link until at least one of the elements of the array deps.
Thanks for the reply.
But if you go back to my first post (the examples).
In the constructor we do this.clickHandler = this.clickHandler.bind(this);
Thus, the child component, we will always pass the same function reference.
And in a variant with a functional component, we have a function (of colback) will be re-evaluated every time the component is redrawn. I.e., the child component we will each time transmit to the newly created colback.
But as I understand it, if we rewrite the example useCallback, we will escape.
Is it a good idea? Or it will be unnecessary optimization? - caleb.Leannon commented on March 19th 20 at 08:37
March 19th 20 at 08:36
The last 5 years, few people bother on the speed/memory and creates a lot of unnecessary kolbikov as in the classroom and in the functional components. Have tabs in the browser eats a lot of resources and appreciate the convenience/habits of the developer more than the speed and efficiency of the application. In many cases, this approach makes sense.

Class or functional component - a matter of taste, the effectiveness of development identical, and the difference in minimal.

Hooks first came out, over time, will have gained practice using them, crept to the problem (if you will), people will develop best practices and then we can say how it is better than previous approaches.

Find more questions by tags React