From c1628f46e0afa899b45bac118ad43f9d775ae68f Mon Sep 17 00:00:00 2001
From: Jono Mingard <reason.koan@gmail.com>
Date: Thu, 8 Jun 2023 11:08:00 +1200
Subject: [PATCH] Updated api services to be memoized in case of re-renders

no issue
---
 .../src/components/providers/ServiceProvider.tsx       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ghost/admin-x-settings/src/components/providers/ServiceProvider.tsx b/ghost/admin-x-settings/src/components/providers/ServiceProvider.tsx
index 954ee1d2f2..98489ea42b 100644
--- a/ghost/admin-x-settings/src/components/providers/ServiceProvider.tsx
+++ b/ghost/admin-x-settings/src/components/providers/ServiceProvider.tsx
@@ -1,4 +1,4 @@
-import React, {createContext} from 'react';
+import React, {createContext, useMemo} from 'react';
 import setupGhostApi from '../../utils/api';
 
 export interface FileService {
@@ -20,14 +20,14 @@ const ServicesContext = createContext<ServicesContextProps>({
 });
 
 const ServicesProvider: React.FC<ServicesProviderProps> = ({children, ghostVersion}) => {
-    // TODO: Will this re-render? (if so, will it make duplicate requests because the api object is different?)
-    const apiService = setupGhostApi({ghostVersion});
-    const fileService = {
+    const apiService = useMemo(() => setupGhostApi({ghostVersion}), [ghostVersion]);
+    const fileService = useMemo(() => ({
         uploadImage: async (file: File): Promise<string> => {
             const response = await apiService.images.upload({file});
             return response.images[0].url;
         }
-    };
+    }), [apiService]);
+
     return (
         <ServicesContext.Provider value={{
             api: apiService,