Fetch data API and export result into another component

I'm new in react native, and i'm trying to capture json data from an API, and then exporting it to a Context to be able to use it in a Provider, when I import the file that fetchs, in a list component for example, everything happens normally, but when I import it in the Context , an empty array arrives, probably because it was exporting the data before finalizing the fetch result.

How can I export the data so that I can put it in the providers to make the state available to the part of the application that needs this information?

I already tried using useEffect , async / await , promise, with the examples I found on the internet, but I was unsuccessful

Fetch file

import React, { useState, useEffect } from 'react';
export type Products = {
item: {
id: number,
title: string,
description: string,
price: number,
discountPercentage: number,
rating: number,
stock: number,
brand: string,
category: string,
thumbnail: string,
images: []
}
}
export const getAllProducts = () => {
const [data, setData] = useState([]);
const url = "https://dummyjson.com/products"
useEffect(() => {
fetch(url)
.then((resp) => resp.json())
.then((json) => setData(json.products))
.catch((error) => console.error(error))
}, []);
// result of console.log = 
// LOG  Running "rncrud" with {"rootTag":241}
// LOG  []
// LOG  []
// LOG  [{"brand": "Apple", "category": "smartphones", "description"..........]}
return {
data
}
}

Context file :

import React, { createContext, useReducer } from 'react'
import { getAllProducts, Products } from '../data/products'
const { data } = getAllProducts() // console.log(data) result : data = []
const initialState = { data }
const ProductsContext = createContext({})
type State = {
products: [Products['item']]
};
type Actions = {
type: string,
payload: Products['item'],
}
const actions: any = {
createProduct(state: State, action: Actions) {
const product = action.payload
product.id = Math.random()
return {
...state,
products: [...state.products, product]
}
},
updateProduct(state: State, action: Actions) {
const updated = action.payload
return {
...state,
products: state.products.map(u => u.id === updated.id ? updated : u)
}
},
deleteProduct(state: State, action: Actions) {
const product = action.payload
return {
...state,
products: state.products.filter((prod: { id: number }) => prod.id !== product.id)
}
}
}
export const ProductsProvider = (props: any) => {
function reducer(state: any, action: Actions) {
const fn: any = actions[action.type]
return fn ? fn(state, action) : state
}
const [state, dispatch] = useReducer(reducer, initialState)
return (
<ProductsContext.Provider value={{ state, dispatch }}>
{props.children}
</ProductsContext.Provider>
)
}
export default ProductsContext

List file where it works

import React, { useContext } from 'react'
import { View, FlatList } from 'react-native'
import { getAllProducts, Products } from '../data/products'
import ProductCard from '../components/ProductCard';
import ProductsContext from '../context/ProductContext';
const numColumns = 2
const isAdmin: boolean = true
export default (props: any) => {
const { data } = getAllProducts() // here data is an array of objects with data
//const { state, dispatch }: any = useContext(ProductsContext)
function getProductItemCard({ item: prod }: Products) {
const nav = props.navigation
return (
<ProductCard
product={{ prod }}
navigation={{ nav }}
isAdmin={isAdmin}
/>
)
}
return (
<View>
<FlatList
numColumns={numColumns}
keyExtractor={p => `${p['id']}`}
data={data}
renderItem={getProductItemCard}
/>
</View>
)
}

Fetch data API and export result into another component

custom Hooks

we can create a custom hook outside of component using useeffect. it is very simple

example

import { useEffect, useState } from "react";
const url = "https://dummyjson.com/products";
export const useProducts = () => {
const [loading, setLoading] = useState(false);
const [products, setProducts] = useState([]);
useEffect(() => {
fetchProducts();
}, []);
const fetchProducts = async () => {
try {
setLoading(true);
const res = await fetch(url).then((data) => data.json());      
setProducts(res.products);
setLoading(false);
} catch (error) {
setLoading(false);
throw new Error(error);
} finally {
setLoading(false);
}
};
return [products, loading];
};

and we can use like

const [products, loading] = useProducts();

reusable hook fun

• pls note I just show in react web. but there is same hook and login in react native.
• I hope that can help you