At what point does it make sense to break a single component into multiple components?
Advanced React Component Patterns Course in Portland next week!
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:
β¨ Click here to get a discounted ticket β¨
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 render
method, a TON of instance methods, a LOT of state, and you’d probably need every lifecycle hook (with the exception of shouldComponentUpdate
(it should always update!) and componentWillUnmount
(it will never unmount!)).
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
> “Duplication is far cheaper than the wrong abstraction.” - Sandi Metz.
So I don’t mind if my component’s render method gets really long. Remember that JSX is just a bunch of JavaScript expressions using the declarative APIs given by components. Not a whole lot can go wrong with code like that and it’s much easier to keep that render method as it is than breaking out things into a bunch of smaller components and start Prop Drilling everywhere.
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:
> This is just so freaking cool: https://github.com/facebook/jest/pull/6380 > > Mad props to @lucasazzola β 27 Jun 2018
> Friends, I’m telling you @fbjest is an incredible testing framework. Seriously so good. Give it a try if you haven’t π π β 25 Jun 2018
> Font: http://Dank.sh by @_philpl > Theme: http://aka.ms/nightowl by @sarah_edo > > Shortening this tweet to http://kcd.im/mft (my font/theme) > > + other @code things: http://kcd.im/vscode π β 27 Jun 2018
> Phew, got 24 branches ready for my course on Configuring Jest in modern JavaScript web applications. π > > Now time to get recording! π¬ π β 30 Jun 2018
This week’s blog post is “Test Isolation with React”. It’s the published version of my newsletter from 2 weeks ago. If you thought it was good, go ahead and give it some claps (πx50) and a retweet:
Special thanks to my sponsor Patreons: Hashnode
P.S. If you like this, make sure to subscribe, follow me on twitter, buy me lunch, support me on patreon, and share this with your friends π
π Hi! Iβm Kent C. Dodds. I work at PayPal as a full stack JavaScript engineer. I represent PayPal on the TC39. Iβm actively involved in the open source community. Iβm an instructor on egghead.io, Frontend Masters, and Workshop.me. Iβm also a Google Developer Expert. Iβm happily married and the father of four kids. I like my family, code, JavaScript, and React.