Toolverse
All skills

writing-react-effects

by dust-tt

Writes React components without unnecessary useEffect. Use when creating/reviewing React components, refactoring effects, or when code uses useEffect to transform data or handle events.

Installation

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

Installation

Quick info

Author
dust-tt
Category
Frontend
Views
5

About this skill

Writes React components without unnecessary useEffect. Use when creating/reviewing React components, refactoring effects, or when code uses useEffect to transform data or handle events.

How to use

  1. Zainstaluj umiejętność w swoim środowisku Dust, dodając ścieżkę do repozytorium dust-tt/dust w sekcji skills.

  2. Gdy tworzysz lub przeglądasz komponent React, aktywuj tę umiejętność, jeśli widzisz useEffect, który oblicza wartość pochodną (np. fullName z firstName i lastName) lub reaguje na zmiany propsów poprzez aktualizację stanu.

  3. Umiejętność przypomni Ci zasadę: efekty są "wyjściem awaryjnym" tylko dla synchronizacji z systemami zewnętrznymi (API, DOM, widżety trzecie). Jeśli nie synchronizujesz z czymś poza komponentem, nie potrzebujesz useEffect.

  4. Zastosuj wzorzec — zamiast tworzyć state i effect do transformacji danych, oblicz wartość bezpośrednio w ciele funkcji komponentu podczas renderowania (np. const fullName = firstName + ' ' + lastName).

  5. Przejrzyj swój kod pod kątem useEffect, które ustawiają stan w odpowiedzi na zmiany propsów — zastąp je wartościami pochodnymi lub resetami kluczowymi (key prop).

  6. Weryfikuj, czy każdy pozostały useEffect rzeczywiście synchronizuje komponent z systemem zewnętrznym; jeśli nie, usuń go i oblicz wartość podczas renderowania.

Related skills

mermaid-gen

by vladm3105

Generate syntactically correct Mermaid diagrams for technical documentation

Frontend
23124

angular

by sickn33

Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern

Frontend
2656

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

interactive-dashboard-builder

by anthropics

Build self-contained interactive HTML dashboards with Chart.js, dropdown filters, and professional styling. Use when creating dashboards, building interactive reports, or generating shareable HTML files with charts and filters that work without a server.

Frontend
2298

apple-reminders

by openclaw

Manage Apple Reminders via the `remindctl` CLI on macOS (list, add, edit, complete, delete). Supports lists, date filters, and JSON/plain output.

Frontend
2085

theme-factory

by anthropics

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Frontend
40139