diff --git a/src/__tests__/shared/hooks/useTranslator.test.ts b/src/__tests__/shared/hooks/useTranslator.test.ts
new file mode 100644
index 0000000000..5da6b2ba6e
--- /dev/null
+++ b/src/__tests__/shared/hooks/useTranslator.test.ts
@@ -0,0 +1,22 @@
+import { renderHook } from '@testing-library/react-hooks'
+
+import { useTranslation } from '../../../__mocks__/react-i18next'
+import useTranslator from '../../../shared/hooks/useTranslator'
+
+describe('useTranslator', () => {
+  it('should return undefined if input value for translation is undefined', () => {
+    const { result } = renderHook(() => useTranslator())
+
+    expect(result.current.t(undefined)).toBe(undefined)
+  })
+
+  it('should return useTranslation hook result if input value is NOT undefined', () => {
+    const { result: useTranslatorResult } = renderHook(() => useTranslator())
+    const { result: useTranslationResult } = renderHook(() => useTranslation())
+
+    const result = useTranslatorResult.current.t('patient.firstName')
+    const expected = useTranslationResult.current.t('patient.firstName')
+
+    expect(result).toBe(expected)
+  })
+})
diff --git a/src/dashboard/Dashboard.tsx b/src/dashboard/Dashboard.tsx
index 8cfefb9325..216c5fe3ef 100644
--- a/src/dashboard/Dashboard.tsx
+++ b/src/dashboard/Dashboard.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
 
 import useTitle from '../page-header/title/useTitle'
+import useTranslator from '../shared/hooks/useTranslator'
 
 const Dashboard: React.FC = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   useTitle(t('dashboard.label'))
   return <h3>Example</h3>
 }
diff --git a/src/incidents/list/ViewIncidents.tsx b/src/incidents/list/ViewIncidents.tsx
index 88c72fdf35..b798381168 100644
--- a/src/incidents/list/ViewIncidents.tsx
+++ b/src/incidents/list/ViewIncidents.tsx
@@ -1,7 +1,6 @@
 import { Button, Table } from '@hospitalrun/components'
 import format from 'date-fns/format'
 import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
@@ -10,12 +9,13 @@ import useTitle from '../../page-header/title/useTitle'
 import SelectWithLabelFormGroup, {
   Option,
 } from '../../shared/components/input/SelectWithLableFormGroup'
+import useTranslator from '../../shared/hooks/useTranslator'
 import { RootState } from '../../shared/store'
 import IncidentFilter from '../IncidentFilter'
 import { searchIncidents } from '../incidents-slice'
 
 const ViewIncidents = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const history = useHistory()
   const dispatch = useDispatch()
   useTitle(t('incidents.reports.label'))
diff --git a/src/incidents/report/ReportIncident.tsx b/src/incidents/report/ReportIncident.tsx
index b270cc7222..8de7e9c7a5 100644
--- a/src/incidents/report/ReportIncident.tsx
+++ b/src/incidents/report/ReportIncident.tsx
@@ -1,6 +1,5 @@
 import { Button, Row, Column } from '@hospitalrun/components'
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
@@ -9,6 +8,7 @@ import useTitle from '../../page-header/title/useTitle'
 import DateTimePickerWithLabelFormGroup from '../../shared/components/input/DateTimePickerWithLabelFormGroup'
 import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
 import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
+import useTranslator from '../../shared/hooks/useTranslator'
 import Incident from '../../shared/model/Incident'
 import { RootState } from '../../shared/store'
 import { reportIncident } from '../incident-slice'
