React effect infinite re-renders when fetching data - reactjs

Question

I want to fetch an array from the backend using a Provider, Context and useEffect:
import React, {useState, useEffect} from 'react'
const UsersContext = React.createContext()
const fetchUsers = async () => {
const url = 'http://localhost:3000/users'
const response = await fetch(url)
console.log('response', await response.json())
return response
}
export const UsersProvider = ({children}) => {
// state
const [users, setUsers] = useState([])
// query data
const data = fetchUsers()
console.log('data', data)
// component updates
useEffect(() => {
if (data) {
// setUsers(data)
}
}, [data])
return (
<UsersContext.Provider value={users}>
{children}
</UsersContext.Provider>
)
}
If I set the users once I have the data back from the backend, I get infinite re-render. The issue is, data is always a promise, although I can see the response after the call is being made:
In the fetchUsers method:
console.log('response', await response.json())
{users: Array(1)}
users: Array(1)
0:
created_at: "2019-10-09T17:41:21.818Z"
email: "ash#email.com"
id: 1
name: "ash"
password_digest: "dafasfae"
updated_at: "2019-10-09T17:41:21.818Z"
In the UsersProvider:
console.log('data', data)
Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Response
body: (...)
bodyUsed: true
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "http://localhost:3000/users"
__proto__: Response

Answer 1

I would move the fetchUsers function inside the effect and try like this:
import React, { useState, useEffect } from "react";
const UsersContext = React.createContext();
export const UsersProvider = ({ children }) => {
// state
const [users, setUsers] = useState([]);
// component mounts
useEffect(() => {
const fetchUsers = async () => {
const url = "http://localhost:3000/users";
const response = await fetch(url);
const usersData = await response.json();
setUsers(usersData);
};
fetchUsers();
}, []);
return (
<UsersContext.Provider value={users}>{children}</UsersContext.Provider>
);
};
Here is a very good post about fetching data with react hooks:
https://www.robinwieruch.de/react-hooks-fetch-data

Answer 2

Your data fetch needs to happen inside the useEffect call. What's happening right now is every time your component renders, you are re-fetching the list of users which causes the data object to change and triggers a re-render. The code below will fetch the data only when the component mounts.
useEffect(() => {
let canceled = false;
const fetchData = async () => {
const users = await fetchUsers();
if (!canceled && data) {
setUsers(data);
}
};
fetchUsers();
return () => { canceled = true; }
}, []);

Answer 3

return only data
const fetchUsers = async () => {
const url = 'http://localhost:3000/users'
const response = await fetch(url)
.then( data => {
return data
})
.catch(err=>console.log(err));
return response;
}
hope this will help you.