@laser-ui/hooks 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# Change Log
+
+All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 0.0.1 (2023-09-07)
+
+**Note:** Version bump only for package @laser-ui/hooks

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Xie Jay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+# @laser-ui/hooks
+
+Laser UI: Fast and Powerful React Components.
+
+Shared hooks used by Laser UI packages.

package/index.d.ts

@@ -0,0 +1,13 @@
+export { useStorage } from './storage';
+export { useACL } from './useACL';
+export { useAsync } from './useAsync';
+export { useEvent } from './useEvent';
+export { useEventCallback } from './useEventCallback';
+export { useForceUpdate } from './useForceUpdate';
+export { useForkRef } from './useForkRef';
+export { useImmer } from './useImmer';
+export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { useMount } from './useMount';
+export { useRefExtra } from './useRefExtra';
+export { useResize } from './useResize';
+export { useUnmount } from './useUnmount';

package/index.js

@@ -0,0 +1,13 @@
+export { useStorage } from './storage';
+export { useACL } from './useACL';
+export { useAsync } from './useAsync';
+export { useEvent } from './useEvent';
+export { useEventCallback } from './useEventCallback';
+export { useForceUpdate } from './useForceUpdate';
+export { useForkRef } from './useForkRef';
+export { useImmer } from './useImmer';
+export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { useMount } from './useMount';
+export { useRefExtra } from './useRefExtra';
+export { useResize } from './useResize';
+export { useUnmount } from './useUnmount';

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@laser-ui/hooks",
+  "version": "0.0.1",
+  "description": "Shared hooks used by Laser UI packages.",
+  "keywords": [
+    "ui",
+    "laser-ui",
+    "hook",
+    "hooks",
+    "react",
+    "react-hook"
+  ],
+  "homepage": "https://github.com/laser-ui/laser-ui",
+  "bugs": {
+    "url": "https://github.com/laser-ui/laser-ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/laser-ui/laser-ui.git"
+  },
+  "license": "MIT",
+  "author": "Xie Jay <xiejay97@gmail.com>",
+  "sideEffects": false,
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "rxjs": "^7.8.1"
+  },
+  "peerDependencies": {
+    "immer": ">=2.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "../../dist/libs/hooks"
+  },
+  "gitHead": "d08f89d34ac56ff632db700f52c06931337c9ce8",
+  "module": "./src/index.js",
+  "type": "module"
+}

package/storage/index.d.ts

@@ -0,0 +1,4 @@
+export * from './useStorage';
+export * from './parser';
+export * from './storage';
+export * from './localStorage';

package/storage/index.js

@@ -0,0 +1,4 @@
+export * from './useStorage';
+export * from './parser';
+export * from './storage';
+export * from './localStorage';

package/storage/localStorage.d.ts

@@ -0,0 +1,8 @@
+import { AbstractStorage } from './storage';
+export declare class LocalStorageService extends AbstractStorage<string, string> {
+    getItem(key: string): string | null;
+    getItem(key: string, defaultValue: string): string;
+    setItem(key: string, value: string): void;
+    removeItem(key: string): void;
+    clear(): void;
+}

package/storage/localStorage.js

@@ -0,0 +1,16 @@
+import { AbstractStorage } from './storage';
+export class LocalStorageService extends AbstractStorage {
+    getItem(key, defaultValue) {
+        var _a, _b;
+        return (_b = (_a = localStorage.getItem(key)) !== null && _a !== void 0 ? _a : defaultValue) !== null && _b !== void 0 ? _b : null;
+    }
+    setItem(key, value) {
+        localStorage.setItem(key, value);
+    }
+    removeItem(key) {
+        localStorage.removeItem(key);
+    }
+    clear() {
+        localStorage.clear();
+    }
+}

package/storage/parser.d.ts

@@ -0,0 +1,10 @@
+export interface Parser<V, O> {
+    deserializer: (value: V) => O;
+    serializer: (value: O) => V;
+}
+export interface AbstractParserOptions<V> {
+    plain: Parser<V, string>;
+    number: Parser<V, number>;
+    json: Parser<V, any>;
+}
+export declare const STRING_PARSER: AbstractParserOptions<string>;

package/storage/parser.js

