2024-06-05 20:01:19 +08:00
|
|
|
import React from 'react';
|
|
|
|
|
|
|
|
const BEAT_LIMIT = 1000 * 60 * 10;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* A helper class to map keys to values.
|
|
|
|
* It supports both primitive keys and object keys.
|
|
|
|
*/
|
2024-06-13 09:32:28 +08:00
|
|
|
class ArrayKeyMap<T> {
|
|
|
|
map = new Map<string, T>();
|
2024-06-05 20:01:19 +08:00
|
|
|
|
|
|
|
// Use WeakMap to avoid memory leak
|
2024-06-13 09:32:28 +08:00
|
|
|
objectIDMap = new WeakMap<object, number>();
|
2024-06-05 20:01:19 +08:00
|
|
|
|
|
|
|
nextID = 0;
|
|
|
|
|
2024-06-13 09:32:28 +08:00
|
|
|
lastAccessBeat = new Map<string, number>();
|
2024-06-05 20:01:19 +08:00
|
|
|
|
|
|
|
// We will clean up the cache when reach the limit
|
|
|
|
accessBeat = 0;
|
|
|
|
|
2024-06-13 09:32:28 +08:00
|
|
|
set(keys: React.DependencyList, value: any) {
|
2024-06-05 20:01:19 +08:00
|
|
|
// New set will trigger clear
|
|
|
|
this.clear();
|
|
|
|
|
|
|
|
// Set logic
|
|
|
|
const compositeKey = this.getCompositeKey(keys);
|
|
|
|
this.map.set(compositeKey, value);
|
|
|
|
this.lastAccessBeat.set(compositeKey, Date.now());
|
|
|
|
}
|
|
|
|
|
2024-06-13 09:32:28 +08:00
|
|
|
get(keys: React.DependencyList) {
|
2024-06-05 20:01:19 +08:00
|
|
|
const compositeKey = this.getCompositeKey(keys);
|
|
|
|
|
|
|
|
const cache = this.map.get(compositeKey);
|
|
|
|
this.lastAccessBeat.set(compositeKey, Date.now());
|
|
|
|
this.accessBeat += 1;
|
|
|
|
|
|
|
|
return cache;
|
|
|
|
}
|
|
|
|
|
2024-06-13 09:32:28 +08:00
|
|
|
getCompositeKey(keys: React.DependencyList) {
|
|
|
|
const ids = keys.map<string>((key) => {
|
2024-06-05 20:01:19 +08:00
|
|
|
if (key && typeof key === 'object') {
|
|
|
|
return `obj_${this.getObjectID(key)}`;
|
|
|
|
}
|
|
|
|
return `${typeof key}_${key}`;
|
|
|
|
});
|
|
|
|
return ids.join('|');
|
|
|
|
}
|
|
|
|
|
|
|
|
getObjectID(obj: object) {
|
|
|
|
if (this.objectIDMap.has(obj)) {
|
|
|
|
return this.objectIDMap.get(obj);
|
|
|
|
}
|
|
|
|
const id = this.nextID;
|
|
|
|
this.objectIDMap.set(obj, id);
|
|
|
|
|
|
|
|
this.nextID += 1;
|
|
|
|
|
|
|
|
return id;
|
|
|
|
}
|
|
|
|
|
|
|
|
clear() {
|
|
|
|
if (this.accessBeat > 10000) {
|
|
|
|
const now = Date.now();
|
|
|
|
|
|
|
|
this.lastAccessBeat.forEach((beat, key) => {
|
|
|
|
if (now - beat > BEAT_LIMIT) {
|
|
|
|
this.map.delete(key);
|
|
|
|
this.lastAccessBeat.delete(key);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
this.accessBeat = 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const uniqueMap = new ArrayKeyMap();
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Like `useMemo`, but this hook result will be shared across all instances.
|
|
|
|
*/
|
2024-06-13 09:32:28 +08:00
|
|
|
function useUniqueMemo<T>(memoFn: () => T, deps: React.DependencyList) {
|
|
|
|
return React.useMemo<T>(() => {
|
2024-06-05 20:01:19 +08:00
|
|
|
const cachedValue = uniqueMap.get(deps);
|
|
|
|
if (cachedValue) {
|
2024-06-13 09:32:28 +08:00
|
|
|
return cachedValue as T;
|
2024-06-05 20:01:19 +08:00
|
|
|
}
|
|
|
|
const newValue = memoFn();
|
|
|
|
uniqueMap.set(deps, newValue);
|
|
|
|
return newValue;
|
|
|
|
}, deps);
|
|
|
|
}
|
2024-06-13 09:32:28 +08:00
|
|
|
|
|
|
|
export default useUniqueMemo;
|