How to tell when to create a new component?

user_3413063 0
Viewed 5053

I've been looking around behind the logic of when someone shall create a new component in a web application on angularjs / angular but I suppose this is more general and might apply on all component based front end frameworks.

I know that there are some principles like it should be abstract and reusable but e.g. I have seen on angular docs that each separate route looks at a specific component (how can this be reusable). Is there any solid question which I might ask before creating a new component ?

web-component angular vue.js reactjs functional-programming
6 Answers

From React docs:

But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.

Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly, your UI (and therefore your component structure) will map nicely. That's because UI and data models tend to adhere to the same information architecture, which means the work of separating your UI into components is often trivial. Just break it up into components that represent exactly one piece of your data model.https://facebook.github.io/react/docs/thinking-in-react.html

PS. Also think about performance. By separating components you can manage the lifecycle of small pice of view, so basically if your component shows a single (atomic) part of data, you can easily define when component should update. see shouldComponentUpdate().

user_67273690
Related