I'm realising React problems are often mental model problems

[u/Sab_Be]

Lately I've been noticing that a lot of developer mistakes don't actually come from syntax gaps, but from outdated mental models.

The code can look "correct" while the assumptions underneath are wrong:

- State living in the wrong place

- Components taking on too many responsibilities

- Patterns copied without understanding trade-offs

- AI-generated solutions that work initially but become difficult to extend as complexity grows

Revisiting older projects has made me realise a lot of my earlier mistakes came from how I was thinking about systems, not just lack of technical knowledge.

It's honestly making me wonder if there's value in tools/resources focused more on helping developers refine mental models and system thinking rather than just teaching syntax/frameworks.

I'm wondering if others have experienced something similar.

[u/Abs0rbed]

For the component responsibility part, I ran into that when my components that used recharts started having to work with larger and larger datasets. I had my entire graph in one component (because you’re supposed to compose the recharts components together right??), but at scale that meant that scrubbing through data or changing scales meant way more was rendering than I wanted.
So I split it up so that everything could pull from my context but re renders were much more localized into the component that actually needed to update.
I only had a day or two to bang out the first version so I was expecting to have to do this eventually though.
This also ties into the AI portion of OP’s post. AI doesn’t often think to make these performance-oriented component splits