Are React components with many lines of code less performant?

I just watch this video Are Your React Components Too BIG?
He shows how a big component rerenders the entire page on every click.
CleanShot 2024-04-30 at 16.51.08

I do use many big Rescript React components of thousands of lines of code. It saves me a lot of work in prop drilling and other tedious things.

I do notice that the re-renders are seemingly small on my machine, less than 8ms (throttling down 6X my M3 macbook).

So which is the advice for this? should i break them apart by default or just break them when there are performance issues?

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.

1 Like

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.

1 Like

In a production scenario where there are of course budget and time constraints, this is also sound advice.

1 Like

that’s a lot of time in thinking about names for components and prop drilling everywhere.