Efficiencies in React Components

JavaScript
1

I am confused as to why the challenge React: Use React to Render Nested Components requested us to the following as it seems inefficient:

const TypesOfFruit = () => {
  return (
    <div>
      <h2>Fruits:</h2>
      <ul>
        <li>Apples</li>
        <li>Blueberries</li>
        <li>Strawberries</li>
        <li>Bananas</li>
      </ul>
    </div>
  );
};

const Fruits = () => {
  return (
    <div>
      { /* change code below this line */ }
      <TypesOfFruit />
      { /* change code above this line */ }
    </div>
  );
};

class TypesOfFood extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>Types of Food:</h1>
        { /* change code below this line */ }
        <Fruits />
        { /* change code above this line */ }
      </div>
    );
  }

Wouldn’t the following have been more efficient just in terms of less code to write?

const TypesOfFruit = () => {
  return (
    <div>
      <h2>Fruits:</h2>
      <ul>
        <li>Apples</li>
        <li>Blueberries</li>
        <li>Strawberries</li>
        <li>Bananas</li>
      </ul>
    </div>
  );
};

const Fruits = () => {
  return (
    <div>
      <h1>Types of Food:</h1>
      <TypesOfFruit />
    </div>
  );
};
3

I think the purpose of the challenge was to explain how to work with nested components but I do agree they could’ve picked a better example; one that mimics something that front-end devs work with on a daily basis in real projects but nothing that seems too hard to understand.

I wonder why they didn’t just go to with the super typical to-do example. My two cents is that no it’s not really more “efficient”, but I do agree that sometimes people exaggerate the amount of modularity in their react/vue/angular apps and create atomic components when they don’t actually need to have every single HTML entity in a component.

I mean, some large projects do, others don’t, it’s really up to the app designer to determine whether you need it or not. In this case, you may even be tempted to create a single component for a fruit with just an <li> and the name of the fruit as a prop but do you honestly need it? Will you do something special inside that <li> element like IDK a button that sends requests to an API to delete or edit the fruit?