Module 5: State Management

Master state management patterns and libraries for React Native applications.

Back to Course|5 hours|Intermediate

State Management

Master state management patterns and libraries for React Native applications.

Progress: 0/4 topics completed0%

Select Topics Overview

useState & useEffect

Learn to use React hooks for local state management and side effects in React Native applications

Content by: Ronak Macwan

React Native Developer

Connect

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

Code 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;
Swipe to see more code

šŸŽÆ Practice Exercise

Test your understanding of this topic:

Previous Module

Module 4: Navigation & Routing

Next Module

Module 6: API Integration & Data Fetching

Ready for the Next Module?

Continue your learning journey and master the next set of concepts.

Continue to Module 6