@@ -0,0 +1,14 @@
+export const STRING_PARSER = {
+    plain: {
+        serializer: (value) => value,
+        deserializer: (value) => value,
+    },
+    number: {
+        serializer: (value) => String(value),
+        deserializer: (value) => Number(value),
+    },
+    json: {
+        serializer: (value) => JSON.stringify(value),
+        deserializer: (value) => JSON.parse(value),
+    },
+};

package/storage/storage.d.ts

@@ -0,0 +1,7 @@
+export declare abstract class AbstractStorage<K, V> {
+    abstract getItem(key: K): V | null;
+    abstract getItem(key: K, defaultValue: V): V;
+    abstract setItem(key: K, value: V): void;
+    abstract removeItem(key: K): void;
+    abstract clear(): void;
+}

package/storage/storage.js

@@ -0,0 +1,2 @@
+export class AbstractStorage {
+}

package/storage/store.d.ts

@@ -0,0 +1,18 @@
+import type { AbstractStorage } from './storage';
+declare class Store {
+    private _listeners;
+    private _key;
+    private _storage;
+    constructor(key: any, storage: AbstractStorage<any, any>);
+    subscribe(onStoreChange: () => void): () => void;
+    getSnapshot(): any;
+    emitChange(): void;
+}
+export declare const stores: Map<any, Store>;
+export declare function useStore(key: any, defaultValue: any, storage: AbstractStorage<any, any>): {
+    subscribe: (onStoreChange: () => void) => () => void;
+    getSnapshot: () => any;
+    getServerSnapshot: () => any;
+    emitChange: () => void;
+};
+export {};

package/storage/store.js

