useState & useEffect
Learn to use React hooks for local state management and side effects in React Native applications
60 min•By Priygop Team•Last updated: Feb 2026
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.
useEffect Hook
useEffect lets you perform side effects in functional components. It's similar to componentDidMount, componentDidUpdate, and componentWillUnmount combined in class components.
State Management Patterns
- Local state - Component-level state with useState
- Lifted state - State shared between components
- Context state - Global state with Context API
- External state - State managed by libraries like Redux
Hooks Example
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;