@@ -16,7 +16,7 @@ import { reportIncident } from '../incident-slice'
 const ReportIncident = () => {
   const dispatch = useDispatch()
   const history = useHistory()
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   useTitle(t('incidents.reports.new'))
   const breadcrumbs = [
     {
diff --git a/src/incidents/view/ViewIncident.tsx b/src/incidents/view/ViewIncident.tsx
index a4797cb7c5..17b6fc620d 100644
--- a/src/incidents/view/ViewIncident.tsx
+++ b/src/incidents/view/ViewIncident.tsx
@@ -1,7 +1,6 @@
 import { Column, Row, Spinner } from '@hospitalrun/components'
 import format from 'date-fns/format'
 import React, { useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 
@@ -9,12 +8,13 @@ import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
 import useTitle from '../../page-header/title/useTitle'
 import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
 import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
+import useTranslator from '../../shared/hooks/useTranslator'
 import { RootState } from '../../shared/store'
 import { fetchIncident } from '../incident-slice'
 
 const ViewIncident = () => {
   const dispatch = useDispatch()
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { id } = useParams()
   const { incident } = useSelector((state: RootState) => state.incident)
   useTitle(incident ? incident.code : '')
diff --git a/src/labs/ViewLab.tsx b/src/labs/ViewLab.tsx
index b8328de69d..d07042bba3 100644
--- a/src/labs/ViewLab.tsx
+++ b/src/labs/ViewLab.tsx
@@ -1,13 +1,13 @@
 import { Row, Column, Badge, Button, Alert } from '@hospitalrun/components'
 import format from 'date-fns/format'
 import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 import { useParams, useHistory } from 'react-router-dom'
 
 import useAddBreadcrumbs from '../page-header/breadcrumbs/useAddBreadcrumbs'
 import useTitle from '../page-header/title/useTitle'
 import TextFieldWithLabelFormGroup from '../shared/components/input/TextFieldWithLabelFormGroup'
+import useTranslator from '../shared/hooks/useTranslator'
 import Lab from '../shared/model/Lab'
 import Patient from '../shared/model/Patient'
 import Permissions from '../shared/model/Permissions'
@@ -19,7 +19,7 @@ const getTitle = (patient: Patient | undefined, lab: Lab | undefined) =>
 
 const ViewLab = () => {
   const { id } = useParams()
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const history = useHistory()
   const dispatch = useDispatch()
   const { permissions } = useSelector((state: RootState) => state.user)
diff --git a/src/labs/ViewLabs.tsx b/src/labs/ViewLabs.tsx
index 298570ba12..6caa3f1663 100644
--- a/src/labs/ViewLabs.tsx
+++ b/src/labs/ViewLabs.tsx
@@ -1,7 +1,6 @@
 import { Button, Table } from '@hospitalrun/components'
 import format from 'date-fns/format'
 import React, { useState, useEffect, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
@@ -12,6 +11,7 @@ import SelectWithLabelFormGroup, {
 } from '../shared/components/input/SelectWithLableFormGroup'
 import TextInputWithLabelFormGroup from '../shared/components/input/TextInputWithLabelFormGroup'
 import useDebounce from '../shared/hooks/useDebounce'
+import useTranslator from '../shared/hooks/useTranslator'
 import Lab from '../shared/model/Lab'
 import Permissions from '../shared/model/Permissions'
 import { RootState } from '../shared/store'
@@ -20,7 +20,7 @@ import { searchLabs } from './labs-slice'
 type LabFilter = 'requested' | 'completed' | 'canceled' | 'all'
 
 const ViewLabs = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const history = useHistory()
   const setButtons = useButtonToolbarSetter()
   useTitle(t('labs.label'))
diff --git a/src/labs/requests/NewLabRequest.tsx b/src/labs/requests/NewLabRequest.tsx
index 08fe49b664..833fa8a71e 100644
--- a/src/labs/requests/NewLabRequest.tsx
+++ b/src/labs/requests/NewLabRequest.tsx
@@ -1,6 +1,5 @@
 import { Typeahead, Label, Button, Alert } from '@hospitalrun/components'
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
@@ -9,13 +8,14 @@ import useTitle from '../../page-header/title/useTitle'
 import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
 import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
 import PatientRepository from '../../shared/db/PatientRepository'
+import useTranslator from '../../shared/hooks/useTranslator'
 import Lab from '../../shared/model/Lab'
 import Patient from '../../shared/model/Patient'
 import { RootState } from '../../shared/store'
 import { requestLab } from '../lab-slice'
 
 const NewLabRequest = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const dispatch = useDispatch()
   const history = useHistory()
   useTitle(t('labs.requests.new'))
diff --git a/src/page-header/breadcrumbs/Breadcrumbs.tsx b/src/page-header/breadcrumbs/Breadcrumbs.tsx
index 720126e4c9..0f16629a8a 100644
--- a/src/page-header/breadcrumbs/Breadcrumbs.tsx
+++ b/src/page-header/breadcrumbs/Breadcrumbs.tsx
@@ -1,14 +1,14 @@
 import { Breadcrumb, BreadcrumbItem } from '@hospitalrun/components'
 import React from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
+import useTranslator from '../../shared/hooks/useTranslator'
 import { RootState } from '../../shared/store'
 
 const Breadcrumbs = () => {
   const history = useHistory()
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { breadcrumbs } = useSelector((state: RootState) => state.breadcrumbs)
 
   if (breadcrumbs.length === 0) {
diff --git a/src/patients/ContactInfo.tsx b/src/patients/ContactInfo.tsx
index 8a5939f220..70ff3eb473 100644
--- a/src/patients/ContactInfo.tsx
+++ b/src/patients/ContactInfo.tsx
@@ -1,12 +1,12 @@
 import { Spinner, Row, Column, Icon } from '@hospitalrun/components'
 import React, { useEffect, ReactElement } from 'react'
-import { useTranslation } from 'react-i18next'
 
 import SelectWithLabelFormGroup, {
   Option,
 } from '../shared/components/input/SelectWithLableFormGroup'
 import TextFieldWithLabelFormGroup from '../shared/components/input/TextFieldWithLabelFormGroup'
 import TextInputWithLabelFormGroup from '../shared/components/input/TextInputWithLabelFormGroup'
+import useTranslator from '../shared/hooks/useTranslator'
 import { ContactInfoPiece } from '../shared/model/ContactInformation'
 import { uuid } from '../shared/util/uuid'
 import ContactInfoTypes from './ContactInfoTypes'
@@ -24,7 +24,7 @@ interface Props {
 const ContactInfo = (props: Props): ReactElement => {
   const { component, data, errors, label, name, isEditable, onChange } = props
 
-  const { t } = useTranslation()
+  const { t } = useTranslator()
 
   useEffect(() => {
     if (onChange && data.length === 0) {
diff --git a/src/patients/GeneralInformation.tsx b/src/patients/GeneralInformation.tsx
index d9dbacd66c..213ac7c5cf 100644
--- a/src/patients/GeneralInformation.tsx
+++ b/src/patients/GeneralInformation.tsx
@@ -1,13 +1,13 @@
 import { Panel, Checkbox, Alert } from '@hospitalrun/components'
 import { startOfDay, subYears, differenceInYears } from 'date-fns'
 import React, { ReactElement } from 'react'
-import { useTranslation } from 'react-i18next'
 
 import DatePickerWithLabelFormGroup from '../shared/components/input/DatePickerWithLabelFormGroup'
 import SelectWithLabelFormGroup, {
   Option,
 } from '../shared/components/input/SelectWithLableFormGroup'
 import TextInputWithLabelFormGroup from '../shared/components/input/TextInputWithLabelFormGroup'
+import useTranslator from '../shared/hooks/useTranslator'
 import { ContactInfoPiece } from '../shared/model/ContactInformation'
 import Patient from '../shared/model/Patient'
 import ContactInfo from './ContactInfo'
@@ -32,7 +32,7 @@ interface Props {
 }
 
 const GeneralInformation = (props: Props): ReactElement => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { patient, isEditable, onChange, error } = props
 
   const onFieldChange = (name: string, value: string | boolean | ContactInfoPiece[]) => {
@@ -98,7 +98,7 @@ const GeneralInformation = (props: Props): ReactElement => {
               isEditable={isEditable}
               onChange={(event) => onFieldChange('prefix', event.currentTarget.value)}
               isInvalid={!!error?.prefix}
-              feedback={error ? (error.prefix ? t(error.prefix) : undefined) : undefined}
+              feedback={t(error?.prefix)}
             />
           </div>
           <div className="col-md-4">
@@ -110,7 +110,7 @@ const GeneralInformation = (props: Props): ReactElement => {
               onChange={(event) => onFieldChange('givenName', event.currentTarget.value)}
               isRequired
               isInvalid={!!error?.givenName}
-              feedback={error ? (error.givenName ? t(error.givenName) : undefined) : undefined}
+              feedback={t(error?.givenName)}
             />
           </div>
           <div className="col-md-4">
@@ -121,7 +121,7 @@ const GeneralInformation = (props: Props): ReactElement => {
               isEditable={isEditable}
               onChange={(event) => onFieldChange('familyName', event.currentTarget.value)}
               isInvalid={!!error?.familyName}
-              feedback={error ? (error.familyName ? t(error.familyName) : undefined) : undefined}
+              feedback={t(error?.familyName)}
             />
           </div>
           <div className="col-md-2">
@@ -132,7 +132,7 @@ const GeneralInformation = (props: Props): ReactElement => {
               isEditable={isEditable}
               onChange={(event) => onFieldChange('suffix', event.currentTarget.value)}
               isInvalid={!!error?.suffix}
-              feedback={error ? (error.suffix ? t(error.suffix) : undefined) : undefined}
+              feedback={t(error?.suffix)}
             />
           </div>
         </div>
@@ -192,9 +192,7 @@ const GeneralInformation = (props: Props): ReactElement => {
                 maxDate={new Date(Date.now().valueOf())}
                 onChange={(date: Date) => onFieldChange('dateOfBirth', date.toISOString())}
                 isInvalid={!!error?.dateOfBirth}
-                feedback={
-                  error ? (error.dateOfBirth ? t(error.dateOfBirth) : undefined) : undefined
-                }
+                feedback={t(error?.dateOfBirth)}
               />
             )}
           </div>
@@ -227,13 +225,7 @@ const GeneralInformation = (props: Props): ReactElement => {
               isEditable={isEditable}
               onChange={(event) => onFieldChange('preferredLanguage', event.currentTarget.value)}
               isInvalid={!!error?.preferredLanguage}
-              feedback={
-                error
-                  ? error.preferredLanguage
-                    ? t(error.preferredLanguage)
-                    : undefined
-                  : undefined
-              }
+              feedback={t(error?.preferredLanguage)}
             />
           </div>
         </div>
diff --git a/src/patients/allergies/Allergies.tsx b/src/patients/allergies/Allergies.tsx
index f39ffaa60a..d37c5327e9 100644
--- a/src/patients/allergies/Allergies.tsx
+++ b/src/patients/allergies/Allergies.tsx
@@ -1,9 +1,9 @@
 import { Button, List, ListItem, Alert } from '@hospitalrun/components'
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
 import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
+import useTranslator from '../../shared/hooks/useTranslator'
 import Allergy from '../../shared/model/Allergy'
 import Patient from '../../shared/model/Patient'
 import Permissions from '../../shared/model/Permissions'
@@ -15,7 +15,7 @@ interface AllergiesProps {
 }
 
 const Allergies = (props: AllergiesProps) => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { patient } = props
   const { permissions } = useSelector((state: RootState) => state.user)
   const [showNewAllergyModal, setShowNewAllergyModal] = useState(false)
diff --git a/src/patients/allergies/NewAllergyModal.tsx b/src/patients/allergies/NewAllergyModal.tsx
index 9a5383df24..97dabee171 100644
--- a/src/patients/allergies/NewAllergyModal.tsx
+++ b/src/patients/allergies/NewAllergyModal.tsx
@@ -1,9 +1,9 @@
 import { Modal, Alert } from '@hospitalrun/components'
 import React, { useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 
 import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
+import useTranslator from '../../shared/hooks/useTranslator'
 import Allergy from '../../shared/model/Allergy'
 import { RootState } from '../../shared/store'
 import { addAllergy } from '../patient-slice'
@@ -16,7 +16,7 @@ interface NewAllergyModalProps {
 const NewAllergyModal = (props: NewAllergyModalProps) => {
   const { show, onCloseButtonClick } = props
   const dispatch = useDispatch()
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { allergyError, patient } = useSelector((state: RootState) => state.patient)
 
   const [allergy, setAllergy] = useState({ name: '' })
diff --git a/src/patients/appointments/AppointmentsList.tsx b/src/patients/appointments/AppointmentsList.tsx
index 93ee38e70d..58c2567e09 100644
--- a/src/patients/appointments/AppointmentsList.tsx
+++ b/src/patients/appointments/AppointmentsList.tsx
@@ -1,11 +1,11 @@
 import { Button, List, ListItem, Container, Row } from '@hospitalrun/components'
 import React, { useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
 import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { fetchPatientAppointments } from '../../scheduling/appointments/appointments-slice'
+import useTranslator from '../../shared/hooks/useTranslator'
 import { RootState } from '../../shared/store'
 
 interface Props {
@@ -15,7 +15,7 @@ interface Props {
 const AppointmentsList = (props: Props) => {
   const dispatch = useDispatch()
   const history = useHistory()
-  const { t } = useTranslation()
+  const { t } = useTranslator()
 
   const { patientId } = props
   const { appointments } = useSelector((state: RootState) => state.appointments)
diff --git a/src/patients/care-plans/AddCarePlanModal.tsx b/src/patients/care-plans/AddCarePlanModal.tsx
index 7ecb0a4938..48058e232b 100644
--- a/src/patients/care-plans/AddCarePlanModal.tsx
+++ b/src/patients/care-plans/AddCarePlanModal.tsx
@@ -1,9 +1,9 @@
 import { Modal } from '@hospitalrun/components'
 import { addMonths } from 'date-fns'
 import React, { useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 
+import useTranslator from '../../shared/hooks/useTranslator'
 import CarePlan from '../../shared/model/CarePlan'
 import { RootState } from '../../shared/store'
 import { addCarePlan } from '../patient-slice'
@@ -26,7 +26,7 @@ const initialCarePlanState = {
 const AddCarePlanModal = (props: Props) => {
   const { show, onCloseButtonClick } = props
   const dispatch = useDispatch()
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { carePlanError, patient } = useSelector((state: RootState) => state.patient)
   const [carePlan, setCarePlan] = useState(initialCarePlanState)
 
diff --git a/src/patients/care-plans/CarePlanForm.tsx b/src/patients/care-plans/CarePlanForm.tsx
index b658d9dd99..9ff64150c0 100644
--- a/src/patients/care-plans/CarePlanForm.tsx
+++ b/src/patients/care-plans/CarePlanForm.tsx
@@ -1,6 +1,5 @@
 import { Alert, Column, Row } from '@hospitalrun/components'
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 
 import DatePickerWithLabelFormGroup from '../../shared/components/input/DatePickerWithLabelFormGroup'
 import SelectWithLabelFormGroup, {
@@ -8,6 +7,7 @@ import SelectWithLabelFormGroup, {
 } from '../../shared/components/input/SelectWithLableFormGroup'
 import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
 import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
+import useTranslator from '../../shared/hooks/useTranslator'
 import CarePlan, { CarePlanIntent, CarePlanStatus } from '../../shared/model/CarePlan'
 import Patient from '../../shared/model/Patient'
 
@@ -31,7 +31,7 @@ interface Props {
 }
 
 const CarePlanForm = (props: Props) => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { patient, carePlan, carePlanError, disabled, onChange } = props
 
   const [condition, setCondition] = useState(carePlan.diagnosisId)
diff --git a/src/patients/care-plans/CarePlanTab.tsx b/src/patients/care-plans/CarePlanTab.tsx
index e52aca0142..f6bdbb1f47 100644
--- a/src/patients/care-plans/CarePlanTab.tsx
+++ b/src/patients/care-plans/CarePlanTab.tsx
@@ -1,9 +1,9 @@
 import { Button } from '@hospitalrun/components'
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { Route, Switch } from 'react-router-dom'
 
+import useTranslator from '../../shared/hooks/useTranslator'
 import Permissions from '../../shared/model/Permissions'
 import { RootState } from '../../shared/store'
 import AddCarePlanModal from './AddCarePlanModal'
@@ -11,7 +11,7 @@ import CarePlanTable from './CarePlanTable'
 import ViewCarePlan from './ViewCarePlan'
 
 const CarePlanTab = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { permissions } = useSelector((state: RootState) => state.user)
   const [showAddCarePlanModal, setShowAddCarePlanModal] = useState(false)
   return (
diff --git a/src/patients/care-plans/CarePlanTable.tsx b/src/patients/care-plans/CarePlanTable.tsx
index e25280a7af..1ba4d5b899 100644
--- a/src/patients/care-plans/CarePlanTable.tsx
+++ b/src/patients/care-plans/CarePlanTable.tsx
@@ -1,15 +1,15 @@
 import { Table } from '@hospitalrun/components'
 import format from 'date-fns/format'
 import React from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
+import useTranslator from '../../shared/hooks/useTranslator'
 import { RootState } from '../../shared/store'
 
 const CarePlanTable = () => {
   const history = useHistory()
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { patient } = useSelector((state: RootState) => state.patient)
 
   return (
diff --git a/src/patients/diagnoses/AddDiagnosisModal.tsx b/src/patients/diagnoses/AddDiagnosisModal.tsx
index c42bbf5da5..449c9b00f3 100644
--- a/src/patients/diagnoses/AddDiagnosisModal.tsx
+++ b/src/patients/diagnoses/AddDiagnosisModal.tsx
@@ -1,10 +1,10 @@
 import { Modal, Alert } from '@hospitalrun/components'
 import React, { useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 
 import DatePickerWithLabelFormGroup from '../../shared/components/input/DatePickerWithLabelFormGroup'
 import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
+import useTranslator from '../../shared/hooks/useTranslator'
 import Diagnosis from '../../shared/model/Diagnosis'
 import { RootState } from '../../shared/store'
 import { addDiagnosis } from '../patient-slice'
@@ -18,7 +18,7 @@ const AddDiagnosisModal = (props: Props) => {
   const { show, onCloseButtonClick } = props
   const dispatch = useDispatch()
   const { diagnosisError, patient } = useSelector((state: RootState) => state.patient)
-  const { t } = useTranslation()
+  const { t } = useTranslator()
 
   const [diagnosis, setDiagnosis] = useState({ name: '', diagnosisDate: new Date().toISOString() })
 
diff --git a/src/patients/diagnoses/Diagnoses.tsx b/src/patients/diagnoses/Diagnoses.tsx
index 24465461af..d529fb306c 100644
--- a/src/patients/diagnoses/Diagnoses.tsx
+++ b/src/patients/diagnoses/Diagnoses.tsx
@@ -1,9 +1,9 @@
 import { Button, List, ListItem, Alert } from '@hospitalrun/components'
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
 import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
+import useTranslator from '../../shared/hooks/useTranslator'
 import Diagnosis from '../../shared/model/Diagnosis'
 import Patient from '../../shared/model/Patient'
 import Permissions from '../../shared/model/Permissions'
@@ -16,7 +16,7 @@ interface Props {
 
 const Diagnoses = (props: Props) => {
   const { patient } = props
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { permissions } = useSelector((state: RootState) => state.user)
   const [showDiagnosisModal, setShowDiagnosisModal] = useState(false)
 
diff --git a/src/patients/edit/EditPatient.tsx b/src/patients/edit/EditPatient.tsx
index 8eccc03c9e..884a26e91d 100644
--- a/src/patients/edit/EditPatient.tsx
+++ b/src/patients/edit/EditPatient.tsx
@@ -1,11 +1,11 @@
 import { Spinner, Button, Toast } from '@hospitalrun/components'
 import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
 
 import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
 import useTitle from '../../page-header/title/useTitle'
+import useTranslator from '../../shared/hooks/useTranslator'
 import Patient from '../../shared/model/Patient'
 import { RootState } from '../../shared/store'
 import GeneralInformation from '../GeneralInformation'
@@ -21,7 +21,7 @@ const getPatientCode = (p: Patient): string => {
 }
 
 const EditPatient = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const history = useHistory()
   const dispatch = useDispatch()
 
diff --git a/src/patients/labs/LabsTab.tsx b/src/patients/labs/LabsTab.tsx
index 2fd8c80db1..66296cee95 100644
--- a/src/patients/labs/LabsTab.tsx
+++ b/src/patients/labs/LabsTab.tsx
@@ -1,10 +1,10 @@
 import { Alert, Table } from '@hospitalrun/components'
 import format from 'date-fns/format'
 import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useHistory } from 'react-router-dom'
 
 import PatientRepository from '../../shared/db/PatientRepository'
+import useTranslator from '../../shared/hooks/useTranslator'
 import Lab from '../../shared/model/Lab'
 
 interface Props {
@@ -14,7 +14,7 @@ interface Props {
 const LabsTab = (props: Props) => {
   const history = useHistory()
   const { patientId } = props
-  const { t } = useTranslation()
+  const { t } = useTranslator()
 
   const [labs, setLabs] = useState<Lab[]>([])
 
diff --git a/src/patients/list/ViewPatients.tsx b/src/patients/list/ViewPatients.tsx
index 51aaa381e2..4dafd5543d 100644
--- a/src/patients/list/ViewPatients.tsx
+++ b/src/patients/list/ViewPatients.tsx
@@ -1,7 +1,6 @@
 import { Spinner, Button, Container, Row, TextInput, Column, Table } from '@hospitalrun/components'
 import format from 'date-fns/format'
 import React, { useEffect, useState, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
@@ -10,6 +9,7 @@ import { useButtonToolbarSetter } from '../../page-header/button-toolbar/ButtonB
 import useTitle from '../../page-header/title/useTitle'
 import SortRequest from '../../shared/db/SortRequest'
 import useDebounce from '../../shared/hooks/useDebounce'
+import useTranslator from '../../shared/hooks/useTranslator'
 import useUpdateEffect from '../../shared/hooks/useUpdateEffect'
 import { RootState } from '../../shared/store'
 import { searchPatients } from '../patients-slice'
@@ -17,7 +17,7 @@ import { searchPatients } from '../patients-slice'
 const breadcrumbs = [{ i18nKey: 'patients.label', location: '/patients' }]
 
 const ViewPatients = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const history = useHistory()
   useTitle(t('patients.label'))
   useAddBreadcrumbs(breadcrumbs, true)
diff --git a/src/patients/new/NewPatient.tsx b/src/patients/new/NewPatient.tsx
index 3dbdb120dd..7cd7b52fdf 100644
--- a/src/patients/new/NewPatient.tsx
+++ b/src/patients/new/NewPatient.tsx
@@ -1,11 +1,11 @@
 import { Button, Toast } from '@hospitalrun/components'
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
 import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
 import useTitle from '../../page-header/title/useTitle'
+import useTranslator from '../../shared/hooks/useTranslator'
 import Patient from '../../shared/model/Patient'
 import { RootState } from '../../shared/store'
 import GeneralInformation from '../GeneralInformation'
@@ -17,7 +17,7 @@ const breadcrumbs = [
 ]
 
 const NewPatient = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const history = useHistory()
   const dispatch = useDispatch()
   const { createError } = useSelector((state: RootState) => state.patient)
diff --git a/src/patients/notes/NewNoteModal.tsx b/src/patients/notes/NewNoteModal.tsx
index 913e9a9ad4..818522d2fb 100644
--- a/src/patients/notes/NewNoteModal.tsx
+++ b/src/patients/notes/NewNoteModal.tsx
@@ -1,9 +1,9 @@
 import { Modal, Alert } from '@hospitalrun/components'
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 
 import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
+import useTranslator from '../../shared/hooks/useTranslator'
 import Note from '../../shared/model/Note'
 import { RootState } from '../../shared/store'
 import { addNote } from '../patient-slice'
@@ -18,7 +18,7 @@ const NewNoteModal = (props: Props) => {
   const { show, toggle, onCloseButtonClick } = props
   const dispatch = useDispatch()
   const { patient, noteError } = useSelector((state: RootState) => state.patient)
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const [note, setNote] = useState({
     text: '',
   })
diff --git a/src/patients/notes/NoteTab.tsx b/src/patients/notes/NoteTab.tsx
index b91970ddf1..b32ce3e732 100644
--- a/src/patients/notes/NoteTab.tsx
+++ b/src/patients/notes/NoteTab.tsx
@@ -1,8 +1,8 @@
 import { Button, List, ListItem, Alert } from '@hospitalrun/components'
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
+import useTranslator from '../../shared/hooks/useTranslator'
 import Note from '../../shared/model/Note'
 import Patient from '../../shared/model/Patient'
 import Permissions from '../../shared/model/Permissions'
@@ -15,7 +15,7 @@ interface Props {
 
 const NoteTab = (props: Props) => {
   const { patient } = props
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { permissions } = useSelector((state: RootState) => state.user)
   const [showNewNoteModal, setShowNoteModal] = useState<boolean>(false)
 
diff --git a/src/patients/related-persons/AddRelatedPersonModal.tsx b/src/patients/related-persons/AddRelatedPersonModal.tsx
index e3bca43c37..7b57e6d3bb 100644
--- a/src/patients/related-persons/AddRelatedPersonModal.tsx
+++ b/src/patients/related-persons/AddRelatedPersonModal.tsx
@@ -1,11 +1,11 @@
 import { Modal, Alert, Typeahead, Label } from '@hospitalrun/components'
 import format from 'date-fns/format'
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 
 import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
 import PatientRepository from '../../shared/db/PatientRepository'
+import useTranslator from '../../shared/hooks/useTranslator'
 import Patient from '../../shared/model/Patient'
 import RelatedPerson from '../../shared/model/RelatedPerson'
 import { RootState } from '../../shared/store'
@@ -19,7 +19,7 @@ interface Props {
 
 const AddRelatedPersonModal = (props: Props) => {
   const dispatch = useDispatch()
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { patient, relatedPersonError } = useSelector((state: RootState) => state.patient)
 
   const { show, toggle, onCloseButtonClick } = props
diff --git a/src/patients/related-persons/RelatedPersonTab.tsx b/src/patients/related-persons/RelatedPersonTab.tsx
index a2247f91d6..4524d56f17 100644
--- a/src/patients/related-persons/RelatedPersonTab.tsx
+++ b/src/patients/related-persons/RelatedPersonTab.tsx
@@ -1,11 +1,11 @@
 import { Button, Alert, Spinner, Table } from '@hospitalrun/components'
 import React, { useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
 import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
 import PatientRepository from '../../shared/db/PatientRepository'
+import useTranslator from '../../shared/hooks/useTranslator'
 import Patient from '../../shared/model/Patient'
 import Permissions from '../../shared/model/Permissions'
 import { RootState } from '../../shared/store'
@@ -24,7 +24,7 @@ const RelatedPersonTab = (props: Props) => {
     history.push(location)
   }
   const { patient } = props
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { permissions } = useSelector((state: RootState) => state.user)
   const [showNewRelatedPersonModal, setShowRelatedPersonModal] = useState<boolean>(false)
   const [relatedPersons, setRelatedPersons] = useState<Patient[] | undefined>(undefined)
diff --git a/src/patients/view/ViewPatient.tsx b/src/patients/view/ViewPatient.tsx
index 0f26ebe03a..bb4218e783 100644
--- a/src/patients/view/ViewPatient.tsx
+++ b/src/patients/view/ViewPatient.tsx
@@ -1,6 +1,5 @@
 import { Panel, Spinner, TabsHeader, Tab, Button } from '@hospitalrun/components'
 import React, { useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import {
   useParams,
@@ -14,6 +13,7 @@ import {
 import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { useButtonToolbarSetter } from '../../page-header/button-toolbar/ButtonBarProvider'
 import useTitle from '../../page-header/title/useTitle'
+import useTranslator from '../../shared/hooks/useTranslator'
 import Patient from '../../shared/model/Patient'
 import Permissions from '../../shared/model/Permissions'
 import { RootState } from '../../shared/store'
@@ -37,7 +37,7 @@ const getPatientCode = (p: Patient): string => {
 }
 
 const ViewPatient = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const history = useHistory()
   const dispatch = useDispatch()
   const location = useLocation()
diff --git a/src/scheduling/appointments/AppointmentDetailForm.tsx b/src/scheduling/appointments/AppointmentDetailForm.tsx
index e8f4139b4f..03c4c87570 100644
--- a/src/scheduling/appointments/AppointmentDetailForm.tsx
+++ b/src/scheduling/appointments/AppointmentDetailForm.tsx
@@ -1,6 +1,5 @@
 import { Typeahead, Label, Alert } from '@hospitalrun/components'
 import React from 'react'
-import { useTranslation } from 'react-i18next'
 
 import DateTimePickerWithLabelFormGroup from '../../shared/components/input/DateTimePickerWithLabelFormGroup'
 import SelectWithLabelFormGroup, {
@@ -9,6 +8,7 @@ import SelectWithLabelFormGroup, {
 import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
 import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
 import PatientRepository from '../../shared/db/PatientRepository'
+import useTranslator from '../../shared/hooks/useTranslator'
 import Appointment from '../../shared/model/Appointment'
 import Patient from '../../shared/model/Patient'
 
@@ -22,7 +22,7 @@ interface Props {
 
 const AppointmentDetailForm = (props: Props) => {
   const { onFieldChange, appointment, patient, isEditable, error } = props
-  const { t } = useTranslation()
+  const { t } = useTranslator()
 
   const onDateChange = (date: Date, fieldName: string) =>
     onFieldChange && onFieldChange(fieldName, date.toISOString())
diff --git a/src/scheduling/appointments/ViewAppointments.tsx b/src/scheduling/appointments/ViewAppointments.tsx
index df60389573..8ae3114efd 100644
--- a/src/scheduling/appointments/ViewAppointments.tsx
+++ b/src/scheduling/appointments/ViewAppointments.tsx
@@ -1,6 +1,5 @@
 import { Calendar, Button } from '@hospitalrun/components'
 import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
@@ -8,6 +7,7 @@ import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { useButtonToolbarSetter } from '../../page-header/button-toolbar/ButtonBarProvider'
 import useTitle from '../../page-header/title/useTitle'
 import PatientRepository from '../../shared/db/PatientRepository'
+import useTranslator from '../../shared/hooks/useTranslator'
 import { RootState } from '../../shared/store'
 import { fetchAppointments } from './appointments-slice'
 
@@ -22,7 +22,7 @@ interface Event {
 const breadcrumbs = [{ i18nKey: 'scheduling.appointments.label', location: '/appointments' }]
 
 const ViewAppointments = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const history = useHistory()
   useTitle(t('scheduling.appointments.label'))
   const dispatch = useDispatch()
diff --git a/src/scheduling/appointments/edit/EditAppointment.tsx b/src/scheduling/appointments/edit/EditAppointment.tsx
index 94280e1ddd..73e30bed85 100644
--- a/src/scheduling/appointments/edit/EditAppointment.tsx
+++ b/src/scheduling/appointments/edit/EditAppointment.tsx
@@ -1,11 +1,11 @@
 import { Spinner, Button } from '@hospitalrun/components'
 import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
 
 import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
 import useTitle from '../../../page-header/title/useTitle'
+import useTranslator from '../../../shared/hooks/useTranslator'
 import Appointment from '../../../shared/model/Appointment'
 import { RootState } from '../../../shared/store'
 import { updateAppointment, fetchAppointment } from '../appointment-slice'
@@ -13,7 +13,7 @@ import AppointmentDetailForm from '../AppointmentDetailForm'
 import { getAppointmentLabel } from '../util/scheduling-appointment.util'
 
 const EditAppointment = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   useTitle(t('scheduling.appointments.editAppointment'))
   const history = useHistory()
   const dispatch = useDispatch()
diff --git a/src/scheduling/appointments/new/NewAppointment.tsx b/src/scheduling/appointments/new/NewAppointment.tsx
index 49c2687896..b51fe91315 100644
--- a/src/scheduling/appointments/new/NewAppointment.tsx
+++ b/src/scheduling/appointments/new/NewAppointment.tsx
@@ -2,12 +2,12 @@ import { Button, Toast } from '@hospitalrun/components'
 import addMinutes from 'date-fns/addMinutes'
 import roundToNearestMinutes from 'date-fns/roundToNearestMinutes'
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
 import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
 import useTitle from '../../../page-header/title/useTitle'
+import useTranslator from '../../../shared/hooks/useTranslator'
 import Appointment from '../../../shared/model/Appointment'
 import { RootState } from '../../../shared/store'
 import { createAppointment } from '../appointment-slice'
@@ -19,7 +19,7 @@ const breadcrumbs = [
 ]
 
 const NewAppointment = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const history = useHistory()
   const dispatch = useDispatch()
   useTitle(t('scheduling.appointments.new'))
diff --git a/src/scheduling/appointments/view/ViewAppointment.tsx b/src/scheduling/appointments/view/ViewAppointment.tsx
index 221fe0d868..b40c336035 100644
--- a/src/scheduling/appointments/view/ViewAppointment.tsx
+++ b/src/scheduling/appointments/view/ViewAppointment.tsx
@@ -1,12 +1,12 @@
 import { Spinner, Button, Modal, Toast } from '@hospitalrun/components'
 import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 import { useParams, useHistory } from 'react-router-dom'
 
 import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { useButtonToolbarSetter } from '../../../page-header/button-toolbar/ButtonBarProvider'
 import useTitle from '../../../page-header/title/useTitle'
+import useTranslator from '../../../shared/hooks/useTranslator'
 import Permissions from '../../../shared/model/Permissions'
 import { RootState } from '../../../shared/store'
 import { fetchAppointment, deleteAppointment } from '../appointment-slice'
@@ -14,7 +14,7 @@ import AppointmentDetailForm from '../AppointmentDetailForm'
 import { getAppointmentLabel } from '../util/scheduling-appointment.util'
 
 const ViewAppointment = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   useTitle(t('scheduling.appointments.viewAppointment'))
   const dispatch = useDispatch()
   const { id } = useParams()
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index d3fe2dc91f..0d31f89c69 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -1,12 +1,12 @@
 import { Row, Column } from '@hospitalrun/components'
 import React from 'react'
-import { useTranslation } from 'react-i18next'
 
 import useTitle from '../page-header/title/useTitle'
 import LanguageSelector from '../shared/components/input/LanguageSelector'
+import useTranslator from '../shared/hooks/useTranslator'
 
 const Settings = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   useTitle(t('settings.label'))
 
   return (
diff --git a/src/shared/components/PageComponent.tsx b/src/shared/components/PageComponent.tsx
index 1d7654837b..b8a81af45d 100644
--- a/src/shared/components/PageComponent.tsx
+++ b/src/shared/components/PageComponent.tsx
@@ -1,6 +1,7 @@
 import { Button, Select } from '@hospitalrun/components'
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+
+import useTranslator from '../hooks/useTranslator'
 
 const pageSizes = [
   { label: '25', value: 25 },
@@ -19,7 +20,7 @@ const PageComponent = ({
   setPreviousPageRequest,
   setNextPageRequest,
 }: any) => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
 
   return (
     <div style={{ textAlign: 'center' }}>
diff --git a/src/shared/components/Sidebar.tsx b/src/shared/components/Sidebar.tsx
index 91e99f6ff4..cc48668548 100644
--- a/src/shared/components/Sidebar.tsx
+++ b/src/shared/components/Sidebar.tsx
@@ -1,9 +1,9 @@
 import { List, ListItem, Icon } from '@hospitalrun/components'
 import React, { useState, CSSProperties } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 import { useLocation, useHistory } from 'react-router-dom'
 
+import useTranslator from '../hooks/useTranslator'
 import Permissions from '../model/Permissions'
 import { RootState } from '../store'
 import { updateSidebar } from './component-slice'
@@ -13,7 +13,7 @@ const Sidebar = () => {
   const { sidebarCollapsed } = useSelector((state: RootState) => state.components)
   const permissions = useSelector((state: RootState) => state.user.permissions)
 
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const path = useLocation()
   const history = useHistory()
   const { pathname } = path
diff --git a/src/shared/components/input/LanguageSelector.tsx b/src/shared/components/input/LanguageSelector.tsx
index 349df6ba04..e44d943151 100644
--- a/src/shared/components/input/LanguageSelector.tsx
+++ b/src/shared/components/input/LanguageSelector.tsx
@@ -1,12 +1,12 @@
 import { sortBy } from 'lodash'
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 
 import i18n, { resources } from '../../config/i18n'
+import useTranslator from '../../hooks/useTranslator'
 import SelectWithLabelFormGroup, { Option } from './SelectWithLableFormGroup'
 
 const LanguageSelector = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const [selected, setSelected] = useState(i18n.language)
 
   let languageOptions: Option[] = Object.keys(resources).map((abbr) => ({
diff --git a/src/shared/components/navbar/Navbar.tsx b/src/shared/components/navbar/Navbar.tsx
index fd47e8eb8b..58eed83e21 100644
--- a/src/shared/components/navbar/Navbar.tsx
+++ b/src/shared/components/navbar/Navbar.tsx
@@ -1,17 +1,17 @@
 import { Navbar as HospitalRunNavbar } from '@hospitalrun/components'
 import React from 'react'
-import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
 import { logout } from '../../../user/user-slice'
+import useTranslator from '../../hooks/useTranslator'
 import { RootState } from '../../store'
 import pageMap, { Page } from './pageMap'
 
 const Navbar = () => {
   const dispatch = useDispatch()
   const history = useHistory()
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { permissions } = useSelector((state: RootState) => state.user)
 
   const navigateTo = (location: string) => {
diff --git a/src/shared/components/network-status/NetworkStatusMessage.tsx b/src/shared/components/network-status/NetworkStatusMessage.tsx
index c9e1b35227..b4beb8f5c8 100644
--- a/src/shared/components/network-status/NetworkStatusMessage.tsx
+++ b/src/shared/components/network-status/NetworkStatusMessage.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 
+import useTranslator from '../../hooks/useTranslator'
 import { useNetworkStatus } from './useNetworkStatus'
 
 const ONLINE_COLOR = 'rgba(0, 255, 0, 0.55)'
@@ -13,7 +13,7 @@ const BASE_STYLE = {
 }
 
 export const NetworkStatusMessage = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslator()
   const { isOnline, wasOffline } = useNetworkStatus()
   const [shouldRender, setShouldRender] = useState(true)
   const [opacity, setOpacity] = useState(1)
diff --git a/src/shared/hooks/useTranslator.ts b/src/shared/hooks/useTranslator.ts
new file mode 100644
index 0000000000..7a55183aaf
--- /dev/null
+++ b/src/shared/hooks/useTranslator.ts
@@ -0,0 +1,17 @@
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export default function useTranslator() {
+  const { t } = useTranslation()
+
+  const translate = useCallback(
+    (key: any): any => {
+      return key !== undefined ? t(key) : undefined
+    },
+    [t],
+  )
+
+  return {
+    t: translate,
+  }
+}