hooks

Original：🇺🇸 English

Translated

React hooks

1installs

Sourceelie222/inbox-zero

Added on2026-02-16

NPX Install

npx skill4agent add elie222/inbox-zero hooks

Tags

Translated version includes tags in frontmatter

react-hooks custom-hook-guidelines data-fetching useSWR code-standard

SKILL.md Content

View Translation Comparison →

Custom Hook Guidelines

This rule outlines the guidelines for creating custom React hooks within this project.

Custom Hooks

Purpose: Encapsulate reusable stateful logic, especially for data fetching or complex UI interactions.
Location: Place custom hooks in the
```
apps/web/hooks/
```
directory.
Naming: Use the
```
use
```
prefix (e.g.,
```
useAccounts.ts
```
).
Data Fetching: For fetching data from API endpoints, prefer using
```
useSWR
```
. Follow the guidelines outlined in data-fetching.mdc.
- Create dedicated hooks for specific data types (e.g.,
```
useAccounts
```
  ,
```
useLabels
```
  ).
- The hook should typically wrap
```
useSWR
```
  , handle the API endpoint URL, and return the data, loading state, error state, and potentially the
```
mutate
```
  function from SWR.
Simplicity: Keep hooks focused on a single responsibility.

By adhering to these guidelines, we ensure a consistent approach to reusable logic and data fetching throughout the application.