intervalRef.current = setInterval(() => setTimer(t => t + 1); , 1000);
import useNavigation, useRoute, useFocusEffect from '@react-navigation/native'; function ProfileScreen() const navigation = useNavigation(); const route = useRoute(); const userId = route.params;
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). The Complete React Native Hooks Course
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> );
// 3. Consume in any child function ThemedComponent() const theme = React.useContext(ThemeContext); return <Text style= color: theme === 'dark' ? 'white' : 'black' >Hello</Text>; intervalRef
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 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); ; Example: useFetch – Reusable data fetching // useFetch
return <TextInput ref=inputRef placeholder="Auto-focused" />;
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); ;
