useRefFn()
使い方
code:ts
setFunc((value) => ${value});
const result = func(222);
//...
setFuncで実行したい函数を設定する
いくら書き換えても描画更新処理は走らない
実行したい函数をuseRef()に格納してReactの更新処理とは独立させている 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), []);
};
元コードでは(fn: Fn) => (ref.current = fn)はuseCallback包んでいなかった
包まなくていいのか?takker.icon
包まないとrenderingごとに違う(fn: Fn) => (ref.current = fn)が返ってきてしまいそうなのだが