Make useMemo predictable

Usage no npm install needed!

<script type="module">
  import smartHooksUseSmartMemo from 'https://cdn.skypack.dev/@smart-hooks/use-smart-memo';



There is a temptation to use the standard React hook useMemo not only for the sake of performance optimization. But in the official documentation, it says clearly: You may rely on useMemo as a performance optimization, not as a semantic guarantee. useSmartMemo is for the control over the execution of some part of code skipping it if values passed to a dependencies list do not change. Most often, the execution of useSmartMemo is relying upon the original useMemo and doing nothing more than just invoking it. But since React may choose to “forget” some previously memoized values and recalculate them on next render, useSmartMemo has an additional barrier inside useMemo that prevents such recalculations.


npm install @smart-hooks/use-smart-memo --save


import { useSmartMemo } from '@smart-hooks/use-smart-memo';

useSmartMemo(() => {
  // conditional code
}, [v1, v2]);
// As long as the values of v1, v2 are not changing, the code inside the function will not
// re-execute