When I consider splitting up a component: 1


When I consider splitting up a component:

1. Support reuse
2. Eliminate duplicated markup
3. JSX is hard to read / "too long" / doesn’t “fit in my head”
4. Too many props
5. To document unique states in Storybook and create separate image tests with Chromatic/Percy

1/x...
6. Separate HTTP calls and JSX - Separating HTTP means I can feed mock data via props
7. Performance (extract an expensive portion so I can optimize its rendering)
8. Keep style selectors short. (smaller components = smaller namespace = short names, easy navigation).

2/x...
9. To divide work between people/teams
10. To provide a clear name for a section/concept
11. To support more flexible component composition

</end>

Any other reasons you create a separate component?

#react

View original on X