Владислав Великоиваненко

Какие блоки в реакте? Можно более четко написать, где и в каком компоненте находится логика? Какой компонент родительский, какой дочерний, или всё в одном компоненте каком-то происходит и эти куски кода из одного компонента все?

В useEffect у тебя в качестве зависимости стоит [active], поэтому он в любом случае 0 не отдаст, либо не отработает, либо дает измененные значения, а вот чтобы понять по поводу функции, нужен код самого рендера, я у себя его разверну и уже точно смогу сказать, в чем дело.

useEffect в помощь

Либо делать проверку в реальном времени, и пока вводится до 100 цифр выдавать рядом сообщение "Минимум 100 цифр должно быть", либо, как написали в комментарии выше, уже после нажатия на условную кнопку проверять, сколько было введено и от этого строить логику дальше.

Может потому что ты бекграунд задаешь в "*" ?) Ты вообще в курсах, что значит селектор звездочки? Это значит, что твой бекграунд щас применяется ко всем тегам на странице. Если ты хочешь только как фон, то целесообразнее будет в body{} прописать background.
Ну и поизучать CSS

Если выбор падает на React, то:
когда пишешь на React+TypeScript, то есть возможность разграничивать логику и отрисовку UI.
В файлах с расширением .ts содержится необходимая логика, функционал
В файлах с расширением .tsx уже отрисовка самого интерфейса.
Может, если вы пишете без TS, имеет смысл делать также? - .js для логики и .jsx для отрисовки.
P.s. просто как вариант улучшения ситуации автора.