@@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+class Store {
+    constructor(key, storage) {
+        Object.defineProperty(this, "_listeners", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "_key", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_storage", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this._key = key;
+        this._storage = storage;
+    }
+    subscribe(onStoreChange) {
+        this._listeners = this._listeners.concat([onStoreChange]);
+        return () => {
+            this._listeners = this._listeners.filter((f) => f !== onStoreChange);
+        };
+    }
+    getSnapshot() {
+        return this._storage.getItem(this._key);
+    }
+    emitChange() {
+        for (const listener of this._listeners) {
+            listener();
+        }
+    }
+}
+export const stores = new Map();
+export function useStore(key, defaultValue, storage) {
+    return useMemo(() => {
+        let store = stores.get(key);
+        if (!store) {
+            store = new Store(key, storage);
+            stores.set(key, store);
+        }
+        return {
+            subscribe: store.subscribe.bind(store),
+            getSnapshot: store.getSnapshot.bind(store),
+            getServerSnapshot: () => {
+                try {
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    return store.getSnapshot().bind(store);
+                }
+                catch (error) {
+                    return defaultValue !== null && defaultValue !== void 0 ? defaultValue : null;
+                }
+            },
+            emitChange: store.emitChange.bind(store),
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [key, storage]);
+}

package/storage/useStorage.d.ts

@@ -0,0 +1,18 @@
+import type { AbstractParserOptions } from './parser';
+import type { AbstractStorage } from './storage';
+interface UseStorageMethod<V> {
+    set: (value: V) => void;
+    remove: () => void;
+}
+export declare function useStorage<V, K = string>(key: K | null, defaultValue?: undefined, parser?: keyof AbstractParserOptions<any>): {
+    readonly value: V | null;
+} & UseStorageMethod<V>;
+export declare function useStorage<V, K = string>(key: K, defaultValue: V, parser?: keyof AbstractParserOptions<any>): {
+    readonly value: V;
+} & UseStorageMethod<V>;
+export declare namespace useStorage {
+    var SERVICE: AbstractStorage<any, any>;
+    var PARSER: AbstractParserOptions<any>;
+    var clear: () => void;
+}
+export {};

package/storage/useStorage.js

@@ -0,0 +1,36 @@
+import { isNull, isUndefined } from 'lodash';
+import { useMemo, useSyncExternalStore } from 'react';
+import { LocalStorageService } from './localStorage';
+import { STRING_PARSER } from './parser';
+import { useStore, stores } from './store';
+export function useStorage(key, defaultValue, parser = 'plain') {
+    const { SERVICE, PARSER } = useStorage;
+    const { serializer, deserializer } = isUndefined(parser) ? PARSER.plain : PARSER[parser];
+    const store = useStore(key, defaultValue, SERVICE);
+    const value = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
+    return useMemo(() => ({
+        get value() {
+            if (isNull(value)) {
+                return defaultValue !== null && defaultValue !== void 0 ? defaultValue : null;
+            }
+            return deserializer(value);
+        },
+        set: (value) => {
+            const originValue = serializer(value);
+            SERVICE.setItem(key, originValue);
+            store.emitChange();
+        },
+        remove: () => {
+            SERVICE.removeItem(key);
+            store.emitChange();
+        },
+    }), [SERVICE, defaultValue, deserializer, key, serializer, store, value]);
+}
+useStorage.SERVICE = new LocalStorageService();
+useStorage.PARSER = STRING_PARSER;
+useStorage.clear = () => {
+    useStorage.SERVICE.clear();
+    for (const [, store] of stores) {
+        store.emitChange();
+    }
+};

package/useACL.d.ts

@@ -0,0 +1,14 @@
+export type Control = string | number;
+export type ControlMode = 'one' | 'all';
+export declare class ACL {
+    private _full;
+    private _controls;
+    get full(): boolean;
+    get controls(): Control[];
+    setFull(full: boolean): void;
+    set(control: Control[]): void;
+    add(control: Control | Control[]): void;
+    remove(control: Control | Control[]): void;
+    can(control: Control | Control[], mode?: ControlMode): boolean;
+}
+export declare function useACL(): ACL;

package/useACL.js

@@ -0,0 +1,79 @@
+import { isArray } from 'lodash';
+import { useSyncExternalStore } from 'react';
+export class ACL {
+    constructor() {
+        Object.defineProperty(this, "_full", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "_controls", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Set()
+        });
+    }
+    get full() {
+        return this._full;
+    }
+    get controls() {
+        return Array.from(this._controls);
+    }
+    setFull(full) {
+        this._full = full;
+        emitChange();
+    }
+    set(control) {
+        this._controls = new Set(control);
+        emitChange();
+    }
+    add(control) {
+        for (const v of isArray(control) ? control : [control]) {
+            this._controls.add(v);
+        }
+        emitChange();
+    }
+    remove(control) {
+        for (const v of isArray(control) ? control : [control]) {
+            this._controls.delete(v);
+        }
+        emitChange();
+    }
+    can(control, mode = 'one') {
+        if (this._full) {
+            return true;
+        }
+        const arr = isArray(control) ? control : [control];
+        let n = 0;
+        for (const v of arr) {
+            if (this._controls.has(v)) {
+                n += 1;
+            }
+        }
+        if (n > 0 && (mode === 'one' || (mode === 'all' && n === arr.length))) {
+            return true;
+        }
+        return false;
+    }
+}
+const acl = new ACL();
+let listeners = [];
+function subscribe(onStoreChange) {
+    listeners = listeners.concat([onStoreChange]);
+    return () => {
+        listeners = listeners.filter((f) => f !== onStoreChange);
+    };
+}
+function getSnapshot() {
+    return acl;
+}
+function emitChange() {
+    for (const listener of listeners) {
+        listener();
+    }
+}
+export function useACL() {
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}

package/useAsync.d.ts

@@ -0,0 +1,13 @@
+declare class AsyncInstance {
+    protected clearFns: Set<() => void>;
+    clearAll(): void;
+    setTimeout(handler: TimerHandler, timeout?: number, clearFn?: () => void): () => void;
+    requestAnimationFrame(cb: FrameRequestCallback, clearFn?: () => void): () => void;
+}
+export declare class Async extends AsyncInstance {
+    private instances;
+    create(): AsyncInstance;
+    clearAll(): void;
+}
+export declare function useAsync(): Async;
+export {};

package/useAsync.js

@@ -0,0 +1,66 @@
+import { useMemo } from 'react';
+import { useUnmount } from './useUnmount';
+class AsyncInstance {
+    constructor() {
+        Object.defineProperty(this, "clearFns", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Set()
+        });
+    }
+    clearAll() {
+        for (const clear of this.clearFns) {
+            clear();
+        }
+    }
+    setTimeout(handler, timeout, clearFn) {
+        const tid = window.setTimeout(handler, timeout);
+        const clear = () => {
+            clearFn === null || clearFn === void 0 ? void 0 : clearFn();
+            clearTimeout(tid);
+        };
+        this.clearFns.add(clear);
+        return clear;
+    }
+    requestAnimationFrame(cb, clearFn) {
+        const tid = requestAnimationFrame(cb);
+        const clear = () => {
+            clearFn === null || clearFn === void 0 ? void 0 : clearFn();
+            cancelAnimationFrame(tid);
+        };
+        this.clearFns.add(clear);
+        return clear;
+    }
+}
+export class Async extends AsyncInstance {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "instances", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Set()
+        });
+    }
+    create() {
+        const instance = new AsyncInstance();
+        this.instances.add(instance);
+        return instance;
+    }
+    clearAll() {
+        for (const clear of this.clearFns) {
+            clear();
+        }
+        for (const instance of this.instances) {
+            instance.clearAll();
+        }
+    }
+}
+export function useAsync() {
+    const async = useMemo(() => new Async(), []);
+    useUnmount(() => {
+        async.clearAll();
+    });
+    return async;
+}

