编写自定义钩子
将有状态逻辑提取为可复用的自定义钩子，在两个组件之间共享它，并遵循钩子的命名约定和规则。
编写自定义钩子 是 CoddyKit 上的免费 React Native Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Native Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Native Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
What Are Custom Hooks?
Custom hooks are JavaScript functions whose names start with use and that may call other React hooks inside them. They let you extract stateful logic from a component into a reusable function. The logic is shared, but each component that calls the custom hook gets its own isolated state — custom hooks are not singletons.
The Rules of Hooks Apply to Custom Hooks
Custom hooks follow the same rules as built-in hooks: only call hooks at the top level (not inside loops or conditions), and only call hooks from React function components or other custom hooks. The use naming prefix is required — it signals to React and linters that the function follows these rules.
// Valid custom hook — starts with 'use'
function useCounter(initialValue) {
const [count, setCount] = useState(initialValue);
const increment = () => setCount(c => c + 1);
const decrement = () => setCount(c => c - 1);
const reset = () => setCount(initialValue);
return { count, increment, decrement, reset };
}A useCounter Custom Hook
The useCounter hook encapsulates a counter's state and its increment, decrement, and reset actions. Any component that needs a counter can call useCounter without repeating the state management logic. Each call to the hook creates an independent counter.
function CounterScreen() {
const { count, increment, decrement, reset } = useCounter(0);
return (
<View>
<Text>Count: {count}</Text>
<Button title='+' onPress={increment} />
<Button title='-' onPress={decrement} />
<Button title='Reset' onPress={reset} />
</View>
);
}A useFetch Custom Hook
A useFetch hook wraps the common pattern of fetching data with useEffect: it manages loading, data, and error states internally, and exposes them to the component. The URL is a dependency — changing it re-triggers the fetch.
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
setLoading(true);
fetch(url)
.then((res) => res.json())
.then((json) => { setData(json); setLoading(false); })
.catch((err) => { setError(err); setLoading(false); });
}, [url]);
return { data, loading, error };
}Using the useFetch Hook
Components using useFetch become dramatically simpler. The component only describes what to render for each state (loading, error, data) without managing any fetch logic itself. If the same endpoint is needed in another screen, just call useFetch again — no code duplication.
function PostsScreen() {
const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/posts');
if (loading) return <ActivityIndicator />;
if (error) return <Text>Error: {error.message}</Text>;
return (
<FlatList
data={data}
keyExtractor={(item) => String(item.id)}
renderItem={({ item }) => <Text>{item.title}</Text>}
/>
);
}A useToggle Custom Hook
A useToggle hook simplifies managing boolean state that needs to switch between true and false. It is useful for modals, accordions, dark mode, or any feature that toggles. The hook returns the current value and a stable toggle function.
function useToggle(initialValue = false) {
const [value, setValue] = useState(initialValue);
const toggle = useCallback(() => setValue((v) => !v), []);
return [value, toggle];
}
// Usage
const [isVisible, toggleVisible] = useToggle(false);
<Button title='Show/Hide' onPress={toggleVisible} />
<Modal visible={isVisible} ... />A useForm Custom Hook
A useForm hook manages a form's field values, change handler, and reset action. This pattern eliminates boilerplate in forms across the app. The hook accepts an object of initial field values and returns the current values, a generic field change handler, and a reset function.
function useForm(initialValues) {
const [values, setValues] = useState(initialValues);
const handleChange = useCallback((field, value) => {
setValues((prev) => ({ ...prev, [field]: value }));
}, []);
const reset = useCallback(() => setValues(initialValues), [initialValues]);
return { values, handleChange, reset };
}A useNetworkStatus Custom Hook
A useNetworkStatus hook wraps the NetInfo API to expose the device's online/offline status. Components can simply read the boolean value without knowing about event subscription setup and teardown — the hook handles that internally with a useEffect cleanup function.
import NetInfo from '@react-native-community/netinfo';
function useNetworkStatus() {
const [isOnline, setIsOnline] = useState(true);
useEffect(() => {
const unsubscribe = NetInfo.addEventListener((state) => {
setIsOnline(state.isConnected ?? true);
});
return unsubscribe; // cleanup on unmount
}, []);
return isOnline;
}Sharing Logic Between Components
The real power of custom hooks is sharing logic, not UI. Two screens can both call useNetworkStatus and each gets its own subscription. If the hook has a side effect (like a subscription), it is automatically cleaned up when the component using it unmounts. Each component's hook instance is fully independent.
// Both screens share the same logic, not the same state
function HomeScreen() {
const isOnline = useNetworkStatus();
return <Text>{isOnline ? 'Online' : 'Offline'}</Text>;
}
function ProfileScreen() {
const isOnline = useNetworkStatus(); // independent subscription
return <Banner visible={!isOnline} message='No connection' />;
}Custom Hook Naming and Organization
Name custom hooks descriptively: useAuth, useCart, useDebounce, useWindowDimensions. Store hooks in a dedicated hooks/ directory to keep them organized and findable. Each hook should have a single clear responsibility — avoid creating hooks that do five unrelated things.
// Project structure
src/
hooks/
useAuth.js
useFetch.js
useForm.js
useToggle.js
useNetworkStatus.jsA useDebounce Custom Hook
A useDebounce hook delays propagating a value until a specified time has passed since the last update. This is perfect for search inputs where you want to wait until the user stops typing before firing an API request. The hook uses useEffect and a timer to manage the delay.
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debouncedValue;
}
// Usage
const debouncedQuery = useDebounce(searchQuery, 400);
useEffect(() => { fetchResults(debouncedQuery); }, [debouncedQuery]);Quick Check
Test your understanding of writing custom hooks from this lesson.
Lesson Recap
In this lesson you learned: custom hooks are functions starting with 'use' that encapsulate stateful logic, each component calling a custom hook gets its own independent state and effects, and organize hooks in a dedicated hooks/ directory for a single responsibility per hook. Next up we explore the Context API for sharing global state without prop drilling.
常见问题解答
「编写自定义钩子」课时是免费的吗？
是的 — 「编写自定义钩子」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Native Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Native Academy 课程共包含 4 节课。
「编写自定义钩子」这节课中我会学到什么？
将有状态逻辑提取为可复用的自定义钩子，在两个组件之间共享它，并遵循钩子的命名约定和规则。 你通过在浏览器中直接运行的动手代码来练习 React Native Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Native Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Native Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「编写自定义钩子」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Native Academy 课中编写并运行代码吗？
能。每节 React Native Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。