The Complete React Native Hooks Course -

export default function AutoFocusInput() const inputRef = useRef(null); const intervalRef = useRef(null); const [timer, setTimer] = useState(0); useEffect(() => inputRef.current?.focus(); // Focus on mount

useEffect(() => let isMounted = true; // Prevents setting state if component unmounts

For complex state, combine with useReducer . Part 2: Additional Built-in Hooks 4. useReducer – Complex State Logic Goal: Manage state with reducers (predictable state updates).

export default function Counter() const [state, dispatch] = useReducer(reducer, initialState); The Complete React Native Hooks Course

return () => clearInterval(intervalRef.current); , []);

import useNavigation, useRoute, useFocusEffect from '@react-navigation/native'; function ProfileScreen() const navigation = useNavigation(); const route = useRoute(); const userId = route.params;

// Usage in component function UserList() const data, loading, error = useFetch('https://jsonplaceholder.typicode.com/users'); if (loading) return <ActivityIndicator />; if (error) return <Text>Error: error</Text>; return (/* render data */); export default function Counter() const [state, dispatch] =

fetchData(); return () => abortController.abort(); , [url]);

// 1. Create context const ThemeContext = React.createContext('light'); // 2. Provide value at a top level export default function App() return ( <ThemeContext.Provider value="dark"> <ThemedComponent /> </ThemeContext.Provider> );

import React, useState, useEffect from 'react'; import View, Text, ActivityIndicator from 'react-native'; export default function FetchData() const [data, setData] = useState(null); const [loading, setLoading] = useState(true); Example: useFetch – Reusable data fetching // useFetch

// useCallback: memoizes the function itself const handlePress = useCallback(() => console.log('Button pressed', count); , [count]); // Re-create only when count changes // useMemo: memoizes the result of a computation const expensiveValue = useMemo(() => return heavyComputation(data); , [data]);

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();

fetchData();