How can I use AsyncStorage with React hooks?

How can I use AsyncStorage with React hooks?

You can use the useEffect and useState hooks to manage AsyncStorage in your React components.

Can you show me a code example?

Sure! Here's a simple example:

import React, { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const MyComponent = () => {
    const [data, setData] = useState('');

    useEffect(() => {
        const fetchData = async () => {
            const value = await AsyncStorage.getItem('myKey');
            if (value !== null) {
                setData(value);
            }
        };
        fetchData();
    }, []);

    const saveData = async (newData) => {
        await AsyncStorage.setItem('myKey', newData);
        setData(newData);
    };

    return (
        <View>
            <Text>{data}</Text>
            <Button title="Save Data" onPress={() => saveData('Hello World!')} />
        </View>
    );
};

This code fetches data from AsyncStorage and allows you to save new data.

What if I want to clear the stored data?

You can use the AsyncStorage.removeItem method to clear specific data. Here's how:

const clearData = async () => {
    await AsyncStorage.removeItem('myKey');
    setData(''); // Clear the state as well
};