Не знаю, насколько это плохо

Но раз обязательно компоненты реакта хочешь, то походу только так

вот я тоже думаю плохо ли)

Напомни, почему нужен именно компонент реакта во всплывающем окне?

во всплывающем окне должны быть функционал реакта, а не просто текст

Планируете их ререндерить на основании каких-то данных?

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

Ну тогда да

Да думаю норм решение для такой задачи нетривиальной

если бы требовалось одно всплывающее окно, то можно было бы СВГ обернуть в типпиджс/реакт и при клике считывать ивент.таргет и говорить всплывающему окну открыться по координатам клика, но там может быть ситуация когда таких объектов на свг 100 штук, и они должны по очереди или одновременно открываться, если реактовским методом то конечно можно в рекурсию сделать и обернуть в 100 HOC либы tippyjs/react

расскажите пожалуйста новости с полей холивара в библиотеке React - hooks vs HOCs vs RenderProps. Какой для чего рекомендуют по best practices, чем аргументируют? Или давно все везде юзают хуки и всё?

Какие вы знаете хорошие курсы для среднего уровня жс? Онлайн платные интересуют

сайт на React.  на сайте есть один параграф и в нем текст получается так

<Paragraph>{i18n.t("repostModalParagraph2")}</Paragraph>

с помощью либы i18n. Он находится в json файле переводов

"repostModalParagraph2": "Поделитесь со своими друзьями в социальных сетях или мессенджерах ссылкой на наш сервис — это займет всего несколько секунд.",

как мне слово "Поделитесь" сделать жирным?

хуки топ. сижу уже несколько месяцев, не испытываю каких-то проблем

а почему HOC и рендерпропсы тут "vs"? Эти паттерны здорово и с хуками заходят

я не работал с i18n
но я бы сделал так)

<Paragraph
    dangerouslySetInnerHTML={{
        __html: i18n.t("repostModalParagraph2"),
    }}
>
</Paragraph>

"repostModalParagraph2": "<strong>Поделитесь</strong> со своими друзьями в социальных сетях или мессенджерах ссылкой на наш сервис — это займет всего несколько секунд.",

новостей не знаю, но могу поделиться личным мнением) Классы хороши для начала. чтобы понять принцип работы компонентов, стейта, лайфсайкла и т.д.
Но когда у тебя в голове уже сформировано это понимание, есть резон перейти на функциональные с хуками. Причины?
1. Более чистый код
Не нужно писать конструкторы и методы лайфсайклов.
вместо

constructor(props) {
  super(props)
  this.state = {
    ...
  }
}

достаточно написать

const [state, setState] = useState({})

Также, не нужно делать бинд методов в конструкторе (чтобы не было потери this при обновлении стейта внутри метода).
Да и функциональный стиль как-то ближе, но тут вкусовщина.
2. Все лайфсайкл методы умещаются в одной функции useEffect()
Это удобно, т.к. тебе не придётся вручную проверять разницу пропсов в методе didUpdate, ты можешь просто закинуть нужный пропс в массив зависимостей. этот useEffect сработает, при первичном рендере и далее только если данный пропс поменяется. Это особенно актуально при использовании Redux, где стейт приходит в пропсы. На изменения разных пропсов нужны отдельные хендлеры? не проблема, ты можешь сделать сразу несколько useEffect и поставить на каждый разные зависимости + прописать разные хендлеры.
3. Возможность писать кастомные хуки + неплохая поддержка со стороны библиотек. Взять тот же react-router с его useHistory()

в общем и целом, на хуках всё пишется намного быстрее (и возможно, работает намного быстрее), если привыкнуть. За то время, как перешёл на хуки - ни разу не использовал классов, нет ни желания, ни необходимости. Разрабы обещают не убирать классы из стандарта, хотя и рекомендуют переходить на функции. Если классы больше по душе, то это ок)

Класы не уберу. Ето основа

Как говориться конкуренты наступают на хвост