Как исправить violetion took 200ms при скролле блока с подгрузкой сообщений?

В обработчике скролла ты делаешь скролл? Может стоит это делать по таймауту, не в этом же обработчике? Похоже на зацикливаение.

Как в массив байтов пикселей вставить текст?

Что ты имеешь ввиду под вставить текст? Нарисовать его поверх изображения?

С чего начать разработку ПО?

Может быть это просто не твоё?

Как в react ставить класс по условию?

да можно,
ну и как бы само напрашивается:

let clazz = (activeBtn === btn.key) ? 'active' : ''

Как декомпозировать логику формы React?

Kataev, давайте так, ваш вариант рабочий и может даже ближе к тому как рекомендуют разработчики Реакта.
Мне не нравится реализация onChange у самого Реакта, событие при котором на каждом нажатии клавиши идет повторный рендер всего компонента. При таком поведении обворачивать каждый инпут в useMemo ну как то не очень идея.

Как декомпозировать логику формы React?

Kataev,
1. для меня инпуты стоят отдельно от других элементов
2. последний пункт, что вы процитровали противоречит природе инпута, который рендерится при каждом изменении значения
3. https://ru.reactjs.org/docs/uncontrolled-component...

Как декомпозировать логику формы React?

JavaSscriptNoob, я подправил ответ, внутри хука лучше сначала сохранять ссылку на элемент, чтобы она же была доступна при вызове функции removeEventListener
Это рекомендация линтера

Как декомпозировать логику формы React?

Kataev, а конкретнее можно, что не так?

Как декомпозировать логику формы React?

JavaSscriptNoob, вот код на JS который реагирует на изменение любого инпута на родителе

function handleChange(e){
  console.log("here" + e.target.value);
}

const div = document.getElementById("root");
div.addEventListener("change", handleChange);

httml:

<div id="root">
  <input>   <input>   <input> 
</div>

Как декомпозировать логику формы React?

JavaSscriptNoob, не обязательно, лучше даже создать реф на форму и доступ к инпутам получать через селекторы

Как добавить ключ каждому элементу списка в React?

Iliya V. Soldatkin, да не, норм вариант,
все равно для формирования нового массива по списку полностью проходить придется

Как добавить ключ каждому элементу списка в React?

Iliya V. Soldatkin,
https://codepen.io/wega-cap/pen/VwrWmdP

Как добавить ключ каждому элементу списка в React?

Iliya V. Soldatkin, вообще куда комментарии будут деваться после удаления, у вас просто учебный пример? Мне проще уже написать свою реализацию :)

Как добавить ключ каждому элементу списка в React?

Iliya V. Soldatkin, нужно формировать новый массив. В него копируете всё кроме элемента который удаляете.
Добро пожаловать в мир иммутабельных коллекций.

PS возможно придется переделать логику работы компонента

Где хранить 2-3 значения?

Шифруйте симметричным ключом храните в json-e

Как добавить ключ каждому элементу списка в React?

Iliya V. Soldatkin, немного ввел вас в заблуждение, особо не влияет эта строчка

Почему не обновляется state в дочернем компоненте?

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

Как добавить ключ каждому элементу списка в React?

Iliya V. Soldatkin, немного не понял ваше предложение,

смотрите, если быть дотошным то надо было сделать так

return <CommentItem
                        key={uuid(i)} 
...
                        removeItem={() => removeCommentItem(i)} 
                    />

По части ключей почитайте для чего это вообще нужно https://ru.reactjs.org/docs/reconciliation.html#re.... Будет вопрос задайте здесь, я отвечу. Но в первую очередь нужно знать основы DOM, лучше поразбирайтесь с ними, а потом изучайте Реакт.

И да, в офиц. документации, есть предупреждение, что лучше не использовать индекс в качестве ключа, но в вашем примере и так этого ключа нет. В случае использовании uuid вы убиваете всю оптимизацию вообще.

Почему не работает кеширование (create react app)?

Забавно, буквально вчера выпилил этот SW потому, что он криво кэшировал index.html.
После обновления js бандлов требовалась перезагрузка кэша браузера. При этом сами бандлы перезагружались ок, а index.html почему то содержал ссылки на старые версии.

Дорого ли обходиться использовавние lock, зачем делать Singleton with double check locking?

Не факт, что за время работы приложения, понадобится экземпляр этого класса (иначе разруливаем через обычный static)

Включу зануду, но все таки статическая переменная это и есть синглтон. А lazy паттерн не является эксклюзивом синглтона. Но на практике в 90% случаев синглтон - это ленивчик.