agentleFS
Sign inStart free
shreyam1008shreyam1008/shre-skills/skills/react-best-practices/SKILL.md

react-best-practices

Skill0 starsChanged 48 days agoMITView on GitHub

Builds and reviews React components, hooks, state, data loading, and rendering performance. Use for React correctness, effect cleanup, slow renders, or unresponsive component interactions. TanStack-specific API work and React Three Fiber scenes have separate workflows.

We split this skill into the rules it gives an agent

7 rules. 0 are common, 6 are distinctive, and 1 is very specific to this project.

  • 0

    Common

    Most of the 55 edited versions we read keep these.

  • 6

    Distinctive

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Keep state with the components that own it.

    line 17
  2. Distinctive:

    Use stable component definitions and keys that preserve identity across reordering.

    line 18
  3. Distinctive:

    Use effects to synchronize with external systems.

    line 19
  4. Distinctive:

    Keep transient values in refs when they do not need to render.

    line 21
  5. Distinctive:

    Use the project's framework loaders, server components, or query library when appropriate.

    line 25
  6. Distinctive:

    Start independent requests together when their failure semantics allow it.

    line 27
  7. Very specific:

    Use useOptimistic inside its action/transition context.

    line 34

“Common” is measured: kept by at least 6 in 10 of the 55 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

React correctness and rendering

Inspect the installed React version, framework, data layer, and compiler configuration before choosing APIs. Preserve those choices unless changing them is part of the task.

Select the relevant path

For a slow interaction, expensive render, long list, or memoization decision, read rendering performance. For ordinary component work, use the guidance below; profiling the whole application is not a prerequisite for a small edit.

State and effects

  • Keep state with the components that own it. Derive values during render rather than synchronizing duplicate state with effects.
  • Use stable component definitions and keys that preserve identity across reordering. A component defined inside another component is recreated and can reset state.
  • Use effects to synchronize with external systems. Include reactive dependencies and clean up subscriptions, timers, and pending work; restructure unnecessary dependencies instead of hiding them from the linter.
  • Handle user actions in event handlers. Use functional updates when the next state depends on the previous state.
  • Keep transient values in refs when they do not need to render. Do not replace state needed for controlled input or visible feedback simply to suppress renders.

Data and delivery

Use the project's framework loaders, server components, or query library when appropriate. If a fetch effect is needed, handle races, cancellation, errors, and loading. Do not introduce a data library solely to avoid one effect.

Start independent requests together when their failure semantics allow it. Avoid parent/child fetch waterfalls. Preserve loading, empty, failure, and stale-data states.

Lazy-load heavy optional UI when it improves initial delivery. Inspect actual chunk output before changing import style; a barrel import is not automatically expensive. Changes to TanStack query keys or mutations should follow the installed TanStack API.

Version-sensitive features

  • React 19 Actions can coordinate async form submission. Use the documented useActionState / useFormStatus boundaries and provide error handling; an Action does not make arbitrary failures disappear.
  • Use useOptimistic inside its action/transition context. Treat optimistic UI as provisional and reconcile failed or concurrent writes.
  • Client use() reads need a stable promise from an appropriate cache/framework; avoid creating a new fetch promise during every render.
  • Ref-as-prop is a React 19 capability. Preserve older compatibility requirements.
  • React Compiler is a separate build tool, not a consequence of installing React 19. Verify it is configured and covers the measured work before replacing memoization.
  • Confirm the installed version/channel supports React view transitions. Do not mix its transition ownership with direct document.startViewTransition calls on the same update. Retain reduced-motion behavior and a supported fallback.

Verify

Exercise the affected interaction and relevant loading/error states. Run the project's applicable lint, typecheck, build, and tests. For performance changes, compare the same interaction before and after using the method in the linked reference.

References and attribution

Download now (ZIP)

  • Other versions65 projects use a version of this.

    Word for word · 0

    None found.

    Edited · 0

    None found.

    Wrote their own version · 65

    1. mastra-ai/mastra★ 29ksame name
    2. openai/plugins★ 7.4ksame name
    3. ryokun6/ryos★ 1.3ksame name
    4. involvex/youtube-music-cli★ 461same name
    5. vercel/vercel-plugin★ 323same name
    6. mikeOnBreeze/cc-crossbeam★ 293same name
    7. typv/nest-turbo-starter★ 224same name
    8. AvivK5498/Beads-Kanban-UI★ 102same name
    9. mxyhi/token_proxy★ 94same name
    10. laguagu/claude-code-nextjs-skills★ 71same name

    55 more not listed

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

  • Used alongsideProjects with it also use composition-patterns, python-best-practices and 8 more.

    Other files people use alongside this one.

    Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
    • sagnikmitraSkill

      composition-patterns

      Also in 3 projects that use this

    • jefflesterSkill

      python-best-practices

      Python development best practices including PEP 8 style guidelines, type hints, docstring conventions, and common patterns. Use when writing or modifying Python code.

      Also in 3 projects that use this

    • MicrosoftSkill

      planning-with-files

      **USE THIS FOR COMPLEX TASKS.** Implements Manus-style file-based planning for multi-step tasks. Creates task_plan.md, findings.md, and progress.md in .agent_cache/<task-name>/. Use when: implementing multiple APIs, refactoring modules, research tasks, or ANY task requiring >5 tool calls.

      Also in 5 projects that use this

    • JetBrainsSkill

      webapp-testing

      Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

      Also in 7 projects that use this

    • ttmouseSkill

      notebooklm

      Automate Google NotebookLM - create notebooks, add sources, generate podcasts/videos/quizzes, download artifacts. Supports browser-based content extraction for anti-crawler platforms (Twitter/X, LinkedIn, etc.). Activates on explicit /notebooklm or intent like "create a podcast about X

      Also in 3 projects that use this

    • delphi-aiSkill

      animate

      Animation patterns and best practices for Next.js/React applications. Use this skill when implementing animations, transitions, hover effects, page transitions, modals, or any motion in React components. Based on Emil Kowalski's "Animations on the Web" course.

      Also in 3 projects that use this

  • In this repository21 other files it gives its agents.

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free