Ответ
Ответ не найден
Ответ 18+ 🔞
А, ну это же про тот самый пиздец с useEffect и зависимостями, который у каждого новичка случается! Слушай, история старая как мир, но каждый раз наступает на те же грабли, я тебе щас объясню, почему твой код хуйню делает.
Представь, ты написал компонент, который должен данные с сервера подгружать при монтировании. Классика жанра. И пишешь ты, довольный как слон:
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/data')
.then(res => res.json())
.then(setData);
}, []); // Пустой массив зависимостей, ёпта!
return <div>{data ? data.message : 'Loading...'}</div>;
}
И вроде всё работает, ебушки-воробушки, красота! Данные пришли, отобразились. Ты такой: "Я — бог фронтенда, хуй с горы!" Но потом тебе понадобилось, чтобы этот запрос запускался не только при первом рендере, но и когда, допустим, userId поменялся. Ты, не долго думая, суёшь userId в зависимости.
useEffect(() => {
fetch(`/api/data?userId=${userId}`)
.then(res => res.json())
.then(setData);
}, [userId]); // Добавил userId
И тут начинается ёперный театр. Ты нажимаешь кнопку, меняется userId, запрос летит — вроде норм. Но потом замечаешь, что если другие пропсы или стейты внутри эффекта используются, они тоже должны быть в массиве. А ты их туда не положил. И твой эффект начинает жить своей жизнью, ссылаясь на устаревшие значения, как будто залупа конская застряла в прошлом. Консоль кричит: "The 'userId' value is stale!" А ты сидишь и думаешь: "Какого хуя? Я же его в зависимости указал!"
Вот в чём, чувак, корень зла. useEffect — это не "реакция на изменение данных". Это хуйня, которая говорит: "После того как компонент отрендерился, сделай вот это, и если значения в массиве изменились — сделай это снова". И если ты забыл положить в массив ВСЁ, что используется внутри эффекта, ты получаешь доверия ебать ноль к своему коду. Он будет врать тебе в лицо, используя закэшированные значения из прошлого рендера.
А самое пиздопроебибное начинается, когда у тебя там объект или функция. Каждый рендер они новые, сам от себя охуеешь. Положишь fetchData в зависимости — эффект будет запускаться на каждом рендере, потому что функция каждый раз новая. И ты впадаешь в ступор: "Ну я ж её в useCallback завернул, ёб твою мать!" А потом оказывается, что и useCallback зависит от чего-то, и это что-то тоже надо куда-то пихать. Волнение ебать просто зашкаливает.
Вывод, братан, простой, но жёсткий: либо ты э бошка думай и педантично следишь за каждой переменной в эффекте, либо — и это мой совет — беги от сложных эффектов, как от огня. Выноси логику в кастомные хуки, используй react-query или swr для данных, а useEffect оставь для самой простой, примитивной хуйни вроде подписки на события или таймеров. Иначе будет вам хиросима и нагасаки, в смысле, бесконечные ре-рендеры и баги, которые чих-пых тебя в сраку.