Great write up! I realize there’s no one answer to this question, and as always, ‘it depends’, but when making responsive components, at what point do you break a component into two components — one for mobile ish sizes, and one for desktop ish sizes, vs having a lot of complex CSS and ‘conditional’ HTML in one component?

I was just making a header for a website (exciting!) and the desktop header is extremely simple and can be a dumb functional component. The mobile header adds some HTML and child components, resizes, reformats, needs an open/closed state, etc.

For the sake of debugging and maintainability, it seems like mobile is adding too much complexity to the desktop version, and the desktop version doesn’t seem to make sense among the mobile code. It’s just a lot of CSS and HTML in the same file that becomes a little harder to make sense of.

But for the sake of performance, components mounting, etc. it would be a sacrifice to break this up into a container header with the two children and add additional work for React.

I’m just curious if you’ve hit this problem, how you generally solve it and why? Thanks!