Владимир Проскурин

но почему его почти не используют ?

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

(без собственного состояния)

Внутренний стейт компонента не влияет на результат работы своего memo, memo сравнивает только пропсы.

По логике вещей каждый компонент (без собственного состояния), даже который не использует props, должен быть обернут в memo, но так не делают, почему?

Тут есть условности. У меня например вот такие правила:

Оборачиваем в memo обязательно, если - родительский компонент часто перерендеривается без изменений пропсов вашего компонента. Если ваш компонент не обернуть в memo, то он будет столько же перерендериваться, сколько и родительский. Но тут я бы обернул ваш компонент в родительском в useMemo (если на хуках писать).

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

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

В остальных случаях можно не использовать memo, если на то не указывают исследования производительности конкретно вашего приложения.

Еще важно следить за перерендерами, чтобы родитель не передавал пропсы, у которых на каждом рендере разная ссылка, пример:
<MemoComp onClick={() => console.warn('hello')} />
в таком случае, memo не будет работать. Это можно еще случайно пропустить, если не используете TypeScript/Flow, то вот такой код
<MemoComp isActive={item || isEnabled} />
будет перерендериваться лишний раз, если вдруг окажется, что item это объект с нестабильной ссылкой.

В общем, главное понимать, что простой memo быстрее простого рендера, нужно просто не допустить двойную работу, когда при любом рендере будет сравниваться memo и происходить рендер.

У вас при наведении на кнопки, появляется тултип с сломанными стилями

У вас все перекрывает элемент .gradient

Она производит принудительную перерисовку https://gist.github.com/paulirish/5d52fb081b3570c81e3a в данном случае для того, чтобы анимировать переход высоты из offsetHeight в 0. Попробуйте ее убрать, и увидите, что анимации нет.

У вас ошибка в коде, взгляните на него

let name=prompt('If you want catch the cat, please say us, what is your name?',';h1.name='+name+';);

с подсветкой видно, что не хватает закрывающейся кавычки, вот так

let name=prompt('If you want catch the cat, please say us, what is your name?',';h1.name='+name+';');

Это первое, а второе это то, что вы неправильно обращаетесь к DOM элементу. Вы просто пишете name, а такой переменной нет. Нужно сначала найти необходимый вам элемент, почитайте это https://learn.javascript.ru/searching-elements-dom

В реакте не стоит обращаться к элементам DOM не через реакт, это плохая практика. Почитайте про рефы на DOM элементы https://ru.reactjs.org/docs/refs-and-the-dom.html

UPD: И как правильно заметил Pardon Me! Where Do I Find 4giveness? ваша функция bar реализуется реактивностью. Обращение к элементам DOM нужно только в крайних случаях (например, для получения каких-то свойств типа offsetHeight), это не тот случай.

Вот так

document.querySelector(`.${sections[a].className}`)

не делает никогда, т.к. если у элемента появится второй класс, то селектор будет невалидным. Типа
.button active
вместо
.button.active

У вас уже есть ссылка на элемент, сразу у нее и вызывайте scrollIntoView

function scrollTo(a) {
    sections[a].scrollIntoView();
}

Спроси его, сможет ли он создать хабр на конструкторе.
Для простых лендингов без уникального дизайна, действительно, можно использовать конструкторы. Конструкторы подходят для того, чтобы делать что-то типовое.

Уберите return, т.к. на первой же итерации происходит выход из функции, и цикл больше не продолжается.

UPD: еще lenght -> length.Если нужно, чтобы что-то выводилось, перенесите return в конец функции, сразу после цикла.

VS Code конечно. Просто разберитесь в тормозах. У меня на работе несколько проектов по +2000 ts файлов (еще почти столько же в сумме стили и svg иконки), и я переключаюсь спокойно между проектами через Project Manager, и стоит десяток различных расширений. Работает все не хуже чем в WebStorm с теми же проектами.

Железо среднее - Macbook pro 2018 i7-8750H 16gb ram.

Уберите float: left, из-за него вы теряете высоту вашего блока, и поэтому родительский блок имеет высоту без учета вашего . bar
И вообще, используйте float только по прямому назначению - для обтекания элемента остальными элементами. В данном случае обтекание не нужно.

Object.keys(genriesJson) это массив, а массивы лимитировать можно при помощи среза через slice

Не совсем понятно, что значит не работает? Я не вижу реализацию метода save. И точно this это undefined а не сам метод? Можете вместо bind сразу определять метод save как стрелочную функцию, тогда проблем с this не будет.
По текущему коду сложно понять, в чем у вас проблема. То, что вы делаете, это стандартная задача - передача функции в компонент https://ru.reactjs.org/docs/faq-functions.html

Это у вас меню Услуги -> Тюнинг -> Автоателье

Формы это умеют "из коробки".