The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Hooks in React Native

Next ►
►

Introduction

Hooks are a new addition in React 16.8 that allow you to use state and other React features without writing a class. They are functions that let you "hook into" React state and lifecycle features from function components. In this section, we will cover the basics of hooks, how to use them in React Native, and some practical examples.

Key Concepts

  1. What are Hooks?

  • Hooks are special functions that let you use state and other React features in function components.
  • They allow you to reuse stateful logic without changing your component hierarchy.

  1. Why Use Hooks?

  • Simpler Code: Hooks allow you to write components without the need for classes.
  • Reusability: Hooks enable you to reuse stateful logic across multiple components.
  • Better Organization: Hooks can help you organize related logic in a single place.

  1. Commonly Used Hooks

  • useState: Allows you to add state to function components.
  • useEffect: Lets you perform side effects in function components.
  • useContext: Provides a way to pass data through the component tree without having to pass props down manually at every level.

Using useState

Syntax

const [state, setState] = useState(initialState);

Example

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>
  );
};

export default Counter;

Explanation

  • useState(0) initializes the state variable count to 0.
  • setCount is a function that updates the state variable count.
  • The Button component increments the count when pressed.

Using useEffect

Syntax

useEffect(() => {
  // Side effect code
  return () => {
    // Cleanup code
  };
}, [dependencies]);

Example

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

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <View>
      <Text>Seconds: {seconds}</Text>
    </View>
  );
};

export default Timer;

Explanation

  • useEffect runs the side effect code (setting up an interval) after the component renders.
  • The cleanup function (clearInterval) runs when the component unmounts or before the effect runs again.

Using useContext

Syntax

const value = useContext(MyContext);

Example

import React, { useContext } from 'react';
import { View, Text } from 'react-native';

const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);

  return (
    <View>
      <Text>Current Theme: {theme}</Text>
    </View>
  );
};

const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
};

export default App;

Explanation

  • ThemeContext is created with a default value of 'light'.
  • useContext(ThemeContext) retrieves the current context value ('dark' in this case).

Practical Exercises

Exercise 1: Counter with useState

Create a counter component that increments and decrements the count.

Solution

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)} />
      <Button title="Decrement" onPress={() => setCount(count - 1)} />
    </View>
  );
};

export default Counter;

Exercise 2: Fetch Data with useEffect

Create a component that fetches data from an API and displays it.

Solution

import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

const DataFetcher = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => response.json())
      .then(json => {
        setData(json);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <ActivityIndicator />;
  }

  return (
    <View>
      <Text>{data.title}</Text>
      <Text>{data.body}</Text>
    </View>
  );
};

export default DataFetcher;

Common Mistakes and Tips

  • Forgetting Dependencies in useEffect: Always include dependencies in the dependency array to avoid unnecessary re-renders.
  • Updating State Incorrectly: Use the functional form of state update when the new state depends on the previous state.
  • Using Hooks Conditionally: Hooks should always be called at the top level of the component to ensure consistent behavior.

Conclusion

In this section, we covered the basics of hooks in React Native, including useState, useEffect, and useContext. We also provided practical examples and exercises to help you understand how to use hooks effectively. Hooks simplify the code and make it easier to manage state and side effects in function components. In the next section, we will dive into more advanced concepts and hooks.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved