The first rule of all best practices in programming is keep it simple. The shorter the code is, generally, the easier it is to understand and reuse. This holds true in React and having two small components that do one thing, and one thing only, is usually way better than having a larger component that needs to handle both of those responsibilities.
Without experience in React or similar libraries/frameworks we usually underestimate just how small the components should be.
simple app mock
And here's how guys at Facebook would split it into components:
simple app components
It this too much? Probably. Way to much? Definitely not!
There's no arbitrary number of lines that make the component too big. It comes down to intuition and experience, but try to ask the following questions:
- what does the component do? If your answer is something along the lines of
it does A and B, you probably should split it into two components that do
- can I use this code somewhere else? If the answer is yes, then consider extracting the reusable piece into separate component.
- is this going to be hard to test? Again, if you've answered yes, split into simpler components.
And when in doubt... create a new component!