optimization: memoized some components
Massimo Melina committed
Jan 20, 2022 at 13:40 UTC
46911bd1c69264dc93190324874cb0bd05fa147f
2 files changed
+8
-9
frontend/src/BrowseFiles.ts
+5
-5
@@ -1,5 +1,5 @@
1
import { Link, useLocation } from 'react-router-dom'
2
-import { createContext, createElement as h, Fragment, useContext, useEffect, useMemo, useState } from 'react'
2
+import { createContext, createElement as h, Fragment, useContext, useEffect, useMemo, useState, memo } from 'react'
3
import { formatBytes, hError, hIcon, hfsEvent } from './misc'
4
import { Html, Spinner } from './components'
5
import { Head } from './Head'
@@ -62,7 +62,7 @@ function isMobile() {
62
return window.innerWidth < 800
63
}
64
65
-function Entry(entry: DirEntry & { hidden:boolean, midnight: Date }) {
65
+const Entry = memo(function(entry: DirEntry & { hidden:boolean, midnight: Date }) {
66
let { n, hidden, isFolder } = entry
67
const base = usePath()
68
const href = fixUrl(n)
@@ -78,13 +78,13 @@ function Entry(entry: DirEntry & { hidden:boolean, midnight: Date }) {
78
h(EntryProps, entry),
79
h('div', { style:{ clear:'both' } })
80
)
81
-}
81
+})
82
83
function fixUrl(s:string) {
84
return s.replace(/#/g, encodeURIComponent)
85
}
86
87
-function EntryProps(entry: DirEntry & { midnight: Date }) {
87
+const EntryProps = memo(function(entry: DirEntry & { midnight: Date }) {
88
const { t, s } = entry
89
const today = t && t > entry.midnight
90
const shortTs = isMobile()
@@ -105,4 +105,4 @@ function EntryProps(entry: DirEntry & { midnight: Date }) {
105
}
106
}, !shortTs ? t.toLocaleString() : today ? t.toLocaleTimeString() : t.toLocaleDateString()),
107
)
108
-}
108
+})
frontend/src/icons.ts
+3
-4
@@ -1,5 +1,5 @@
1
import { state, useSnapState } from './state'
2
-import { createElement as h } from 'react'
2
+import { createElement as h, memo } from 'react'
3
4
const SYS_ICONS = {
5
login: 'user:👤',
@@ -26,7 +26,7 @@ document.fonts.ready.then(async ()=> {
26
state.iconsClass = ' ' // with fontello we don't need an additional class (unlike google material icons), but the empty space will cause reload
27
})
28
29
-export function Icon({ name, alt, className='', ...props }: { name:string, className:string, alt?:string, style?:any }) {
29
+export const Icon = memo(({ name, alt, className='', ...props }: { name:string, className?:string, alt?:string, style?:any }) => {
30
// @ts-ignore
31
const [clazz,emoji] = (SYS_ICONS[name] || name).split(':')
32
const { iconsClass } = useSnapState()
@@ -37,5 +37,4 @@ export function Icon({ name, alt, className='', ...props }: { name:string, class
37
role: 'img',
38
className,
39
}, iconsClass ? null : (emoji||'#'))
40
-}
41
-
40
+})