Toolverse
All skills

react-useeffect

by jarrodwatts

React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Category
Frontend
Views
11

About this skill

React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.

How to use

  1. Zainstaluj skill w swoim środowisku Claude'a, wskazując repozytorium jarrodwatts/claude-code-config z folderu skills/react-useeffect. 2. Gdy piszesz lub reviewujesz kod zawierający useEffect, useState lub synchronizację stanu, wyzwij skill z pytaniem o najlepszą praktykę dla Twojego przypadku. 3. Skorzystaj z tabeli decyzyjnej zawartej w skill'u: najpierw sprawdź, czy masz do czynienia z interakcją użytkownika (event handler), pojawieniem się komponentu (effect), czy zmianą props'ów/state'u (obliczenie podczas renderowania). 4. Dla data fetching'u upewnij się, że effect zawiera cleanup function, lub rozważ użycie frameworkowego mechanizmu (np. loader'a w Next.js). 5. Jeśli chcesz cachować kosztowne obliczenia, skill pokaże Ci, kiedy użyć useMemo zamiast useEffect. 6. Dla derived state'u – zamiast useState + useEffect – oblicz wartość bezpośrednio na poziomie renderowania, co skill wyjaśni na konkretnych przykładach.

Related skills

screenshot-to-code

by OneWave-AI

Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.

Frontend
94209

react

by lobehub

React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.

Frontend
2058

browser-automation

by browserbase

Automate web browser interactions using natural language via CLI commands. Use when the user asks to browse websites, navigate web pages, extract data from websites, take screenshots, fill forms, click buttons, or interact with web applications. Triggers include \

Frontend
21175

2d-games

by davila7

2D game development principles. Sprites, tilemaps, physics, camera.

Frontend
2674

better-icons

by better-auth

Use when working with icons in any project. Provides CLI for searching 200+ icon libraries (Iconify) and retrieving SVGs. Commands: `better-icons search u003cqueryu003e` to find icons, `better-icons get u003cidu003e` to get SVG. Also available as MCP server for AI agents.

Frontend
2037

senior-fullstack

by davila7

Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects,

Frontend
2896