Skip to content
TrustedSkillsbeta
Back to all skills

Writing React Effects

Checked
dust-tt·vlatest·frontend·MIT

Helps with writing, React as part of building frontend UIs and user experiences workflows.

Repository

Install on your platform

Showing Claude Code. One command installs this skill into any of the agents below.

Installs under a different name. Its SKILL.md names it dust-writing-react-effects, not the name it is listed under, so the command below uses that name.
  1. 1

    Run this in your project

    terminal
    $ npx skills add dust-tt/dust --skill dust-writing-react-effects -a claude-code

  2. Uses the open-source skills CLI and needs Node.js. Add -g to install it for your user instead of this project.

What we know about this skill

Publisher

dust-tt

Taken from the source listing. We haven't verified who controls this account.

Install target

Live repository

Not pinned. Installing fetches whatever the repository holds at the time you run the command.

No human has reviewed this code. The checks below are a static scan of the files at one commit — nobody has run this skill or judged whether it works. A skill runs with whatever access you give your agent, so read the source before you install it.

Automated safety checks

scanned

This skill passed all 6 checks. We read its files at one commit and looked for the things that make a skill dangerous to run — not for whether it works.

  • Declares what it does: passed

    SKILL.md parses and declares a name and a description.

    SKILL.md exists, its frontmatter parses, and it declares a name and a description.

  • No undeclared network calls: passed

    Makes no network calls.

    Every host the skill dials — from its scripts, its config endpoints or the commands it tells the agent to run — is either well-known package and API infrastructure or declared in its own frontmatter. Links in documentation are not counted.

  • No obfuscated payloads: passed

    No encoded or obfuscated payloads.

    No base64, hex or compressed blob is decoded and then executed, and no encoded shell commands.

  • No credential access: passed

    Reads no keys, tokens, keychains or credential files.

    Neither the code nor the SKILL.md instructions read SSH keys, cloud credentials, keychains, token stores, browser cookie databases or dotfiles that hold secrets.

  • No pipe-to-shell installers: passed

    No pipe-to-shell or download-and-run installers.

    No `curl … | sh` pattern, in the code or in the instructions, that runs code fetched at run time.

  • Pinned to a commit: passed

    Scanned dust-tt/dust at 41e4d09697.

    The exact upstream commit SHA that was scanned is recorded, so the result refers to specific bytes.

Commit
41e4d09697
Manifest
.claude/skills/dust-writing-react-effects/SKILL.md
Scanned
1 file, 43 lines
This is a static scan, not a review. It reads the skill's files; it does not run them, and it cannot tell you whether the skill is any good or whether the code does what its description says. A skill runs with whatever access you give your agent.
What each check looks for →

About this skill

What it does

This skill helps AI agents write React components that avoid unnecessary useEffect calls. It guides developers to minimize external system synchronization and prevent redundant state updates. The core principle is that effects should only be used when interacting with external systems; otherwise, derived values calculated during rendering are preferred. This leads to improved performance by reducing re-renders and preventing "state drift."

When to use it

  • When refactoring existing React components to optimize performance.
  • When designing new React components where data can be easily computed from props or state.
  • To avoid unnecessary useEffect calls when a value can be derived during rendering instead of being stored in and updated by state.
  • When encountering performance issues related to excessive re-renders in a React application.

Key capabilities

  • Identifies redundant useEffect calls within React components.
  • Suggests deriving values during render instead of using effects for calculations.
  • Provides guidance on avoiding setting state solely in response to prop changes, favoring derived values or keyed resets.

Example prompts

  • "Refactor this React component to avoid unnecessary useEffect: [component code]"
  • "How can I calculate fullName in this Form component without using an effect?"
  • "Suggest a more efficient way to update fullName based on changes to firstName and lastName."

Tips & gotchas

  • This skill focuses specifically on avoiding unnecessary useEffect calls within React components. It does not cover all aspects of React development.
  • The skill assumes familiarity with basic React concepts like state, props, and effects.
  • Pay attention to the examples provided in the source content to understand the difference between using effects and deriving values during rendering.