React Native Hooks Course: The Complete

// 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]);

// 3. Consume in any child function ThemedComponent() const theme = React.useContext(ThemeContext); return <Text style= color: theme === 'dark' ? 'white' : 'black' >Hello</Text>;

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

const fetchData = async () => try const res = await fetch(url, signal: abortController.signal ); if (!res.ok) throw new Error('Network error'); const json = await res.json(); setData(json); catch (err) if (err.name !== 'AbortError') setError(err.message); finally setLoading(false); ; The Complete React Native Hooks Course

export default function Counter() const [state, dispatch] = useReducer(reducer, initialState);

const initialState = count: 0, step: 1 ; function reducer(state, action) switch (action.type) case 'increment': return ...state, count: state.count + state.step ; case 'decrement': return ...state, count: state.count - state.step ; case 'setStep': return ...state, step: action.payload ; default: return state;

useEffect(() => let isMounted = true; // Prevents setting state if component unmounts Example: useFetch – Reusable data fetching // useFetch

const fetchData = async () => try const response = await fetch('https://api.example.com/data'); const json = await response.json(); if (isMounted) setData(json); catch (error) console.error(error); finally if (isMounted) setLoading(false); ;

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

intervalRef.current = setInterval(() => setTimer(t => t + 1); , 1000); setData] = useState(null)

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

return items, loadMore, loading, hasMore ;