Do you know that it’s good to write any React Utility as a unmarried React
Part? There is completely not anything technically preventing React from striking
your whole software into one massive element. Your serve as could be HUGE.
There’d be a TON of hooks for state and side-effects, however it is utterly conceivable.

In the event you attempted this regardless that you’ll face a couple of issues:

1. Efficiency would most certainly undergo: Each state alternate leads to a re-render
   of all the software.
2. Code sharing/reusability could be… no longer simple. A minimum of in case you made it a
   elegance element, which you may have to do in case you sought after to make use of
   componentDidCatch to deal with runtime mistakes. In the event you have been allowed to make use of
   react-error-boundary so it’s good to use hooks, then it might be
   significantly more straightforward. However… I digress…
3. State could be a problem: Understanding which items of state and tournament handlers
   went with what portions of JSX would make your head harm 😬 and lead to a couple
   laborious to trace down insects 🐜 (That is one advantage of the separation of
   considerations).
4. Trying out could be 100% integration:
   No longer essentially an altogether unhealthy factor, however it might
   be beautiful difficult to check edge instances and stay issues remoted to the portions
   that you are seeking to take a look at, so you may undergo big-time from over-testing
   (which is a not unusual mistake in E2E trying out).
5. Running in combination at the codebase with more than one engineers would simply be
   horrible. Are you able to believe the git diffs and merge conflicts?!
6. The use of 3rd birthday celebration element libraries could be… ummm… not possible? If
   we are writing the whole thing as a unmarried element 3rd birthday celebration libraries is at
   odds with that purpose! And despite the fact that we allowed the use of 3rd birthday celebration parts,
   what about HOCs like react-emotion? No longer allowed!
   (But even so, you must use the css prop
   anyway 😉).
7. Encapsulating crucial abstractions/APIs in a extra declarative element
   API would not be allowed both which means that the crucial API could be
   littered all over the lifecycle hooks of our one massive element, main
   to tougher to observe code. (Once more, except you are the use of hooks, through which case
   it’s good to team related hooks in combination, making it more straightforward to regulate, however
   nonetheless somewhat of a nightmare).

Those are the explanations that we write customized parts. It permits us to resolve
those issues.

I have had a query on my AMA for some time:
Perfect techniques/patterns to separate app into parts.
And that is my resolution: “Whilst you revel in some of the issues above, that is
whilst you spoil your element into more than one smaller parts. NOT BEFORE.”
Breaking a unmarried element into more than one parts is what is known as
“abstraction.” Abstraction is superior, however
each abstraction comes with a price, and you have got to be
conscious about that value and the advantages sooner than you are taking the plunge

Duplication is some distance less expensive than the flawed abstraction.
— Sandi Metz

So I do not thoughts if the JSX I go back in my element serve as will get in point of fact lengthy.
Needless to say JSX is only a bunch of JavaScript expressions the use of the
declarative APIs given via parts. No longer an entire lot can move flawed with code
like that and it is a lot more straightforward to stay that code as it’s than breaking out
issues into a number of smaller parts and get started
Prop Drilling all over the place.

Conclusion

So be at liberty to get a divorce your parts into smaller ones, however do not be afraid
of a rising element till you get started experiencing actual issues. It is WAY
more straightforward to handle it till it must be damaged up than handle a pre-mature
abstraction. Just right good fortune!