useRefFn()

使い方

code:ts

const func, setFunc = useRefFn<(value: number) => string>();

setFunc((value) => ${value});

const result = func(222);

//...

setFuncで実行したい函数を設定する

いくら書き換えても描画更新処理は走らない

実行したい函数をuseRef()に格納してReactの更新処理とは独立させている

funcはuseCallback()により、常に同一の函数であることが保証されている

code

適宜import {useRef, useCallback} from "https://esm.sh/preact@10.5.14/hooks";などを追記する

code:mod.ts

export const useRefFn = <Fn extends CallableFunction>() => {

const ref = useRef<Fn>();

const fn = useCallback((...args) => ref.current?.(...args), []);

const setFn = useCallback((fn: Fn) => (ref.current = fn), []);

return fn, setFn as const;

};

元コードでは(fn: Fn) => (ref.current = fn)はuseCallback包んでいなかった

包まなくていいのか？takker.icon

包まないとrenderingごとに違う(fn: Fn) => (ref.current = fn)が返ってきてしまいそうなのだが