react-use-ref SKILL.md skillA
react-use-ref from ncaq/konoka is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add ncaq/konoka/react-use-ref@git:20260407.8cdba48Pins git:20260407.8cdba48 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- ncaq/konoka
- Path
plugins/web-tasuke/skills/react-use-ref/SKILL.md- Versions recorded
- 1
- Latest version
- git:20260407.8cdba48, committed Apr 7, 2026
- Size
- 5,341 bytes
- Repository stars
- 3
- License
- Apache-2.0
Avoid unnecessary useRef in React. Prefer HTML standard features, declarative libraries, state, or custom hooks. Use when writing or reviewing React components.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# useRefの使用を避ける
`useRef`は命令的なコードになりやすく、
Reactの宣言的なモデルと相性がよくありません。
使う前に代替手段がないか検討してください。
## なぜuseRefを避けたいのか
- `ref.current`はミュータブルであり、レンダリングサイクルと同期しません。値の変更がUIに反映されず、予期しない挙動を起こしやすいです
- 命令的なDOM操作はReactの状態管理と二重管理になりやすいです
- テストが難しくなります。DOMの状態をテストするにはDOMのセットアップが必要になります
- コンポーネントの再利用性が下がります。DOM構造に依存したロジックは別の場所で使い回しにくいです
- `ref.current`への代入は「いつ読んでも最新」という暗黙の前提に依存しており、データフローが追いにくくなります
## 代替手段の検討
### HTML標準の機能を使う
ブラウザが提供する宣言的なHTML要素や属性で解決できないか、
まず検討してください。
```tsx
// Bad: useRefで開閉を命令的に管理
const detailsRef = useRef<HTMLDetailsElement>(null);
const toggle = () => {
if (detailsRef.current) {
detailsRef.current.open = !detailsRef.current.open;
}
};
// Good: HTML標準の<details>要素なら宣言的に開閉できる
<details>
<summary>詳細を表示</summary>
<p>ここに詳細が表示されます。</p>
</details>;
```
```tsx
// Bad: useRefでポップオーバーの表示を命令的に管理
const popoverRef = useRef<HTMLDivElement>(null);
const showPopover = () => popoverRef.current?.showPopover();
// Good: popover属性とpopoverTargetで宣言的に表現
<button popoverTarget="my-popover">開く</button>
<div id="my-popover" popover="auto">ポップオーバーの内容</div>
```
`<details>`、`<dialog>`、`popover`属性、`<input type="date">`など、
以前はJavaScriptが必要だった機能の多くが現在はHTML標準で提供されています。
### 宣言的なライブラリを使う
…Read the whole file at its exact version.
How to install
mdr add ncaq/konoka/react-use-ref@sha256:6a11fd70e464e61fThe line at the top of this page pins the label git:20260407.8cdba48, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_omtlmxmetozfqfkb)
1 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 1 version of this file, committed on Apr 7, 2026.
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (5341 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
ncaq/konoka · 3 stars · license Apache-2.0 · pushed 2026-10-19 · branch master
API
GET https://markdownregistry.com/api/v1/artifacts/art_omtlmxmetozfqfkb GET https://markdownregistry.com/api/v1/resolve?ref=ncaq/konoka/react-use-ref GET https://markdownregistry.com/api/v1/blob/6a11fd70e464e61f1ffd48b8c1780c7844186f9d94ce655907051f49aa48c378
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.