Back in the day, several years before React, I learned to wire events to tables by attaching the listener to the <tbody> and read the true source of the event form the event target. In that way, we have one listener for the entire table, instead of potentially hundreds. I used to have a test that would should have much slower the page load would be if you did the latter.
Flash forward to today. I have written a React datagrid for my company’s platform. While the table is virtualized, it can still have hundreds of cells at any one time. Putting one click listener on the table body makes some things complex that would be simple for each cell if each cell owned the listener. In testing, so far I see no performance issues with doing so. Does anyone know if React has some way of handling this behind the scenes. Is it no longer even an issue without React now?
Advertisement
Answer
The answer from Konrad above was the lead I needed. The answer to my question is that I only think I am adding listeners to each cell, at least when I do it inline in JSX. In reality, React attaches only a few listeners, to the React root node. Event delegation does the rest. The relevant topic to research about such questions is React Event Delegation. (I had trouble even phrasing my concerns in the form of a question.)
See this article and this one, as well as the one Konrad cited, plus this GitHub topic for more information.