Что такое декомпозиция

Слушай, а вот эта ваша декомпозиция — это ж, по сути, как с табуреткой, блядь! Принёс ты её в квартиру целой, а она в дверь не лезет, сука. Что делаешь? Не головой же об косяк биться! Откручиваешь ножки, блядь, потом сиденье — и вуаля, проносишь по частям, а внутри обратно собираешь. Ёпта, гениально и просто.

Вот и с кодом так же. Напишешь один здоровенный компонент, который всё делает: и аватарку рисует, и имя выводит, и друзей показывает, и погоду за окном, нахуй, предсказывает. А потом смотришь на эту простыню — и глаза разбегаются, и понять ничего нельзя, и тестировать это — просто пиздец, а не жизнь.

Так что делаем? Правильно, разъёбываем эту махину на кусочки!

Пример, как это бывает:

Раньше был один монстр-компонент, который всё тащил на себе, как тот Герасим с бочками.

// До декомпозиции
function UserProfile() {
  return (
    <div>
      <Avatar />
      <UserInfo />
      <FriendsList />
    </div>
  )
}

А потом ты такой: «Так, стоп, ебать. Аватарка — она сама по себе кусок логики. Инфа о юзере — тоже. Список друзей — вообще отдельная песня, там своя хуйня». И р-раз — пилишь на три аккуратных, приятных компонента.

// После - разбили на отдельные компоненты
function Avatar() { /* ... */ } // Отвечает только за картинку
function UserInfo() { /* ... */ } // Пашет только с именем и почтой
function FriendsList() { /* ... */ } // Копается исключительно в друзьях

И жить сразу легче! Один сломался — чинишь один, а не весь механизм разбираешь.

А как понять, что декомпозиция получилась охуенной? Да очень просто:

1. Один компонент — одна чёткая задача. Не надо, чтобы Avatar ещё и погоду запрашивал, блядь. Его дело — картинку показать, и всё. Как тот немой Герасим, который только «Муму» говорит.
2. Минимум связей между ними. Чтобы эти кусочки не были, как сиамские близнецы, сросшиеся жопами. UserInfo не должен знать, как FriendsList там у себя внутри друзей сортирует. Чувствуешь подозрение, блядь, что они слишком много друг о друге знают — значит, где-то косяк.
3. Каждый кусок можно протестировать отдельно. Представь, принёс ты табуретку собранную, а надо проверить, крутится ли одна конкретная ножка. Хуй проверишь, всё скручено! А так — открутил ножку, покрутил в руках, и всё ясно. С компонентами — та же хуйня.

В общем, суть в чём: не делай из кода болото, где всё перемешано. Дроби большую и сложную херню на мелкие, понятные кирпичики. И тогда хоть собирай из них замок, хоть сарай — всё будет проще, чем пытаться высечь дворец из одной ебаной глыбы гранита. Чих-пых!