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.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「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 の証拠で順位付けされます。
このバリアントが首位の理由
sickn33-react-best-practices
2026-09-09
0xbigboss-react-best-practices
2026-10-11
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 閲覧
ファイル構成