Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.Sign up
Best ways/patterns to split app into components #399
I answered this question in my newsletter today: https://buttondown.email/kentcdodds/archive/ebc5ac2c-07bf-4e07-8a2b-fe131fe573e0
Here's a copy/paste of the whole thing:
When to break up a component into multiple components
At what point does it make sense to break a single component into multiple components?
Hey friends, one quick thing before this newsletter, I'm giving a live and in person workshop in Portland next week right before ChainReact. Ask your boss if they'll pay for you to go get better at React. They probably would love for you to attend this workshop :) We'll be going over:
Ok, now on to our newsletter!
Did you know that you could write any React Application as a single React Component? There's absolutely nothing technically stopping React from putting your entire application into one giant component. You'd have a HUGE
If you tried this though you'd face a few problems:
These are the reasons that we write custom components. It allows us to solve these problems.
I've had a question on my AMA for a while: Best ways/patterns to split app into components. And this is my answer: "When you experience one of the problems above, that's when you break your component into multiple smaller components. NOT BEFORE." Breaking a single component into multiple components is what's called "abstraction." Abstraction is awesome, but every abstraction comes with a cost, and you have to be aware of that cost and the benefits before you take the plunge
So feel free to break up your components into smaller ones, but don't be afraid of a growing component until you start experiencing real problems. It's WAY easier to maintain it until it needs to be broken up than maintain a pre-mature abstraction. Good luck!
Looking for a job? Looking for a developer? Check out my job board: kcd.im/jobs
Learn more about React from me:
Things to not miss:
Some tweets from this last week: