Goal: Extract component logic into reusable functions. Example: useFetch – Reusable data fetching // useFetch.js export function useFetch(url) const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => const abortController = new AbortController();
State persists across re-renders; updating state triggers a re-render. 2. useEffect – Handling Side Effects Goal: Replace lifecycle methods ( componentDidMount , componentDidUpdate , componentWillUnmount ).
return <Button title="Go back" onPress=() => navigation.goBack() />; The Complete React Native Hooks Course
if (loading) return <ActivityIndicator size="large" />; return ( <View> <Text>JSON.stringify(data)</Text> </View> );
import React, useState from 'react'; import View, Text, Button, TextInput from 'react-native'; export default function UserInput() const [name, setName] = useState(''); const [submitted, setSubmitted] = useState(false); Goal: Extract component logic into reusable functions
return () => isMounted = false; ; // Cleanup on unmount , []); // Empty array = run once after mount
useFocusEffect( useCallback(() => // Reload data when screen comes into focus loadUserData(userId); return () => console.log('Screen unfocused'); , [userId]) ); useEffect – Handling Side Effects Goal: Replace lifecycle
src/ ├── hooks/ │ ├── useFetch.js │ ├── useDebounce.js │ └── useFavorites.js (useReducer based) ├── contexts/ (ThemeContext, FavoritesContext) ├── screens/ (FeedScreen, DetailScreen, FavoritesScreen) └── components/ (NewsCard, SearchBar) ✅ Core hooks: useState , useEffect , useContext ✅ Performance hooks: useCallback , useMemo , React.memo ✅ Refs: useRef for mutable values and DOM access ✅ Advanced: useReducer , custom hooks, navigation hooks ✅ Rules of hooks – no conditional calls ✅ Testing & debugging – DevTools, unit tests ✅ Real-world patterns – infinite scroll, debounced search, cleanup functions ✅ Final project – fully functional React Native app using hooks exclusively
"plugins": ["react-hooks"], "rules": "react-hooks/rules-of-hooks": "error", "react-hooks/exhaustive-deps": "warn"