Memorization


// ๅช่ฆ props ๆฒ’่ฎŠๅฐฑไธๆœƒ re-render
function TableValues(props) {}

export default React.memo(TableValues)
  • ้ฉ็”จ child component ๆ˜ฏ pure ไนŸๅฐฑๆ˜ฏๆฒ’ๆœ‰ useStae, useContext ๆ™‚

Implement memo

array ๆ˜ฏ by reference ๆ‰€ไปฅ map ็š„ key ไธ่ƒฝ็›ดๆŽฅ [1, 2] ๏ผŒไธ็„ถๆœ‰ๅฏ่ƒฝ

// map
{
  [1,2]: 3,
  [1,2]: 3,
  [1,2]: 3
}

// need to convert to like 1_2
{
  "1_2": 3
}
function memo(func, resolver) {
  // your code here
  let lookup = new Map()
  let result = 0;
  return function (...args) {
      const key = resolver ? resolver(...args) : args.join('_')
      if(!lookup.has(key)){
        lookup.set(key, func(...args))
      }
      console.log(lookup)
      return lookup.get(key)
  }
}
const func = (arg1, arg2) => {
  return arg1 + arg2
}
const memoed = memo(func)

memoed(1, 2) 
memoed(1, 2) 
memoed(1, 3)

Last updated