# react-useeffect

Скилл разбирает правила работы с useEffect по официальной документации React и подсказывает, чем заменить Effect там, где он лишний.

- скилл · `type=skill` · Claude Code · 127 установок
- Автор: davila7
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/react-useeffect
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/skills/react-useeffect

## Что делает

Скилл включается, когда вы пишете или проверяете код с `useEffect` и `useState`: вывод производных значений, загрузка данных, синхронизация состояния. Внутри — краткая таблица «ситуация → так не надо → так надо» и дерево решений. Например, значение, которое считается из пропсов, советует вычислять прямо при рендере, а не хранить в состоянии и обновлять через Effect.

Отдельный раздел перечисляет случаи, где Effect уместен: синхронизация с внешними системами, подписки, аналитика по факту показа компонента, загрузка данных с корректной очисткой. Для сброса состояния при смене пропса предлагается `key`, для дорогих вычислений — `useMemo`, для подписок на внешние хранилища — `useSyncExternalStore`. Рядом лежат два файла с разбором антипаттернов и альтернатив.

Скилл ничего не запускает и не меняет в проекте — это справочник, на который агент опирается при генерации и ревью. Полезен в проектах на React, где Effect уже успели навесить для вычислений и обработки событий.

## Установка

### Claude Code (родная платформа)

1. **Через claude-code-templates**
```bash
npx claude-code-templates@latest --skill development/react-useeffect
```

2. **Через Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill react-useeffect -a claude-code
```

3. **Вручную: положить файлы**
- Файл: `~/.claude/skills/react-useeffect/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/react-useeffect/

### Codex

**Вручную: положить файлы**
- Файл: `.agents/skills/react-useeffect/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

**Вручную: положить файлы**
- Файл: `.cursor/skills/react-useeffect/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates react-useeffect
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/react-useeffect/SKILL.md`

### Gemini CLI

**Командой платформы**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/react-useeffect
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/react-useeffect/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/react-useeffect

## Когда брать
- убрать лишний useEffect, который пересчитывает производное значение
- переписать сброс состояния при смене пропса на key
- добавить очистку в Effect, который грузит данные
- заменить кэширование через Effect на useMemo
- перенести реакцию на клик из Effect в обработчик события

## Примеры запросов агенту
- проверь этот компонент на антипаттерны useEffect
- нужно ли здесь вообще использовать useEffect?
- перепиши сброс формы при смене id через key вместо useEffect

## Похожие
- [react-server-components](https://affpapa.org/nevibecode/skills/react-server-components.md) — скилл · 954 установки
- [react-patterns](https://affpapa.org/nevibecode/skills/manutej-react-patterns.md) — скилл · 471 установка
- [typescript-react-patterns](https://affpapa.org/nevibecode/skills/typescript-react-patterns.md) — скилл · 1100 установок
- [no-use-effect](https://affpapa.org/nevibecode/skills/no-use-effect.md) — скилл · 1000 установок
- [gsap-react](https://affpapa.org/nevibecode/skills/bbeierle12-gsap-react.md) — скилл · 724 установки
- [react-component-architecture](https://affpapa.org/nevibecode/skills/react-component-architecture.md) — скилл · 674 установки

Из того же набора: [davila7/claude-code-templates](https://affpapa.org/nevibecode/by/davila7/claude-code-templates.md) — 205 карточек

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md