The only approach that has worked for me to avoid such large re-renders is to keep the state “outside” the component tree. Then, access that state only in the components that need it. Now only the components that actually use the state re-render.
I have used RxJS for this. Jotai should also work well.
Unless you have a huge list of items aka a table rerendered, this shouldn’t be an issue. So my suggestion is to keep calm, until your users actually start sending real complains.
50-100 lines and I start breaking things up. I like tidy little files with a single purpose. It’s also easier to test little components. I find it easier to maintain performance this way as well.
Yes, you should break them apart even if there aren’t performance issues. First off, React re-renders from the node and everything below it (depends) when a node state changes. So you want to encapsulate state to small islands because of that. You can hack around this using useRef and managing it by yourself in your component, but then you don’t really need react, or at least you’re not using it in the opinionated way it’s supposed to be used.
Beyond that, even if it wasn’t a performance issue, working with components that are several thousands sloc must be an absolutely horrendous dx.
