如何在 React 中创建使用外部上下文的类服务提供者？

Question

I'm trying to create a service class that provides the whole application with common access to an e xternal Rest api.

The first issue I face is that this external api needs to be consumed as a Context, so my first approach was to create a custom context to consume and configure all the rest calls. See code:

export const ApiContext = createContext();

const ApiProvider = ({ children }) => {
    const api = externalApiContext();

    const get = (url, params) =>
        api.get(urlWithParams(`${baseUrl}${url}${admkey}`, params));

    const post = (url, body, params = {}, headers = {}) =>
        api.post(urlWithParams(`${baseUrl}${url}${admkey}`, params), {
            headers: { ...headers, 'Content-Type': 'application/json' },
            body: JSON.stringify(body),
        });

    const put = (url, body, params = {}, headers = {}) =>
        api.put(urlWithParams(`${baseUrl}${url}${admkey}`, params), {
            headers: { ...headers, 'Content-Type': 'application/json' },
            body: JSON.stringify(body),
        });

    const remove = (url, params = {}, headers = {}) =>
        api.remove(urlWithParams(`${baseUrl}${url}${admkey}`, params), {
            headers: { ...headers, 'Content-Type': 'application/json' },
        });

    const fetch = (url) => api.get(`${url}`);

    return (
        <ApiContext.Provider value={{ get, post, put, remove, fetch }}>
            {children}
        </ApiContext.Provider>
    );
};

This works fine. I can configure and make the calls all around the application. The problem is: Whenever I make any of these calls, all of them are re-rendered as my context seems to have changed .

So I have 2 doubts:

1. Is this code correct to provide a general place to provide with a Context that provides with an external Rest api context? I am missing something that makes the context re-render?

By the other hand, I was trying to create a service class like posted here: https://newbedev.com/having-services-in-react-application . But then, inside a service class, a Context cannot be used... So...

2. Is there any way to create a common service Class that is able to consume an external Context api?

Thanks in advance!

Answer 1

As a start, you need to realize why your components re-render:

ApiProvider re-renders because, either it's parent component re-renders or because children changed. children is the most obvious candidate here.

The problem then is that every time ApiProvider renders, you provide a completely new context value:

<ApiContext.Provider value={{ get, post, put, remove, fetch }}>
                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                                  \ new object everytime!

Which forces every consumer of that context value to re-render as well. The simplest solution would be to wrap everything with useCallback and the context value itself with useMemo .

Something like:

export const ApiContext = createContext();

const ApiProvider = ({ children }) => {
  const api = externalApiContext();
  
  const get = useCallback(
    (url, params) => api.get(urlWithParams(`${baseUrl}${url}${admkey}`, params)),
    [api]
  );
  
  // ...repeat for a others...
  
  return (
    <ApiContext.Provider value={useMemo(
      () => ({ get, post, put, remove, fetch }),
      [get, post, put, remove, fetch]
    )} children={children}/>
  );
};