Is it possible to hang an event handler on the document in a frequently repeated component?

Question

React

Imagine that we have 30 such components on the page, and in each handler for the document (click)

Answer 1

It all depends on the context of what you are doing. If, for example, this is the same handler, then it is better to move it to the parent. But if, for example, this is some kind of logic that is used inside only each child component separately (isolated from others), then it cannot be taken out in any way. Therefore, the question needs to be supplemented with data about what kind of handler and on what event it is triggered

Answer 2

So that there are 30 identical handlers on the document? What's the point?
Can it be enough to hang one handler from the top-level component? Delegation, all things
The answer to your question - you can, of course, but it's better to look for a more optimized solution