skills.rest
Yimura
YimuraCOMMUNITY
Explore all skills by this author →
GitHub

react-custom-hook

Standardize React custom hook creation and refactoring in React Native codebases.

Updated Jun 14, 2024
Search Tags:#typescript#refactoring#react#hooks#react native#ble#effect cleanup
One-click install
npx skills add https://github.com/Yimura/RemoteUnlockApp --skill react-custom-hook
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-custom-hook
Source: https://github.com/Yimura/RemoteUnlockApp/tree/main/.claude/skills/react-custom-hook
Command: npx skills add https://github.com/Yimura/RemoteUnlockApp --skill react-custom-hook

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes guesswork from creating and maintaining custom React hooks in this React Native app by enforcing a consistent file shape, stable return contracts, and correct React hook behavior.

Core Features & Use Cases

  • Hook File Standards: Guides naming, export style, typing, and file structure for custom hooks so they stay easy to find and reuse.
  • React Rules Enforcement: Keeps hook calls at the top level, effects disciplined, and returns stable so common hook bugs do not slip in.
  • Repository-Specific Placement: Helps decide whether a hook belongs in a feature-local hooks folder or the shared hooks folder, especially for BLE-driven logic.
  • Use Case: When extracting a repeated effect or state cluster from a screen, apply this Skill to shape the hook, choose its inputs and outputs, and keep it compatible with the app's conventions.

Quick Start

Use this skill when creating or refactoring a React custom hook so it follows the repository's conventions for naming, placement, typing, effects, and return stability.

Frequently Asked Questions about react-custom-hook

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract a custom React hook from a component with stable return identities?▼

Refactor custom React hooks by keeping hook calls at the top level, using named exports, and defining explicit TypeScript types for options and returns. This standardizes file shape, enforces React rules, and ensures stable return identities for safer component state.

What is the best way to organize React Native hooks for BLE-driven app workflows?▼

Organize React Native hooks by placing BLE-driven logic in either a feature-local hooks folder or a shared hooks folder. This repository-specific placement ensures hooks remain easy to locate, reuse, and maintain across cross-cutting app workflows.

How do I manage effect cleanup in React custom hooks to prevent memory leaks?▼

Manage effect cleanup in React custom hooks by enforcing disciplined cleanup patterns at the top level of your hook. This standardized approach prevents memory leaks and ensures effects are correctly disposed of during component unmount or dependency changes.

Does refactoring React hooks with TypeScript require explicit return typing?▼

Yes, refactoring React hooks with TypeScript requires explicit option and return typing alongside named exports. This approach standardizes hook creation, improves type safety, and removes default exports to maintain a consistent and predictable file structure.

When should I use a shared hooks folder versus a feature-local hooks folder?▼

Use a shared hooks folder for cross-cutting logic like BLE-driven workflows, and a feature-local hooks folder for screen-specific behavior. This placement strategy ensures custom React hooks are properly scoped for reuse and maintainability.

Related Skills

Explore More Software Engineering Skills→
LuisSambranoLuisSambrano
7

react-patterns

Guide React component design, custom hooks, state management, and performance optimization.

Community
Intermediate
TMHSDigitalTMHSDigital
2

mobile-component-patterns

Generate typed React Native components with StyleSheet or NativeWind and testing scaffolds.

Community
Intermediate
aslaiiaslaii

react-native

Implement scalable Expo Router-based React Native patterns for routing, data flows, and UI.

Community
Intermediate
0xBigBoss0xBigBoss
53

react-best-practices

Guide React hooks, effects, and component design in .tsx/.jsx codebases.

Community
Intermediate