Приведи пример строчного тега

Слушай, а вот этот ваш React, он же, блядь, как тот самый Герасим из «Муму» — вроде здоровый, сильный, а объяснить нихуя не может, только «хуки-хуки» мычит! Берёт тебя за шкирку и тащит куда-то в свой виртуальный DOM, а ты такой: «Муу?».

Ну ладно, шучу. На самом деле, useEffect — это как раз та самая хитрая жопа, которая всех путает. Представь: твой компонент только что родился, отрендерился, красивый такой. И тут он такой: «О, я живой! Надо бы сходить на сервер за данными». Вот для этого и нужен useEffect — чтобы делать побочные хуйни после того, как компонент уже показался на экране.

Вот смотри, простейший пример, как нахуярить загрузку данных:

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // Эта хуйня запустится после каждого рендера, если не сказать ей обратное
    console.log('Эффект поехал! userId:', userId);

    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        setUser(data);
      } catch (error) {
        console.error('Ой, всё!', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    // А вот эта штука — как Герасим, который возвращается, чтобы почистить за собой конуру.
    // Выполнится перед следующим запуском эффекта или когда компонент сдохнет.
    return () => {
      console.log('Чищу за собой, как хороший мальчик. userId:', userId);
    };
  }, [userId]); // Вот этот массив — второй аргумент. В него ты кладёшь зависимости.

  if (loading) return <div>Гружусь, блядь...</div>;
  if (!user) return <div>Пользователя нет, ёпта.</div>;

  return <div>Привет, {user.name}!</div>;
}

Вся соль, вся пиздопроебищность — в этом втором аргументе, в массиве зависимостей [userId].

• Если массив пустой [], эффект выстрелит один раз — после самого первого рендера. Как будто сказал: «Сходи на сервер один раз и отъебись».
• Если туда что-то положил (как [userId]), эффект будет запускаться заново только если это userId поменялось между рендерами. Не поменялось — сидит, молчит, силы копит.
• Если хуй забудешь его указать вообще, то эффект будет гоняться как угорелый после КАЖДОГО рендера. Получишь бесконечные запросы, а потом тимлид придёт и ебалом настучит. Это, блядь, главная грабля для всех.

И ещё запомни: всё, что объявляешь внутри эффекта (типа этой функции fetchData), там и остаётся. Не лезь со своими переменными наружу без зависимости, а то React тебя не поймёт и будет орать в консоли, как та самая барыня на Герасима.

Короче, useEffect — это не «хук на каждый чих». Это инструмент для чётко оговорённых побочных действий после рендера. А всю основную логику и вычисления старайся делать до него, прямо в теле компонента. Иначе заебёшься искать, почему у тебя состояние обновляется в три раза чаще, чем надо.