Fix useApi to not return a new axios instance every render

[ko-lem]

Problem

useApi creates and returns a new axios instance every render. This makes it unusable as a useEffect dependency which is unfortunate when working in a project that uses the recommended exhaustive-deps lint rule.

For example:

function Component () {
  const api = useApi();
  const [response, setResponse] = useState(false);

  useEffect(() => {
    api.get("/api/verify-token")
    .then((res) => {
      setResponse(res.data);
    });
  }, []);

  ...
}

The above code works fine. But in a project that uses exhaustive-deps, you will be forced to add in api in the array. That is a problem since it triggers never ending API requests.

function Component () {
  const api = useApi();
  const [response, setResponse] = useState(false);

  useEffect(() => { // This will be executed every render while also triggering a re-render.
    api.get("/api/verify-token")
    .then((res) => {
      setResponse(res.data);
    });
  }, [api]);

  ...
}

The way we deal with this is to just leave out api from the dependency array and add // eslint-disable-next-line react-hooks/exhaustive-deps above. This does work but is not ideal in my opinion, especially when there are other dependencies that we have to remember to include.

Solution

useApi can just maintain one instance of axios and return that one non-changing instance.

[ctrlaltdylan]

Thanks for the contribution @ko-lem !