mirror of
https://github.com/rowyio/rowy.git
synced 2026-09-02 04:00:17 +02:00
30 lines
841 B
TypeScript
30 lines
841 B
TypeScript
|
import {
|
||
|
|
MutableRefObject,
|
||
|
|
useCallback,
|
||
|
|
useRef,
|
||
|
|
useSyncExternalStore,
|
||
|
|
} from "react";
|
||
|
|
|
||
|
|
// NOTE: This is not the final solution. But is a potential solution for this problem.
|
||
|
|
export default function useStateWithRef<T>(
|
||
|
|
initialState: T
|
||
|
|
): [T, (newValue: T) => void, MutableRefObject<T>] {
|
||
|
|
const value = useRef<T>(initialState);
|
||
|
|
const get = useCallback(() => value.current, []);
|
||
|
|
const subscribers = useRef(new Set<() => void>());
|
||
|
|
|
||
|
|
const set = useCallback((newValue: T) => {
|
||
|
|
value.current = newValue;
|
||
|
|
subscribers.current.forEach((callback) => callback());
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const subscribe = useCallback((callback: () => void) => {
|
||
|
|
subscribers.current.add(callback);
|
||
|
|
return () => subscribers.current.delete(callback);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const state = useSyncExternalStore(subscribe, get);
|
||
|
|
|
||
|
|
return [state, set, value];
|
||
|
|
}
|