React Native State Management

• State management in React Native is a crucial aspect of application development, covered in Module 5 | Midterm.
• Working with APIs and Data is also covered in Module 6 | Midterm.

What is State?

• State is an object storing component-specific data, which can change over time.
• Unlike props, which are immutable and passed from a parent component, state is managed within the component itself.
• State can be dynamically updated, triggering a re-render of the component.

Local State

• Local state refers to state variables existing within a specific component.
• Local State affects only that specific component.
• It is not shared with other components unless explicitly passed as props.

Global State

• Global state refers to a state shared across multiple components.
• Global state makes data accessible from anywhere in the app.
• It is useful for managing data that needs to be accessed and updated by multiple components.

useState Hook

• The useState hook is a built-in React Hook that allows functional components to manage state.
• It enables components to store, update, and track state changes without using class components.
• Syntax: const [state, setState] = useState(initialValue);
• state: The current state value.
• setState: A function that updates the state.
• initialValue: The initial value of the state.

useEffect Hook

• The useEffect hook is used to handle side effects in functional components.
• It can handle fetching data from an API, updating the UI after a state change and managing timers or intervals.
• useEffect runs after the component renders.
• The dependency array ([]) controls when useEffect executes.
• Syntax:

  import React, { useEffect } from 'react';
  useEffect(() => {
  // Code to run after component renders
  }, [dependency]); // Dependency array (optional)
  

useReducer Hook

• The useReducer hook serves as an alternative to the useState hook.
• It is useful for managing complex state logic in React Native applications
• useReducer is commonly used when the state involves multiple sub-values, when the next state depends on the previous state, and actions need to be explicitly defined.
• Basic Syntax of useReducer is const [state, dispatch] = useReducer(reducer, initialState);
• state: The current state value.
• dispatch(action): Function used to update state.
• reducer(state, action): A function that takes the current state and an action, then returns the new state.
• initialState: The starting state value.

Redux

• Redux is a state management library that helps manage global state in large applications.
• It provides a centralized store, making it easier to manage and share data across multiple components.

Redux Core Concepts

• Store: Holds the entire application state.
• Actions: Describe what should happen.
• Reducers: Specify how the state should change.
• Dispatch: Sends actions to update the state.

Context API

• The Context API is a built-in feature in React that enables state sharing across multiple components without prop drilling.

Redux vs. Context API

What is an API?

• API (Application Programming Interface) is a set of rules and protocols that allows different software applications to communicate with each other.
• It defines the methods and data formats that applications can use to request and exchange information.

Concepts of an API

• Request and Response: APIs work through requests sent by a client to a server, which processes the request and sends back a response.
• Endpoints: Specific URLs where the API can be accessed.
• Methods: Include GET (retrieve data), POST (send new data), PUT (update existing data), and DELETE (remove data).
• Formats: APIs typically exchange data in formats like JSON or XML.
• Authentication: APIs often require authentication methods like API keys, OAuth, or tokens for security.

Types of APIs

• Web APIs: Used for communication over the internet.
• Library/API Frameworks: Used within a programming language.
• Operating System APIs: Allow apps to interact with OS features.

RESTful APIs

• A RESTful API (or REST API) is an application programming interface (API) that follows the principles of Representational State Transfer (REST), a software architectural style, to enable communication between clients and servers.
• It commonly uses HTTP methods like GET, POST, PUT, and DELETE.

JSON (JavaScript Object Notation)

• JSON is a lightweight data format used for exchanging data between a client and a server.
• It is easy to read, write, and parse.
• JSON is a widely used format in RESTful APIs.

JSON Data Structure

• JSON consists of key-value pairs, similar to a JavaScript object.
• Example:

  {
  "name": "John Doe",
  "age": 25,
  "email": "[email protected]"
  }
  

• Nested JSON Example:

  {
  "user": {
  "id": 101,
  "name": "Alice",
  "contact": {
  "email": "[email protected]",
  "phone": "+1234567890"
  }
  }
  }
  

• JSON Array Example:

  {
  "students": [
  { "id": 1, "name": "John", "age": 22 },
  { "id": 2, "name": "Alice", "age": 23 },
  { "id": 3, "name": "Bob", "age": 24 }
  ]
  }
  

JSON Data Types

• JSON supports diverse data types.
• String: "Hello World"
• Number: 123, 45.6
• Boolean: true, false
• Null: null
• Array: [1, 2, 3]
• Object: { "key": "value" }

Fetch API

• The Fetch API is a built-in JavaScript method for making HTTP requests.
• It is available in React Native without requiring any additional installation.
• It requires extra handling for error management, timeouts, and response parsing.

Axios

• Axios is a popular JavaScript library for making HTTP requests.
• Unlike Fetch API, Axios has built-in features for automatic JSON parsing, request cancellation, error handling, and timeouts.
• It is widely used in React Native for handling API calls efficiently.

Fetch API vs. Axios in React Native

Making a GET Request using Axios

import axios from 'axios';
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(response => setData(response.data))
.catch(error => setError(error.message))
.finally(() => setLoading(false));
}, []);

Making a POST Request using Axios

const handlePostRequest = async () => {
try {
const response = await
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'React Native API Handling',
body: 'This is a sample post request.',
userId: 1,
});
console.log('Post Created:', response.data);
} catch (error) {
console.error('Error:', error);
}
};

Expected Response from POST Request

{
"title": "React Native API Handling",
"body": "This is a sample post request.",
"userId": 1,
"id": 101
}

Parsing and Displaying JSON Data

• Once JSON data is fetched from an API, it needs to be parsed and displayed in a React Native application.

AsyncStorage

• AsyncStorage is a simple, key-value storage system for React Native.
• It allows storing small amounts of data persistently on the device, even after the app is closed and reopened.

When to Use AsyncStorage

• Small key-value storage: user preferences, authentication tokens.
• Persistent data across sessions: dark mode settings, last visited screen.
• Simple offline storage: caching small API responses.
• Low read/write frequency: not frequently updated data.