Сергей delphinpro

Итак, как раз для прокрутки addEventListener и removeEventListener использовать в реакте вполне легально.
Более того, вы вполне обошли использование рефов используя window, тут все хорошо.
Но вот на следующих граблях - жизненном цикле вы таки споткнулись.
Где гарантия, что компонент не перерендерился и функция disableOnwheel осталось той же что и была ?
Нужно
1) Вынести disableOnwheel за пределы компонентов, там нет ничего что зависело бы от наличия React
2) Внимательно прочесть про клинап https://reactjs.org/docs/hooks-effect.html

Не сметь убирать!
Это ограничение в 120 символов в строке.
Если за нее выходите - лучше пересмотреть форматирование кода.

Данный элемент обычно называется Overlay. Его предназначение заключается не только в том чтобы затемнить область вокруг модального окна или off-canvas меню для наилучшей фокусировки на элементе, но ещё и для того чтобы при клике на данный элемент можно было закрыть окно/меню.

Однако если закрытие по клику не нужно, разумеется можно сделать и тенью и псевдоэлементами как вам подсказали в комментариях.

Или если всё же нужно закрытие по клику, тогда вариантов несколько.

Первый вариант:

Оборачиваете off-canvas меню в обертку для которой устанавливаете полупрозрачный темный фон. При открытии меню, делаете обертку и меню видимыми.

Второй вариант:

Создаёте отдельный элемент для оверлея, задав нужный полупрозрачный темный фон. При открытии меню, делаете оверлей и меню видимыми.

Есть ещё несколько вариантов, но эти два наиболее подходящие для решения подобных задач.

Вот как пример библиотека onoffcanvas.

можно создать временный элемент <template>, вставить в него этот HTML,
и забрать из него DocumentFragment

Фрагмент — это примерно как DOM-документ, его можно рекурсивно обойти через свойство children

Например, в строке содержится такой HTML:

<div>
  <p>Text</p>
  <ul>
    <li>Apple</li>
    <li>Banana</li>
  </ul>
</div>

И примерно такой код:

const tmpl = document.createElement('template');
tmpl.innerHTML = msg; // строка с HTML
const df = tmpl.content; // DocumentFragment

df.children // массив из одного элемента: наружний div
df.children[0].children // массив с двумя эл.: параграфом и списком
df.children[0].children[1].children[1].textContent // "Banana"

да берешь и делаешь.
походу разгребаешь возникшие проблемы/вопросы.

волшебных кнопки/рецептов не существует.

от выбора библиотек

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

class TestSome{
    protected function setUp (): void
    {
        parent::setUp();
        Config::set("come_config.value", "blablabla");
    }
}

Потому что на самом деле ваш код для движка JS выглядит примерно так:

let name = 'Bob';

function fn() {
    // Перезаписывается не "глобальная" переменная, а "локальная", содержащая функцию
    var name = function () {};
    name = 'Bill';
    return;
}

fn();

console.log(name);

Если же функцию действительно вернуть, то всё начинает работать:

let name = 'Bob';

function fn() {
    name = 'Bill';
    return function name () {};
}

console.log(fn());

console.log(name);

Но зачем тут вообще именовать эту функцию?

Скорее всего, изначально URL файла выглядел наподобие https://домен/папка/файл.js?crc=6, где ?crc=6 использовалось для обозначения версии этого файла на случай, если в кэше браузера могла находиться какая-либо из предыдущих его редакций, предположительно их было пять (при каждом изменении файла - в URL также менялся этот номер, чтобы браузер считал файл другим и не брал из кэша старый). Но потом этот файл был сохранён на диск на стороне клиента, а в файловой системе вопросительный знак недопустим, потому этот символ был заменён на символ @. Так и получилось такое странное расширение файла. Почем именно crc - скорее всего, просто неудачно выбранное название параметра, который в принципе может называться как угодно или вообще не иметь названия, лишь бы символы после ? различались от версии к версии, если выбран именно такой способ обхода кэша.

Object.keys(obj).length

Это называется не "GET ответ", а JSON

json_decode($response)

UPD. Проблема исчезает, когда убираю в "container" свойство position: absolute;

Абсолют выводит элемент из потока. Родительский элемент и соседи перестают о нем знать.

Поскольку других детей нет, header имеет нулевую высоту -> вы не видите фона.

Может в таком случае нужно правильно разбить разметку в самом HTML?

Может быть.
Но чтобы сказать точно, нужно видеть макет (и возможно ТЗ)

p.s.
Интересно, что вы хотели сказать этим кодом

font-family: 'Playfair Display', serif;
font-family: 'Montserrat', sans-serif;