Тому що то видавалось логічно, коли я то починав писати.
У нас є сирий масив елементів, я його передаю компоненту, що будує дерево, той компонент змінює структуру під себе і віддає назад, і та структура вже відмальовується.
При цьому компонент, що будує дерево - ніяким чином не змінює порядок та вкладеність елементів, а лише слугує інтерфейсом, котрий дозволяє нам пертворити звичайний масив на дерево, та також дозволяє розгортувати та згортувати елементи секцій.

Маніпуляції над елементами проходять в іншому місці, там ми можемо створювати, видаляти, та міняти місцями елементи, і всі ці операції проводяться з простим масивом елементів, а не тим, котрого ми отримуємо після побудови дерева.

Відповідно, масив змінюється - ми передаємо цей новий масив в компонет, котрий перебудовує дерево, адже зміни над масивом кажуть нам, що дерево повинно бути інакшим, отже його треба перебудувати.

Так тут ще ж треба відслідкувати, які саме зміни пройшли. Якби кожна зміна давала мені результат, як от - Елемент 1 перестав бути дитиною Секції 1, і став дитиною Секції 2, то можна було б знайти ті дві секції, і відфільтрувати дітей Сеції 1, аби серед них не було Елементу 1, і додати того елемента до дітей Секції 2, але ж ми отримуємо сирий масив.

Тут треба якийсь diff робити, чи що. І цей diff повинен містит купу всього, як от - тут видалили, а тут додали, а тут змінили рівень, а ось тут індекс, а тут змінили батьківський елемент, індекс і рівень.

угу, так і є

так в мене тут всього 195 елементів, і то вже рахується багато, тому більше, швидше за все, не буде

А яка мова у вас взагалі? Масиви ж динамічні мабуть. Ще й не об'єкти зберігають, а посилання.

жабаскрипт

масив виглядає, як одновимірний масив зі схожими елементами, деякі елементи є секціями, деякі простими елементами. Кожен елемент має значення level, тобто рівень.
типу як

[
      {
        id: 123,
        level: 1,
        section: null,
        simpleElement: { id: 23411, name: "anime sticker" }
      },
      { id: 21312, level: 1, section: { id: 2313123, name: "shirts" } },
      {
        id: 123944,
        level: 2,
        section: null,
        simpleElement: { id: 4949, name: "shirt with print kawaii" }
      },
      {
        id: 33874,
        level: 2,
        section: null,
        simpleElement: { id: 3452, name: "shirt with boobies oppai" }
      }
    ]

це приклад масиву, а не точна копія, але тут, наче, є все, що важливо для побудови дерева

для побудови структури дерева я використовую  такий код

  private buildTree(allElements: any[]): any[] {
    return allElements
      .map((element: Element, index: number) => {
        if (element.level > 1) return null; // тому що елемент з рівнем більше 1 не може бути на без попередника з рівнем 1
        let children = [];
        if (this.isExpandable(element)) { // перевіряємо, чи елемент може мати дітей
          const slice = allElements.slice(index + 1, allElements.length);
          children = this.findChildren(slice, index, 2, allElements || []); // шукаємо дітей секції
        }
        return new TreeElement(
          children.length ? children : null,
          element,
          index
        );
      })
      .filter(obj => obj);
  }

// рекурсивно шукаємо всіх дітей та онуків певної секції
  findChildren(
    slice: any[],
    innerIndex: number,
    lookingForLevel: number,
    fullArray: any[]
  ) {
    const children = [];
    for (const element of slice) {
      innerIndex++;
      if (element.level === lookingForLevel) { // перевіряємо, чи даний елемент має рівень, котрий нам треба
        let innerChildren = [];
        if (this.isExpandable(element)) {
          innerChildren = this.findChildren(
            fullArray.slice(innerIndex + 1, fullArray.length),
            innerIndex,
            lookingForLevel + 1,
            fullArray
          );
        }
        children.push(
          new TreeElement(
            innerChildren.length ? innerChildren : null,
            element,
            innerIndex
          )
        );
      }
      if (element.level < lookingForLevel) {
        break;
      } else {
        continue;
      }
    }
    return children;
  }

А потім ще виявиться, що FakiNyan сам створив той масив, щоб зробити життя складнішим.

Отой початковий, який ви розбираєте для побудови дерева.
Той що має такий вигляд :

[
    {
        id: 123,
        level: 1,
        section: null,
        simpleElement: { id: 23411, name: "anime sticker" }
    },
    {
        id: 21312,
        level: 1,
        section: { id: 2313123, name: "shirts" }
    },
    {
        id: 123944,
        level: 2,
        section: null,
        simpleElement: { id: 4949, name: "shirt with print kawaii" }
    },
    {
        id: 33874,
        level: 2,
        section: null,
        simpleElement: { id: 3452, name: "shirt with boobies oppai" }
    }
]

бекенд ще в розробці чи вже завершений ?
Якщо в розробці і якщо є гарантія, що така структура може бути приведена до дерева (тобто не містить циклів), то в мене питання до розробників "Чому бекенд не роздає готове дерево ? чому саме масив ?".

Я тут вже почав зранку все то переписувати, для початку я виділив все, що стосується дерева, в окремий файл, і от я вже почав розбирати метод додавання елементу.

І тут така проблема, що отой початковий масив сирих даних (не структура типу дерева), зберігається в сховищі, і на цю структуру підписані різні підписанти, в різних місцях додатку. Коли ми змінюємо масив, як от додаємо дані, чи видаляємо, чи отримуємо їх від серверу, ми зберігаємо ці дані в сховище, після чого всі підписанти отримують оновлений масив зі сховища.

То як ви вважаєте, краще опрацьовувати цей сирий масив відразу  після отримання його від серверу, і записувати в сховище вже деревоподібну структуру, і тоді перписати код всіх підписантів, аби вони працювали з структурою дерева, або ж написати метод, котрий би "сериалізував" структуру дерева в простий масив, і тоді лише в певних, потрібних мені місцях, я б мав структуру дерева, додавав би в неї елементи, а потім серіалізував би її в масив, і оновлював би його в сховищі, таким чином, впотрібних місцях я б мав структуру в дерева, а в інших місцях я б мав простий масив, елементи котрого відповідали б елементам, що використовуються в дереві.

Також варто зауважити, що перша побудова дерева відбувається, коли один з підписантів отримує сирий масив з даними. Тобто, якщо я оберу другий варіант, де дерево серіалізується в масив, і масив оновлюється в сховищи, то це вже буде проблемою, адже відразу після того, як масив в сховищі оновлено - підписанти його тримують, і це запустить перебудову дерева.

Також варто зауважити #2, що в інших частинах додатку мені дерево зовсім непотрібне, але потрібен звичайний масив з тими самими даними.

Ок, тоді може, детальніше поясните, чому в тому місці потрібне саме дерево, а крива обробка масиву не підходить?