useSelector hook for BasicState

useLatest.luau

local React = require("@pkgs/React")

local useMemo = React.useMemo
local useRef = React.useRef

type Predicate<T = unknown> = (a: T?, b: T) -> boolean

local function isStrictEqual(a: unknown?, b: unknown)
	return a == b
end

local function useLatest<T>(value: T, predicate: Predicate<T>?): { current: T }
	local ref = useRef(value)

	useMemo(function()
		local predicateFn: Predicate<T> = predicate or isStrictEqual

		if not predicateFn(ref.current, value) then
			ref.current = value
		end
	end, { value })

	return ref :: { current: T }
end

return useLatest

useSelector.luau

local React = require("@pkgs/React")

local useLatest = require("./useLatest")
local useEffect = React.useEffect
local useState = React.useState

type BasicStateStore = { [any]: any }

local function useSelector<T>(
	store: BasicStateStore,
	selector: (state: BasicStateStore) -> T
): T
	local value, setValue = useState(selector(store:GetState()))
	local selectorRef = useLatest(selector)

	useEffect(function()
		local connection = store.Changed:Connect(function()
			local state = store:GetState()
			setValue(selectorRef.current(state))
		end)

		return function()
			connection:Disconnect()
		end
	end, { selector })

	return value
end

return useSelector