abberati

Вы для каждой клетки рисуете четыре стороны толщиной в 1px. Вполне естественно, что на границе двух клеток границы клеток образуют линию толщиной в 2px.

const filledArr = (fillUntil, length) => Array.from({ length }).map((_, i) => i < fillUntil ? 1 : 0)

filledArr(2, 5) // [1,1,0,0,0]
filledArr(4, 5) // [1,1,1,1,0]

Если при уничтожении модулей вы отписываетесь, то всё в порядке. Памяти хватит надолго. А вот если не отписываться — память будет «течь».

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

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

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

Webpack devserver делает пункты 2,4,5 сам в автоматическом режиме.

То, что вы описали, называется HTTPS

Ничего. Js будет выполнять код.

TL;DR компоненты-классы нужно использовать для создания error boundaries и при ssr. В остальных случаях компонент-функция будет короче и проще.

Если хочешь понять, что могут и чего не могут функциональные компоненты — вот подробное объяснение.

Там написано, что это не для новичков — поэтому нужно на самом деле разбираться, что такое компоненты, как они создаются в виде класса, а как — в виде функции.