**Course Title:** Building Mobile Applications with React Native **Section Title:** State Management with Hooks **Topic:** Introduction to React Hooks (useState, useEffect) **Introduction** React Hooks is a powerful feature in React that allows you to manage state and side effects in functional components. In this topic, we'll explore the basics of React Hooks, including the `useState` and `useEffect` hooks. **What are React Hooks?** React Hooks is a way to use state and other React features in functional components. They were introduced in React 16.8 as a way to simplify the process of managing state and side effects in functional components. Before React Hooks, functional components were limited in their ability to manage state and side effects. They had to be wrapped in a class component or use a third-party library to manage state. **The useState Hook** The `useState` hook is used to manage state in functional components. It takes an initial state as an argument and returns an array with two elements: the current state and a function to update the state. Here's an example of using the `useState` hook: ```jsx import React, { useState } from 'react'; import { View, Text, Button } from 'react-native'; const Counter = () => { const [count, setCount] = useState(0); return ( <View> <Text>Count: {count}</Text> <Button title="Increment" onPress={() => setCount(count + 1)} /> </View> ); }; ``` In this example, we use the `useState` hook to create a state variable `count` and a function to update it `setCount`. We then use the `setCount` function to increment the count when the button is pressed. **The useEffect Hook** The `useEffect` hook is used to manage side effects in functional components. It takes a function as an argument and runs it after the component has rendered. Here's an example of using the `useEffect` hook: ```jsx import React, { useState, useEffect } from 'react'; import { View, Text, Button } from 'react-native'; const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { console.log('Component mounted'); }, []); return ( <View> <Text>Count: {count}</Text> <Button title="Increment" onPress={() => setCount(count + 1)} /> </View> ); }; ``` In this example, we use the `useEffect` hook to run a function after the component has rendered. The function logs a message to the console. **Key Concepts** * React Hooks is a way to use state and other React features in functional components. * The `useState` hook is used to manage state in functional components. * The `useEffect` hook is used to manage side effects in functional components. * Hooks are functions that start with the word "use". **Practical Takeaways** * Use the `useState` hook to manage state in functional components. * Use the `useEffect` hook to manage side effects in functional components. * Keep your hooks at the top level of your component. * Don't call hooks inside loops or conditional statements. **Example Use Case** Here's an example use case that demonstrates how to use the `useState` and `useEffect` hooks together: ```jsx import React, { useState, useEffect } from 'react'; import { View, Text, Button } from 'react-native'; const RandomNumberGenerator = () => { const [number, setNumber] = useState(0); useEffect(() => { setNumber(Math.floor(Math.random() * 100)); }, []); return ( <View> <Text>Random Number: {number}</Text> <Button title="Generate New Number" onPress={() => setNumber(Math.floor(Math.random() * 100))} /> </View> ); }; ``` In this example, we use the `useState` hook to create a state variable `number` and a function to update it `setNumber`. We then use the `useEffect` hook to generate a new random number and update the state when the component mounts. **Next Steps** In the next topic, we'll explore how to manage local component state using React Hooks. You can find more information about React Hooks in the [official React documentation](https://reactjs.org/docs/hooks-intro.html). If you have any questions or need help with this topic, please leave a comment below.