react-best-practices
Improve React Correctness and Rendering Performance
React components can lose state, mishandle effects, or respond slowly when rendering costs are misunderstood. This skill guides version-aware reviews and targeted fixes with behavioral checks and comparable performance measurements.
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
Review the Skillstore skill "react-best-practices" from https://skillstore.io/skills/shreyam1008-react-best-practices.md and its manifest at https://skillstore.io/api/skills/shreyam1008-react-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「react-best-practices」。 Review a component that copies a prop-derived total into state through an effect.
預期結果:
- The total duplicates information already available during render.
- Calculate the total during render unless a separate user-editable value is required.
- Verify that prop changes update the total without an additional synchronization effect.
正在使用「react-best-practices」。 Typing remains slow after moving a large filtering calculation into a transition callback.
預期結果:
- The transition callback runs immediately, so the filtering calculation still blocks input.
- Keep controlled input updates urgent and evaluate a worker, chunked computation, or precomputation.
- Compare the same interaction before and after, checking latency, pending feedback, and result correctness.
正在使用「react-best-practices」。 Review a proposal to remove memoization after upgrading to React 19.
預期結果:
- Installing React 19 does not configure React Compiler.
- Confirm compiler setup and coverage before removing memoization.
- Use comparable profiler measurements to determine whether the affected work still benefits from memoization.
安全審計
安全All 12 static findings are false positives in React guidance: Markdown backticks, reference links, and ordinary rendering or data-loading prose. No evidence found of prompt injection, credential access, data exfiltration, or dangerous command instructions in the two reviewed files.
風險因素
⚙️ 外部命令 (5)
🌐 網路存取 (3)
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/shreyam1008-react-best-practices/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/shreyam1008-react-best-practices?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/shreyam1008-react-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/shreyam1008-react-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/shreyam1008-react-best-practices.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>學術引用 (APA · BibTeX · CFF)
APA 引用
shreyam1008. (2026). react-best-practices security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/shreyam1008-react-best-practices/audits/1BibTeX 引用
@techreport{shreyam1008-shreyam1008-react-best-practices-2026,
author = {shreyam1008},
title = {react-best-practices security audit report (audit version 1)},
institution = {Skillstore},
year = {2026},
number = {1},
url = {https://skillstore.io/skills/shreyam1008-react-best-practices/audits/1},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-best-practices security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
- name: "shreyam1008"
date-released: "2026-10-02"
url: "https://skillstore.io/skills/shreyam1008-react-best-practices/audits/1"
identifiers:
- type: other
value: "skillstore:shreyam1008-react-best-practices:audit:1"
description: "Skillstore immutable audit report identifier"
比較變體
4 個可安裝變體每位作者的技能都保留為獨立的可安裝項目。推薦變體依 Skillstore 證據排序。
為何此變體排名第一
vercel-labs-react-best-practices
2026-09-09
shreyam1008-react-best-practices
2026-10-04
Skillstore 評分
評分依據 證據置信度: 中你可以打造什麼
Review component correctness
Check state ownership, component identity, effect cleanup, and loading behavior before merging component changes.
Investigate slow interactions
Interpret profiler and browser traces to select focused rendering, computation, or list optimizations.
Assess React feature compatibility
Review proposed React 19, compiler, and transition changes against installed versions and existing compatibility requirements.
試試這些提示
Review this React component for state ownership, stable keys, and unnecessary effects. Explain each issue and suggest the smallest correction.
Inspect this data-loading effect for races, cancellation, cleanup, and error handling. Preserve the existing data layer and recommend relevant tests.
Use these React Profiler results and browser traces to diagnose slow input. Separate rendering from computation and layout, then propose a measured fix.
Review this optimization against installed React, framework, and compiler configuration. Assess memoization, transitions, accessibility, and memory; define comparable before-and-after verification.
最佳實務
- Inspect installed React, framework, data-layer, and compiler configuration before selecting APIs.
- Base performance changes on representative measurements and compare the same interaction before and after.
- Verify affected behavior, accessibility, loading states, and applicable lint, typecheck, build, and tests.
避免
- Suppress effect dependency warnings instead of correcting unnecessary dependencies or synchronization.
- Memoize every component or object without evidence that identity causes expensive downstream work.
- Treat React transitions as a way to make a long synchronous calculation nonblocking.
常見問題
Which AI tools are supported?
Does every component review require profiling?
Does this skill require React 19?
Does React 19 enable React Compiler automatically?
Can transitions prevent expensive filtering from blocking input?
Does this cover TanStack APIs or React Three Fiber scenes?
開發者詳細資訊
作者
shreyam1008授權
MIT
Skillstore 修訂
r1
版本提示
作者未聲明版本。
引用
bbec03cf10354f3aaccd6dd24eda4ac9ceeceac5
維護新鮮度
2026/10/2
使用量
0 次下載 · 0 次瀏覽
檔案結構