Повторное использование компонентов

Вот где компоненты оправдывают себя: используйте один столько раз, сколько хотите. Каждый <Star /> ниже — это новая копия:

function Star() {
    return <span>★</span>;
}

export default function App() {
    return (
        <div>
            <Star />
            <Star />
            <Star />
        </div>
    );
}

Три звезды на экране, одно определение в коде. Измените определение один раз. Каждая копия обновится. Это суперсила повторного использования, которой никогда не было у HTML.