charm/packages/react-charm/src/init.luau

local Charm = require("./Charm")
local React = require("./React")

--- Returns a React state that updates when the getter function updates.
--- Re-renders the component when the value changes.
---
--- If the `dependencies` array is provided, a new effect is created for the
--- current `getter` when the dependencies change. Otherwise, the effect is
--- created only once, when the component is mounted.
---
--- @param getter The signal or selector to watch.
--- @param dependencies An array of values used to memoize the getter.
--- @return The current state.
local function useSignalState<T>(getter: () -> T, dependencies: { any }?): T
	local value, setValue = React.useState(getter)

	React.useLayoutEffect(function()
		return Charm.effect(function()
			-- Wrap in untracked to avoid tracking inner effect and atom calls
			Charm.untracked(setValue, getter())
		end)
	end, dependencies or {})

	return value
end

--- Returns a React binding that updates when the getter function updates.
---
--- If the `dependencies` array is provided, a new effect is created for the
--- current `getter` when the dependencies change. Otherwise, the effect is
--- created only once, when the component is mounted.
---
--- @param getter The atom or selector to watch.
--- @param dependencies An array of values used to memoize the getter.
--- @return A binding that stores the current state.
local function useSignalBinding<T>(getter: () -> T, dependencies: { any }?)
	local initialValue = React.useMemo(getter, {})
	local binding, setBinding = React.useBinding(initialValue)

	React.useLayoutEffect(function()
		return Charm.effect(function()
			-- Wrap in untracked to avoid tracking inner effect and atom calls
			Charm.untracked(setBinding, getter())
		end)
	end, dependencies or {})

	return binding
end

return {
	useSignalState = useSignalState,
	useSignalBinding = useSignalBinding,
	useAtom = useSignalState,
}