Optimize rendering

Author: kadiryazici

src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx

@@ -51,7 +51,7 @@ function Content(props: {
 }): JSX.Element {
   const { device, disableLockUnlock, onSelectDevice } = props
 
-  const { renderSnackbar, showToggleSnackbar } = useToggleLockSnackbar()
+  const { SnackbarNode, showToggleSnackbar } = useToggleLockSnackbar()
   const toggleLock = useToggleLock({
     onSuccess: () => {
       showToggleSnackbar('success')
@@ -65,7 +65,7 @@ function Content(props: {
 
   return (
     <>
-      {renderSnackbar()}
+      {SnackbarNode}
 
       <div className='seam-access-code-device'>
         <div className='seam-device-image'>

src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx

@@ -43,7 +43,7 @@ export function LockDeviceDetails({
     device_id: device.device_id,
   })
 
-  const { renderSnackbar, showToggleSnackbar } = useToggleLockSnackbar()
+  const { SnackbarNode, showToggleSnackbar } = useToggleLockSnackbar()
   const toggleLock = useToggleLock({
     onSuccess: () => {
       showToggleSnackbar('success')
@@ -99,7 +99,7 @@ export function LockDeviceDetails({
 
   return (
     <>
-      {renderSnackbar()}
+      {SnackbarNode}
 
       <div className={classNames('seam-device-details', className)}>
         <ContentHeader title='Device' onBack={onBack} />

src/lib/seam/locks/use-toggle-lock-snackbar.tsx

@@ -1,36 +1,39 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 
 import { Snackbar, type SnackbarProps } from 'lib/ui/Snackbar/Snackbar.js'
 
 export interface UseToggleLockSnackbarContext {
   showToggleSnackbar: (type: SnackbarProps['variant']) => void
-  renderSnackbar: () => JSX.Element
+  SnackbarNode: JSX.Element
 }
 
 export function useToggleLockSnackbar(): UseToggleLockSnackbarContext {
   const [visible, setVisible] = useState(false)
   const [variant, setVariant] = useState<SnackbarProps['variant']>('success')
 
+  const SnackbarNode = useMemo(
+    () => (
+      <Snackbar
+        variant={variant}
+        visible={visible}
+        onClose={() => {
+          setVisible(false)
+        }}
+        message={
+          variant === 'success' ? t.successfullyUpdated : t.failedToUpdate
+        }
+        autoDismiss
+      />
+    ),
+    [visible, variant]
+  )
+
   return {
     showToggleSnackbar: useCallback((type) => {
       setVariant(type)
       setVisible(true)
     }, []),
-    renderSnackbar: useCallback(() => {
-      return (
-        <Snackbar
-          variant={variant}
-          visible={visible}
-          onClose={() => {
-            setVisible(false)
-          }}
-          message={
-            variant === 'success' ? t.successfullyUpdated : t.failedToUpdate
-          }
-          autoDismiss
-        />
-      )
-    }, [visible, variant]),
+    SnackbarNode,
   }
 }