# React

> Use when working with the library for web and native user interfaces

- Skill: `tomevault-io/react` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/react`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/react/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/react

---


# React Skill

## Best Practices
1.  **Functional Components**: Always use functional components with Hooks. Class components are legacy.
2.  **Hooks Rules**: Only call hooks at the top level. Don't call them inside loops/conditions.
3.  **Encapsulation**: Keep components small. If it does 2 things, split it.
4.  **State Management**:
    *   `useState` for local UI state.
    *   `useContext` for low-frequency global state (User, Theme).
    *   `Zustand/Redux` for high-frequency complex state.

## Common Pitfalls
*   **Prop Drilling**: Passing props down 5 levels. Use Composition (`children`) or Context.
*   **Effect Dependencies**: Ignoring lint warnings for `useEffect` deps array. This causes stale closures or infinite loops.
*   **Key Prop**: Using `index` as key for dynamic lists. Use unique IDs.

## References
*   [React Docs](https://react.dev)
*   [Antigravity Component Template](../templates/react-component-template.jsx)

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/sami) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-15 -->