return ( <View> <TextInput placeholder="Enter your name" value=name onChangeText=setName style= borderWidth: 1, margin: 10, padding: 8 /> <Button title="Submit" onPress=() => setSubmitted(true) /> submitted && <Text>Hello, name!</Text> </View> );
// 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> ); The Complete React Native Hooks Course
return ( <View> <Text>Count: state.count</Text> <Button title="+" onPress=() => dispatch( type: 'increment' ) /> <Button title="-" onPress=() => dispatch( type: 'decrement' ) /> </View> ); src/ ├── hooks/ │ ├── useFetch
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; FavoritesContext) ├── screens/ (FeedScreen
Goal: Memoize functions and values to prevent unnecessary re-renders.
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