What are the advantages of having multiple components with one job each?


#1

Question

What are the advantages of having multiple components with one job each?

Answer
The main advantage is something that we will confront through our lessons that is modularity. React is meant to be modular, so each component can be reusable in our code. let’s say we have a page with a couple of HTML elements that display some state, like an image and some text:

...
render(){
  return(
    <div>
      <img src= {this.state.img}/>
      <p>{this.state.text}</p>
    </div>
  ...
}

Now, this is a really simple example, but lets say that we have the same piece of code in another component, then it will make sense to make it into a stateless component and now we can import it into each component we will need it:

import Display from '../Display/Display;';
...
 render(){
  return(
    <div>
      <Display img={this.state.img} text={this.state.text}/>
   ...
  )
 }

There we can see the advantage of components that have one job, they are so generic that they are reusable, and there’s where their worth comes from.