When does it make sense to make an individual React component?

Question

The most obvious criteria for me is for component re-usability, as well as internal state management but aside from that are there are any other good reasons?

For instance, I could have a component called ArticleFeed.js. Within ArticleFeed.js I could have a child component known as ArticleFeedItem.js OR I could just have an html markup object in ArticleFeed.js that isnt a react component but instead is just the markup for the 'article feed item'.

Answer 1

Had exactly the same question when I started working on rebuilding a new landing page, using Vue. I have gone through several stages of refactoring all the codes, and the rule of thumb is readability over reusability.

Just like splitting a large code block up into several functions with descriptive names - bigblind

Stage 1: Every page as a component, as how they are used in router. So, each page is a large chunk of codes

Stage 2: Every repeating part as a components, as I don't want to copy and paste the codes, i.e. same as what you are doing.

Stage 3: Every section as a component, as I started to think writing HMTL as writing functions.

  <div class="landingpage careers">
    <section class="landingpage-hero">
      <app-navbar></app-navbar>
      <landingpage-header></landingpage-header>
    </section>

    <main class="landingpage-main">
      <div class="desktop-section-row">
        <punchline-section></punchline-section>
        <benefits-section></benefits-section>
      </div>
      <personas-section></personas-section>
      <values-section></values-section>
      <contact></contact>
    </main>

    <app-footer></app-footer>
  </div>

The final Vue component is like this, and I strive to reduce the depth of hierarchy in it.

Answer 2

Apart from reuse, it's also often useful for readability. Just like splitting a large code block up into several functions with descriptive names, it can be good to break a component that renders a large tree, up into smaller, stateless components.

Answer 3

Another situation why you need components is that if you have to add, delete, clone ArticleFeedItem to ArticleFeed.

Let's say for example that there's a button on ArticleFeed that adds an ArticleFeedItem. You can add the component as a whole instead of writing a lot of javascript or html. The same goes for delete, clone etc.