Last active
June 10, 2020 22:51
-
-
Save ardeshireshghi/315034816ecf873162617db9f368ffd1 to your computer and use it in GitHub Desktop.
Memoize very similar to `useMemo` in React
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function isEqual(prevDeps = [], newDeps = []) { | |
if (prevDeps.length !== newDeps.length) { | |
return false; | |
} | |
for (const [ i, dep ] of newDeps.entries()) { | |
if (!Object.is(dep, prevDeps[i])) { | |
return false; | |
} | |
} | |
return true; | |
} | |
const createMemo = () => { | |
let memoizedState = null; | |
function memo(createFn, deps = []) { | |
const prevState = memoizedState; | |
let nextState; | |
if (prevState && isEqual(deps, prevState.deps)) { | |
console.log('Using memoised result'); | |
return prevState.result; | |
} else { | |
console.log('Calculating again'); | |
nextState = { | |
result: createFn(), | |
deps | |
}; | |
memoizedState = nextState; | |
return memoizedState.result; | |
} | |
} | |
return memo; | |
}; | |
// Example | |
const memo = createMemo(); | |
let a = 40, b = 50; | |
let result = memo(() => a + b, [a, b]); | |
// Calculating: 90 | |
let result = memo(() => a + b, [a, b]); | |
// Using memoized value: 90 | |
a = 50; | |
let result = memo(() => a + b, [a, b]); | |
// Calculating: 100 | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment