1

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:

Edit React Context API (forked)

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..

5
  • react-query.tanstack.com
    – Spidy
    Apr 23, 2021 at 2:05
  • make it async and await it? Apr 23, 2021 at 2:06
  • I think the Users and Provider you show here work fine. Let's take a step back and check where you call the Provider component. Is there anything miswork that cause the Provider component to be mounted and unmounted more than once? Apr 23, 2021 at 2:09
  • From what I can see here and from your codesandbox, the getUsers will only ever be called if Provider is rerendered, and since Provider is wrapping everything in App it will only ever be called if your entire app is rerendered. You could not immediately invoke getUsers and just do the call in Users when the component mounts, i.e. usersList().then((users) => { setUsers(users.data.results); });, or do something like @iagowp's answer. When do you want getUsers to be called?
    – Drew Reese
    Apr 23, 2021 at 4:01
  • @DrewReese, Thanks for your comment bro, will check for the below modified solution..
    – Undefined
    Apr 23, 2021 at 4:42

1 Answer 1

1

You can store the user list in an array, and have your components call getUsers on mount. Then just use users wherever you need

export function Provider({ children }) {
  const [users, setUsers] = useState([]);
  const getUsers = () => {
    if (!users.length) {
      axios.get(`https://randomuser.me/api/?results=10`).then((res) => {
        setUsers(res.data.results);
      });
    }
  };

  return (
    <UserContext.Provider value={{ usersList: users, getUsers }}>
      {children}
    </UserContext.Provider>
  );
}

On User.js

const Users = () => {
  const { usersList, getUsers } = useContext(UserContext);

  useEffect(() => {
    getUsers();
  }, [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>
  );
};
3
  • This gives empty userList array codesandbox.io/s/react-context-api-forked-v31k5
    – Undefined
    Apr 23, 2021 at 2:24
  • @Undefined You need to get getUsers in your component, and call it inside a useEffect with an empty array for dependecy
    – iagowp
    Apr 23, 2021 at 3:36
  • @Undefined I've changed my answer to be more complete
    – iagowp
    Apr 23, 2021 at 3:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.