I am making a simple react application in which I am in the need to display user list in select dropdown.
This user list comes from api.
So I am using Context API in my application and I have made a context and made the api call inside the context.
context.js
import React from "react";
import axios from "axios";
export const UserContext = React.createContext();
export function Provider({ children }) {
const getUsers = () => {
return axios.get(`https://randomuser.me/api/?results=10`).then((res) => {
return res;
});
};
return (
<UserContext.Provider value={{ usersList: getUsers() }}>
{children}
</UserContext.Provider>
);
}
users.js
-> Just including context where user data has been fetched and included react-select for dropdown.
-> Using useContext
getting the promise value and inside useEffect
hook getting the response and storing it in a state variable setUsers
-> In render method returning the select box values with the fetched users list as dropdown.
import React, { useContext, useEffect, useState } from "react";
import Select from "react-select";
import { UserContext } from "../context";
const Users = () => {
const { usersList } = useContext(UserContext);
const [users, setUsers] = useState([]);
const getUsers = () => {
usersList.then((users) => {
setUsers(users.data.results);
});
};
useEffect(() => {
getUsers();
}, []);
return (
<div>
<p> Below user list in select box is called from API </p>
<Select
value={""}
name="user"
options={users}
getOptionLabel={(option) => option.name.first}
getOptionValue={(option) => option.id.value}
className="basic-multi-select"
/>
</div>
);
};
export default Users;
Working example:
Query:
-> This works fine but in my real application this leads to multiple api calls
.
-> I have checked in network tab and it has been called for at least 50 times and I feel that this will be a big issue regarding peroformance.
So I would like to know if there is a much better and standard way of implementing this in order to avoid memory leaks and multiple calls for an api fetch?
I am suspecting whether this line,
<UserContext.Provider value={{ usersList: getUsers() }}>
causing the real issue as I am calling getUsers()
method with parathesis ()
but if I remove it the it doesn't get executed..
Please kindly help me and thanks in advance..
getUsers
will only ever be called ifProvider
is rerendered, and sinceProvider
is wrapping everything inApp
it will only ever be called if your entire app is rerendered. You could not immediately invokegetUsers
and just do the call inUsers
when the component mounts, i.e.usersList().then((users) => { setUsers(users.data.results); });
, or do something like @iagowp's answer. When do you wantgetUsers
to be called?