React Native - State

React Native - State

In React Native, a component’s data is managed by state and props. This chapter focuses on state, which allows components to store and manage data that can change over time, triggering re-renders of the UI.

Understanding State and Props

State is data that a component owns and can modify internally. When state changes, the component re-renders. Props (short for properties) are read-only data passed from a parent component to a child component. A component cannot change its own props directly.

Think of state as a component’s private data store, while props are like configuration parameters passed from outside.

Using State with Hooks

Modern React Native development heavily utilizes functional components and Hooks. The useState Hook is the primary way to add state to functional components.

Let’s create a simple component that displays a piece of text from its state.

MyStateComponent.js

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

const MyStateComponent = () => {
  // Declare a state variable named 'message' and a function 'setMessage' to update it.
  // 'useState' takes the initial state as an argument.
  const [message, setMessage] = useState(
    'This is an initial message from state. Tap the button to change it!'
  );

  const updateMessage = () => {
    setMessage('The message has been updated!');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>{message}</Text>
      <Button title="Update Message" onPress={updateMessage} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  text: {
    fontSize: 18,
    marginBottom: 20,
    textAlign: 'center',
  },
});

export default MyStateComponent;

In this example:

1. We import useState from ‘react’.
2. useState('Initial message') initializes message with ‘Initial message’ and provides setMessage to update it.
3. The Text component displays the current value of message.
4. The Button component, when pressed, calls updateMessage, which in turn calls setMessage to update the state, causing the component to re-render and display the new message.

When you run this component, you’ll see the initial message. Tapping the ‘Update Message’ button will change the text displayed on the screen.

Key Concepts of useState

• Initialization: useState takes the initial value of the state variable as its argument. This can be a string, number, boolean, array, object, or even null.
• Return Value: It returns an array with two elements: the current state value and a function to update that state value.
• Updating State: Always use the setter function (e.g., setMessage) to update state. Directly modifying the state variable (e.g., message = 'new value') will not trigger a re-render and is incorrect.
• Asynchronous Updates: State updates with the setter function might be asynchronous. React may batch multiple state updates for performance reasons. If you need to use the previous state to calculate the new state, use the functional update form: setMessage(prevMessage => prevMessage + ' updated');

For more complex state logic, you might explore the useReducer Hook, which is often preferred for managing state with multiple sub-values or when the next state depends on the previous one in a more complex way. You can learn more at the official React documentation: https://react.dev/reference/react/useState