Feature: add memoization (caching)

[sc0ttj]

memoization built-in to Component

I could update Component to (optionally) memoize some of the following functions by default:

• Component.setState()
• Component.view()
• Component.css()
• Component.eq()
• domDiff
• html and htmel
• any of the "standalone" or "React-like" modules: render, useState, useReducer, createStore

Ideally, this would be achieved simply by doing:

myComponent.memoize(true);

or for more control:

myComponent.memoize({
    eq: true,
    setState: true,
    view: true,
    css: true,
    domDiff: true,
    html: true,
    htmel: true,
  })

Possible sources:

• https://github.com/theKashey/memoize-state (catches more state/objects changes than others)
• https://github.com/aduth/memize (0.3kb minified & gzipped and one of the fastest ones around)
• https://github.com/anywhichway/nano-memoize (0.8kb minified, very fast, based on others but with extra fixes)
• https://github.com/Lexxus/super-memoize (very fast, based on nano-memoize, plus performance tweaks)
• https://github.com/addyosmani/memoize.js (tiny but not that fast)
• https://github.com/luwes/memo (based on fast-memoize, uses shallow obj comparison, not JSON Stringify)
• https://github.com/lovasoa/memoization (tiny implementation, uses JSON Stringify)
• https://github.com/damiancipolat/Memoization_JS (super tiny, mostly good for getting your head around it)
• https://github.com/lucagez/ricordo (700bytes, supports Node & browser)

Notes:

Component.eq - Component already includes a very fast, React-compatible object equality thing.. It could be shoe horned into any of the above solutions that use shallow object comparison, to make them even smaller.

And maybe it could be memoized itself, so as not to always have to perform the comparisons..

---

a memoization addon module

Also see any lightweight and standalone implementations of the useMemo() React hook..

This can be used by users to add memoization to any functions they create or define, such as:

• a Components "actions"
• any functions the user passes to useState, useEffect, useReducer (etc)

---

manually adding caching here & there

Use patterns like this: https://flaviocopes.com/javascript-memoization/