Алексей Уколов

Не является. Массив используется на хранения списка значений, в нём нет никаких "имён".
Значения с "именами" можно хранить либо в объекте, либо в специальном типе Map.

Но при этом, если речь про значения примитивных типов, то при их добавлении в объект или Map теряется связь с изначальной переменной, откуда значение было взято.

let a = 3;
let b = 15;

let one = {};

one.a = a;
one.b = b;

a = 42;

console.log(one.a, one.b); // 3, 15
console.log(a, b); // 42, 15

let a = 3;
let b = 15;

let two = new Map();

two.set('a', a);
two.set('b', b);

a = 42;

console.log(two.get('a'), two.get('b')); // 3, 15
console.log(a, b); // 42, 15

Вам нужно вернуться к учебнику и научиться понимать код на базовом уровне, иначе вы с каждой строчкой сюда бегать будете.
В функции onSubmit вы вызываете addReservationAsync с двумя аргументами: requestServer и объект с кучей полей. А addReservationAsync ожидает 6 аргументов (то есть не объект, а каждое значение отдельно).

Вы указали аргумент функции и таким образом перезаписали переменные из скоупа выше. Нужно так:

const onSubmit = () => {
	console.log("rc", userId, roomId, options, arrivalDate, leavingDate);
	dispatch(
		addReservationAsync(requestServer, {
			userId,
			roomId,
			options,
			arrivalDate,
			leavingDate,
		}),
	);
	setNewReservation("");
};

Чтобы начать слушать событие (scroll) только при наступлении другого события (btnUp). Неужели это не очевидно?

Нужно дополнительно триггерить событие изменения (change, input и т.п.), на которое, очевидно, подписаны другие скрипты на странице: https://developer.mozilla.org/en-US/docs/Web/Event...

«Он берёт» сначала первый символ, потом второй и так далее. Всё дело в том, куда он этот символ подставляет — каждый раз в начало новой строки, поэтому она и получается перевёрнутой.

Опишите свою реальную задачу, потому что сейчас непонятно, чего именно вы хотите добиться, и из-за этого нельзя дать какой-то адекватный ответ.

Вы хотите полностью отказаться от React и перейти на более «простые» инструменты? Скорее всего, это невозможно — если используется React, то у вас сложные динамические интерфейсы и никакими автоматическими средствами переписать их на ванильный js не выйдет — только руками. Но это будет требовать знаний куда больших, чем просто использование React.

Если же вы хотите отказаться от JSX, но оставить React, то это автоматизировать уже можно, но задача очень странная.

У вас прямо в коде есть адрес видео в ссылке (только она почему-то не другое видео ведёт). Однако, вы в функцию parseMediaURL передаёте картинку, а не эту ссылку.
Соответственно, как только вы будете брать URL видео из нужного места, а не из картинки, путь до картинки может стать любым.

Деструкция выглядит так: const { status } = result;
Вы же создаёте переменную status и в неё записываете объект {result: result}.
Поэтому возвращает ваша функция вот такую конструкцию:

{
  data: ...,
  status: {
    result: result,
  }
}

! - приведение к булевому значению и смена его «знака» на противоположный.
!! – приведение к булевому значению и двойная смена его «знака» на противоположный. То есть упрощение любого типа данных до true или false.

!42 -> false
!!42 -> true

Всё, что нужно для понимания: https://developer.mozilla.org/en-US/docs/Web/JavaS...

TS тут можно просто игнорировать, он никак не влияет на функционал. Но если хочется разобраться, то вот: https://www.typescriptlang.org/docs/handbook/2/gen...

Потому что bind возвращает новую функцию с прибитым this, а не изменяет ту, на которой вы его вызываете. Ну а эту новую функцию нужно куда-то сохранить.

P.S. React тут совершенно ни при чём.

Как я уже написал, код рабочий. Но его можно немного улучшить:

var o = {
    value: {
        orders: {
            tools: [
                {
                    tool1: 't1'
                }
            ],
            wood: [
                {
                    wood1: 'w1',
                }
            ],
        },
    }
}

var allOrders = [];
var ordersByType = o.value?.orders || {};

Object.keys(ordersByType).forEach((type) => {
    ordersByType[type].forEach((order) => {
        allOrders.push({
            ...order,
            type,
        });
    });
});

o.value.orders = allOrders;

Можно использовать и reduce, чтобы сэкономить пару строк, но многие (и я в их числе) считают, что использование этого метода сильно ухудшает читаемость кода.

Ну вы же привели 99% решения. Добавьте просто вычитание из 100 получающегося у вас шанса, чтобы его инвертировать. Ну или используйте ту цифру, что получается у вас, просто считайте, что это не шанс, а сложность.

Классическая потеря контекста. Можно вылечить так:

constructor(){
  this.MyVariable = {x: 0, y: 0};

  this.MyFunc = this.MyFunc.bind(this);
}

Возможно, уже появился какой-то дополнительный синтаксический сахар, который позволяет объявлять метод сразу с прибитым контекстом (помимо arrow function).

Как можно побороть проблему, оптимизировать может быть что-то?

Открыть DevTools на вкладке Performance и затрейсить рендеринг. Смотреть в получившиеся графики, искать, куда уходит время и ресурсы.
Но вообще, эту задачу скорее надо решать через UX - вряд ли кому-то вообще нужны разом эти 1000 графиков.

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

Первый и самый важный шаг вы сделали — идите дальше. Смотрите что у вас в document.getElementById('id').value, потом что в document.getElementById('id'), если в value пусто.
Это называется "отладка" или "дебаг" и это примерно половина работы программиста.

выводит новую форму

Вангую, что в итоге у вас куча одинаковых форм и, соответственно, куча инпутов с id="id", что, естественно, недопустимо.

Никак — скриншот делает не браузер.

.find((item) => (item.name = this.info)),

Здесь, явно, должно быть сравнение, а не присваивание.