-1

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'.

3

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.

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.