Claude Code React useEffect Skill for Resetting Forms with a Key
Use component identity to reset local form state when the edited record changes, and keep Effects for external synchronization.
中文Install in Claude Code
Use a React project with a stateful editor and two records. Run the behavior checks with the project's existing test setup.
- Get the complete `cli-tool/components/skills/development/react-useeffect` directory from the pinned GitHub checkout.
- Copy it under the target project's `.claude/skills/`. Confirm `.claude/skills/react-useeffect/SKILL.md`, open Claude Code at the project root, and call `/react-useeffect`.
Example task
Edit the note for `book-a`, then open `book-b`. Use the record ID as the editor's key and verify its state across both a record switch and a same-record rerender.What to check
The editor loads B's initial note on a record switch and preserves the current draft across rerenders with the same ID.
Original SKILL.md on GitHub · Updated
Frequently asked question
When does an Effect still fit?
Use an Effect when the component synchronizes with an external system and provide cleanup where the integration needs it.