技能 react-async-patterns
📦
react-async-patterns
內容修訂 r1 安全 ⚙️ 外部命令🌐 網路存取
修復 React 非同步錯誤
非同步 React 錯誤會造成競爭條件、遺漏狀態更新，以及不可靠的 effects。此 skill 會引導審查、修復與 lint 規則，以撰寫更安全的非同步程式碼。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "react-async-patterns" from https://skillstore.io/skills/cjharmath-react-async-patterns.md and its manifest at https://skillstore.io/api/skills/cjharmath-react-async-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「react-async-patterns」。 A component loads user data in an effect and sets state after navigation.
預期結果:
- 識別出畫面在請求完成前 unmount 時的競爭問題。
- 建議在設定狀態前先取消。
- 建議在渲染相依資料前檢查錯誤路徑。
正在使用「react-async-patterns」。 A Zustand action starts setup work and immediately updates feature state.
預期結果:
審查會標記隱藏的非同步行為，並建議在依賴 setup 的狀態變更前先 await setup。
正在使用「react-async-patterns」。 A reviewer wants lint guidance for promise correctness.
預期結果:
- 建議使用 no-floating-promises 找出遺漏的 awaits。
- 新增 require-await 和 await-thenable 檢查。
- 使用 no-misused-promises 檢查不安全的非同步 callbacks。
安全審計
安全v7 • 2026/7/6 開啟版本化報告
All static findings are false positives caused by Markdown code fences, inline backticks, and illustrative React or TypeScript examples. The fetch example demonstrates AbortController cleanup in application code, and the sensitive-key finding is an Object.keys substring match. No prompt injection, data exfiltration, or auto-executing behavior was found.
1
已掃描檔案
313
分析行數
0
複核項目
0
已忽略的誤報
風險因素
⚙️ 外部命令 (40)
SKILL.md:10 SKILL.md:16 SKILL.md:18-26 SKILL.md:26-28 SKILL.md:28-32 SKILL.md:32-36 SKILL.md:36-40 SKILL.md:40-41 SKILL.md:41 SKILL.md:49-59 SKILL.md:59-62 SKILL.md:62-74 SKILL.md:74-78 SKILL.md:78-80 SKILL.md:80-86 SKILL.md:86-90 SKILL.md:90-114 SKILL.md:114-118 SKILL.md:118-124 SKILL.md:124-132 SKILL.md:132-150 SKILL.md:150-156 SKILL.md:156-157 SKILL.md:157-164 SKILL.md:164-166 SKILL.md:166-218 SKILL.md:218-226 SKILL.md:226-258 SKILL.md:258-266 SKILL.md:266-275 SKILL.md:275-277 SKILL.md:277-285 SKILL.md:285 SKILL.md:286-288 SKILL.md:288-299 SKILL.md:299-301 SKILL.md:301-303 SKILL.md:303-304 SKILL.md:304-306 SKILL.md:306-307
🌐 網路存取 (1)
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/cjharmath-react-async-patterns/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/cjharmath-react-async-patterns?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/cjharmath-react-async-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-react-async-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/cjharmath-react-async-patterns.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 引用
CJHarmath. (2026). react-async-patterns security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-react-async-patterns/audits/7BibTeX 引用
@techreport{cjharmath-cjharmath-react-async-patterns-2026,
author = {CJHarmath},
title = {react-async-patterns security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/cjharmath-react-async-patterns/audits/7},
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-async-patterns security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-react-async-patterns/audits/7"
identifiers:
- type: other
value: "skillstore:cjharmath-react-async-patterns:audit:7"
description: "Skillstore immutable audit report identifier"
Skillstore 評分
評分依據 證據置信度: 高 55
架構
85
可維護性
87
內容
71
社群
83
規範符合度
你可以打造什麼
審查功能程式碼
在 React 功能發布前找出 floating promises、遺漏的 awaits，以及不安全的執行順序。
穩定行動端 Effects
將 cleanup 與取消模式套用到載入非同步資料的 React Native 畫面。
建立非同步審查標準
為維護 TypeScript React 應用程式的團隊定義 lint 規則與檢查清單項目。
試試這些提示
審查非同步程式碼
審查這個 React component 的非同步錯誤。找出 floating promises、競爭條件，以及缺少的後置條件檢查。提出聚焦的修復建議。
修復 Effect 時序
分析這個 useEffect 流程。說明 unmounts 或 dependency changes 可能在哪裡產生競爭。建議 cancellation 或 AbortController 變更。
稽核 Zustand Actions
檢查這些 Zustand actions。識別隱藏的非同步行為、遺漏的 awaits，以及狀態假設。提出更安全的 action signatures。
設計非同步流程
為這個 React 功能設計非同步資料流程。決定哪些應該循序執行、平行執行，或交由 TanStack Query 處理。說明取捨。
最佳實務
- 在手動審查非同步程式碼前，啟用 TypeScript ESLint promise 規則。
- 在相依 actions 繼續前，於關鍵載入後驗證狀態。
- 對於載入資料的 effects，使用 AbortController 或 cancellation flags。
避免
- 呼叫會回傳 promise 的函式時，沒有 await、return，或記錄背景執行意圖。
- 在 Promise.all 內執行相依的非同步步驟。
- 直接將 useEffect callback 設為 async，而不是包裝非同步工作。
常見問題
這個 skill 會執行 commands 嗎？
不會。它是一個 Markdown 指引 skill，包含 grep 搜尋與 ESLint 設定範例。
它能協助 React Native 嗎？
可以。非同步時序、取消與狀態驗證模式也適用於 React Native 畫面。
它需要 Zustand 嗎？
不需要。雖然包含 Zustand 範例，但多數模式都適用於 React hooks 和 TypeScript promises。
它會取代 TanStack Query 嗎？
不會。它會在手動非同步狀態管理有風險或重複性高時建議使用 TanStack Query。
它能找出每一個競爭條件嗎？
不能。它有助於組織審查，但時間敏感行為仍需要執行階段測試。
哪些工具可以使用它？
此 skill 標記為適用於 Claude、Codex 和 Claude Code。