package/useEvent.d.ts

@@ -0,0 +1,2 @@
+import type { HasEventTargetAddRemove } from 'rxjs/internal/observable/fromEvent';
+export declare function useEvent<E = Event>(target: React.RefObject<HasEventTargetAddRemove<E> | null>, eventName: keyof HTMLElementEventMap, callback?: (e: E) => void, options?: AddEventListenerOptions, disabled?: boolean): void;

package/useEvent.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { fromEvent } from 'rxjs';
+export function useEvent(target, eventName, callback, options, disabled = false) {
+    useEffect(() => {
+        if (target.current && !disabled) {
+            const ob = fromEvent(target.current, eventName, options).subscribe({
+                next: (e) => {
+                    callback === null || callback === void 0 ? void 0 : callback(e);
+                },
+            });
+            return () => {
+                ob.unsubscribe();
+            };
+        }
+    });
+}

package/useEventCallback.d.ts

@@ -0,0 +1 @@
+export declare function useEventCallback<T extends (...args: any[]) => any>(fn: T): T;

package/useEventCallback.js

@@ -0,0 +1,6 @@
+import { useCallback, useRef } from 'react';
+export function useEventCallback(fn) {
+    const ref = useRef(fn);
+    ref.current = fn;
+    return useCallback((...args) => ref.current(...args), []);
+}

package/useForceUpdate.d.ts

@@ -0,0 +1 @@
+export declare function useForceUpdate(): import("react").DispatchWithoutAction;

package/useForceUpdate.js

@@ -0,0 +1,5 @@
+import { useReducer } from 'react';
+export function useForceUpdate() {
+    const [, forceUpdate] = useReducer((n) => n + 1, 0);
+    return forceUpdate;
+}

package/useForkRef.d.ts

@@ -0,0 +1 @@
+export declare function useForkRef<T>(...refs: (React.ForwardedRef<T> | undefined)[]): React.RefCallback<T>;

package/useForkRef.js

@@ -0,0 +1,19 @@
+import { isFunction, isObject } from 'lodash';
+import { useCallback } from 'react';
+function setRef(ref, value) {
+    if (isFunction(ref)) {
+        ref(value);
+    }
+    else if (isObject(ref) && 'current' in ref) {
+        ref['current'] = value;
+    }
+}
+export function useForkRef(...refs) {
+    return useCallback((refValue) => {
+        refs.forEach((ref) => {
+            setRef(ref, refValue);
+        });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [...refs]);
+}

package/useImmer.d.ts

@@ -0,0 +1,5 @@
+export type DraftFunction<S> = (draft: S) => void;
+export type Updater<S> = (value: S | DraftFunction<S>) => void;
+export type ImmerHook<S> = [S, Updater<S>];
+export declare function useImmer<S>(): ImmerHook<S | undefined>;
+export declare function useImmer<S = any>(initialValue: S | (() => S)): ImmerHook<S>;

package/useImmer.js

@@ -0,0 +1,13 @@
+import { enableMapSet, freeze, produce } from 'immer';
+import { useState, useCallback } from 'react';
+enableMapSet();
+export function useImmer(initialValue) {
+    const [value, updateValue] = useState(() => freeze(typeof initialValue === 'function' ? initialValue() : initialValue, true));
+    const setValue = useCallback((updater) => {
+        if (typeof updater === 'function')
+            updateValue(produce(updater));
+        else
+            updateValue(freeze(updater));
+    }, []);
+    return [value, setValue];
+}

package/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/useIsomorphicLayoutEffect.js

@@ -0,0 +1,2 @@
+import { useLayoutEffect, useEffect } from 'react';
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/useMount.d.ts

@@ -0,0 +1 @@
+export declare function useMount(fn: () => any): void;

package/useMount.js

@@ -0,0 +1,5 @@
+import { useEffect } from 'react';
+export function useMount(fn) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => fn(), []);
+}

