Merge pull request #4188 from overleaf/ae-memo

Improve React performance by memoizing components and values

GitOrigin-RevId: 805278b8b7ac04c3dc4b078fa53cc0e3770d261b

services/web/frontend/js/shared/context/application-context.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext } from 'react'
+import React, { createContext, useContext, useMemo } from 'react'
 import PropTypes from 'prop-types'
 
 export const ApplicationContext = createContext()
@@ -15,16 +15,20 @@ ApplicationContext.Provider.propTypes = {
 }
 
 export function ApplicationProvider({ children }) {
-  const applicationContextValue = {
-    gitBridgePublicBaseUrl: window.gitBridgePublicBaseUrl,
-  }
+  const value = useMemo(() => {
+    const value = {
+      gitBridgePublicBaseUrl: window.gitBridgePublicBaseUrl,
+    }
 
-  if (window.user.id) {
-    applicationContextValue.user = window.user
-  }
+    if (window.user.id) {
+      value.user = window.user
+    }
+
+    return value
+  }, [])
 
   return (
-    <ApplicationContext.Provider value={applicationContextValue}>
+    <ApplicationContext.Provider value={value}>
       {children}
     </ApplicationContext.Provider>
   )