How small should reusable components be?
How small should reusable components be? When to break down a component into multiple smaller ones?
Hannah:
A good example of how to decide this is the homepage. When we created the homepage we created the hero as one component with everything included.
img
However we then created the memorial theme we needed a component that looked exactly like the PromotedLinks on the homepage. So we lifted out the code for the PromotedLinks into their own component and added it back into the HomeHero and into the new MemorialHeader as well.
Some things to consider when creating a component:
What are the chances of this being needed elsewhere in the project further down the line? Don’t create a component for the sake of creating it.If you feel it will be needed further down the line do you have enough time to create it, do what you can to make it easy to make a component when you need it but prioritise the piece of work your doing now firstAs a rule of thumb if something is visually unique on the website as in the PromotedLinks example above try where possible to make it its own componentIf you have a design with a visually unique section but there is a lot of logic specifically related to the design you're working on that you can’t separate out then don’t create it as a new component. You don’t want to come across a component that has a load of logic inside it written for one specific use case.Because of this: Get comfortable with the idea of repeating yourself. Sometimes you’ll have two things that are visually identical in the browser but underneath the hood they're running wildly different logic. This is fine. A component with more logic will remain in place but the more versatile version will evolve with the projectUse your best judgement - you can always flatten a component into a parent component. If your unsure you can always create parts of your design as components but only use it within your work. A good example of this is the Accordion. It has a container component but the Sections are created separately.
img
Created on: 12th October, 2022
Last updated: 12th October, 2022
Tagged With: