useState & useEffect
Learn to use React hooks for local state management and side effects in React Native applications. This is a foundational concept in cross-platform mobile development that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world React Native experience. Take your time with each section and practice the examples
useState Hook
useState is the most basic hook for managing local state in functional components. It returns a stateful value and a function to update it, triggering a re-render when the state changes.. This is an essential concept that every React Native developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately
useEffect Hook
useEffect lets you perform side effects in functional components. It's similar to componentDidMount, componentDidUpdate, and componentWillUnmount combined in class components.. This is an essential concept that every React Native developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately
State Management Patterns
- Local state - Component-level state with useState — a critical concept in cross-platform mobile development that you will use frequently in real projects
- Lifted state - State shared between components — a critical concept in cross-platform mobile development that you will use frequently in real projects
- Context state - Global state with Context API — a critical concept in cross-platform mobile development that you will use frequently in real projects
- External state - State managed by libraries like Redux
Hooks Example
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
const CounterApp = () => {
const [count, setCount] = useState(0);
const [isEven, setIsEven] = useState(true);
// Effect to check if count is even
useEffect(() => {
setIsEven(count % 2 === 0);
}, [count]);
// Effect to show alert when count reaches 10
useEffect(() => {
if (count === 10) {
Alert.alert('Congratulations!', 'You reached 10!');
}
}, [count]);
const increment = () => {
setCount(prevCount => prevCount + 1);
};
const decrement = () => {
setCount(prevCount => prevCount - 1);
};
const reset = () => {
setCount(0);
};
return (
<View style={styles.container}>
<Text style={styles.title}>Counter App</Text>
<View style={styles.counterContainer}>
<Text style={styles.count}>{count}</Text>
<Text style={[styles.status, isEven ? styles.even : styles.odd]}>
{isEven ? 'Even' : 'Odd'}
</Text>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity style={styles.button} onPress={decrement}>
<Text style={styles.buttonText}>-</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={increment}>
<Text style={styles.buttonText}>+</Text>
</TouchableOpacity>
</View>
<TouchableOpacity style={styles.resetButton} onPress={reset}>
<Text style={styles.resetButtonText}>Reset</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: '#f5f5f5',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 30,
color: '#333',
},
counterContainer: {
alignItems: 'center',
marginBottom: 30,
},
count: {
fontSize: 48,
fontWeight: 'bold',
color: '#2196F3',
marginBottom: 10,
},
status: {
fontSize: 18,
fontWeight: '500',
},
even: {
color: '#4CAF50',
},
odd: {
color: '#FF9800',
},
buttonContainer: {
flexDirection: 'row',
marginBottom: 20,
},
button: {
backgroundColor: '#2196F3',
width: 60,
height: 60,
borderRadius: 30,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 10,
},
buttonText: {
color: 'white',
fontSize: 24,
fontWeight: 'bold',
},
resetButton: {
backgroundColor: '#f44336',
paddingHorizontal: 30,
paddingVertical: 15,
borderRadius: 8,
},
resetButtonText: {
color: 'white',
fontSize: 16,
fontWeight: 'bold',
},
});
export default CounterApp;