package/useRefExtra.d.ts

@@ -0,0 +1,4 @@
+export type RefExtra<T = HTMLElement> = (() => T | null) | string;
+export declare function useRefExtra(refExtra?: string): React.RefObject<HTMLElement>;
+export declare function useRefExtra<T = HTMLElement>(refExtra?: () => T | null): React.RefObject<T>;
+export declare function useRefExtra<T = HTMLElement>(refExtra?: RefExtra<T>): React.RefObject<T | HTMLElement>;

package/useRefExtra.js

@@ -0,0 +1,13 @@
+import { isString, isUndefined } from 'lodash';
+import { useRef } from 'react';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export function useRefExtra(refExtra) {
+    const ref = useRef(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useIsomorphicLayoutEffect(() => {
+        if (!isUndefined(refExtra)) {
+            ref.current = isString(refExtra) ? document.querySelector(refExtra) : refExtra();
+        }
+    });
+    return ref;
+}

package/useResize.d.ts

@@ -0,0 +1,3 @@
+export declare function useResize(target: React.RefObject<Element | null>, cb?: ResizeObserverCallback, options?: {
+    skipEmpty?: boolean;
+}, disabled?: boolean): void;

package/useResize.js

@@ -0,0 +1,50 @@
+import { isUndefined } from 'lodash';
+import { useEffect, useRef } from 'react';
+import { flushSync } from 'react-dom';
+let checkResize = (cb1, cb2, entry) => {
+    if ('borderBoxSize' in entry) {
+        checkResize = (cb1) => {
+            cb1();
+        };
+    }
+    else {
+        checkResize = (cb1, cb2) => {
+            cb2();
+        };
+    }
+};
+export function useResize(target, cb, options, disabled = false) {
+    const { skipEmpty = true } = options !== null && options !== void 0 ? options : {};
+    const dataRef = useRef({});
+    if (disabled) {
+        dataRef.current.prevContentRect = undefined;
+    }
+    useEffect(() => {
+        if (target.current && !disabled) {
+            const observer = new ResizeObserver((entries, observer) => {
+                const entry = entries[0];
+                checkResize(() => {
+                    if (!isUndefined(dataRef.current.prevContentRect) &&
+                        !(skipEmpty && entry.borderBoxSize[0].blockSize === 0 && entry.borderBoxSize[0].inlineSize === 0) &&
+                        (dataRef.current.prevContentRect.width !== entry.borderBoxSize[0].inlineSize ||
+                            dataRef.current.prevContentRect.height !== entry.borderBoxSize[0].blockSize)) {
+                        flushSync(() => cb === null || cb === void 0 ? void 0 : cb(entries, observer));
+                    }
+                    dataRef.current.prevContentRect = { width: entry.borderBoxSize[0].inlineSize, height: entry.borderBoxSize[0].blockSize };
+                }, () => {
+                    if (!isUndefined(dataRef.current.prevContentRect) &&
+                        !(skipEmpty && entry.contentRect.width === 0 && entry.contentRect.height === 0) &&
+                        (dataRef.current.prevContentRect.width !== entry.contentRect.width ||
+                            dataRef.current.prevContentRect.height !== entry.contentRect.height)) {
+                        flushSync(() => cb === null || cb === void 0 ? void 0 : cb(entries, observer));
+                    }
+                    dataRef.current.prevContentRect = { width: entry.contentRect.width, height: entry.contentRect.height };
+                }, entry);
+            });
+            observer.observe(target.current);
+            return () => {
+                observer.disconnect();
+            };
+        }
+    });
+}

package/useUnmount.d.ts

@@ -0,0 +1 @@
+export declare function useUnmount(fn: () => any): void;

package/useUnmount.js

@@ -0,0 +1,6 @@
+import { useEffect, useRef } from 'react';
+export function useUnmount(fn) {
+    const ref = useRef(fn);
+    ref.current = fn;
+    useEffect(() => () => ref.current(), []);
+}