Add useIsMounted hook (#4039)

GitOrigin-RevId: 4ece1381fbfbed048fe46a399a60e9aab2f3526e

services/web/frontend/js/features/binary-file/components/binary-file-header.js

@@ -1,10 +1,11 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react'
+import React, { useState, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import Icon from '../../../shared/components/icon'
 import { formatTime, relativeDate } from '../../utils/format-date'
 import { Trans, useTranslation } from 'react-i18next'
 import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
 import { postJSON } from '../../../infrastructure/fetch-json'
+import useIsMounted from '../../../shared/hooks/use-is-mounted'
 
 const tprLinkedFileInfo = importOverleafModules('tprLinkedFileInfo')
 const tprLinkedFileRefreshError = importOverleafModules(
@@ -29,15 +30,11 @@ function shortenedUrl(url) {
 }
 
 export default function BinaryFileHeader({ file, storeReferencesKeys }) {
-  const isMounted = useRef(true)
   const [refreshing, setRefreshing] = useState(false)
   const [refreshError, setRefreshError] = useState(null)
   const { t } = useTranslation()
 
-  useEffect(() => {
+  const isMounted = useIsMounted()
-    // set to false on unmount to avoid unmounted component warning when refreshing
-    return () => (isMounted.current = false)
-  }, [])
 
   let fileInfo
   if (file.linkedFileData) {

services/web/frontend/js/features/share-project-modal/components/add-collaborators.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo, useRef } from 'react'
+import React, { useState, useMemo } from 'react'
 import { useTranslation, Trans } from 'react-i18next'
 import { Form, FormGroup, FormControl, Button } from 'react-bootstrap'
 import { useMultipleSelection } from 'downshift'
@@ -9,20 +9,12 @@ import {
 import SelectCollaborators from './select-collaborators'
 import { resendInvite, sendInvite } from '../utils/api'
 import { useUserContacts } from '../hooks/use-user-contacts'
+import useIsMounted from '../../../shared/hooks/use-is-mounted'
 
 export default function AddCollaborators() {
   const [privileges, setPrivileges] = useState('readAndWrite')
 
-  const isMounted = useRef(true)
+  const isMounted = useIsMounted()
-
-  // the component will be unmounted if the project can't have any more collaborators
-  useEffect(() => {
-    isMounted.current = true
-
-    return () => {
-      isMounted.current = false
-    }
-  }, [isMounted])
 
   const { data: contacts } = useUserContacts()
 

services/web/frontend/js/shared/hooks/use-is-mounted.js

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from 'react'
+
+export default function useIsMounted() {
+  const isMounted = useRef(true)
+
+  useEffect(() => {
+    return () => {
+      isMounted.current = false
+    }
+  }, [isMounted])
+
+  return isMounted
+}