return <Button title="Go back" onPress=() => navigation.goBack() />;

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

import useSelector, useDispatch from 'react-redux'; function TodoList() const todos = useSelector(state => state.todos.items); const dispatch = useDispatch();

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

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

State persists across re-renders; updating state triggers a re-render. 2. useEffect – Handling Side Effects Goal: Replace lifecycle methods ( componentDidMount , componentDidUpdate , componentWillUnmount ).

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

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

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;

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

useFocusEffect( useCallback(() => // Reload data when screen comes into focus loadUserData(userId); return () => console.log('Screen unfocused'); , [userId]) );

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

Use these with React.memo to skip re-rendering child components. 6. useRef – Mutable References & DOM Access Goal: Store mutable values (don't trigger re-renders) or access native elements.

intervalRef.current = setInterval(() => setTimer(t => t + 1); , 1000);