hooks

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

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

本规则概述了在本项目中创建自定义React 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.

用途： 封装可复用的有状态逻辑，尤其适用于数据获取或复杂UI交互场景。
存放位置： 将自定义Hook放置在
```
apps/web/hooks/
```
目录下。
命名规则： 使用
```
use
```
作为前缀（例如：
```
useAccounts.ts
```
）。
数据获取： 从API端点获取数据时，优先使用
```
useSWR
```
。请遵循data-fetching.mdc中概述的指南。
- 为特定数据类型创建专用Hook（例如：
```
useAccounts
```
  、
```
useLabels
```
  ）。
- Hook通常应封装
```
useSWR
```
  ，处理API端点URL，并返回数据、加载状态、错误状态，以及可能的SWR中的
```
mutate
```
  函数。
简洁性： 保持Hook专注于单一职责。

遵循这些指南，我们可确保在整个应用中采用一致的方式处理可复用逻辑和数据获取。