How to elegantly identify whether a text-truncate has occurred in React?

I am currently using useEffect to compare scrollSize and clientSize, and optimize the render using memoization. I need to address performance issues, as there may be cases where I have hundreds of components on my page that need to be checked. Truncation can occur at different times for each component, depending on the length of the string. I believe I have written it correctly, but I am looking for the most optimal solution. Maybe someone has experience with this. BTW, if CSS scroll-state() container queries could be used for this case, it would be perfect. Thanks.
Was this page helpful?