refactor: improve logic

pkgs/react-charm/src/init.luau

@@ -1,32 +1,56 @@
 local Charm = require(script.Parent.Charm)
 local React = require(script.Parent.React)
 
-local listen = Charm.listen
+local effect = Charm.effect
+local useBinding = React.useBinding
 local useEffect = React.useEffect
 local useState = React.useState
 
---[=[
-	A hook that subscribes to changes in the given atom or selector. The
-	component is re-rendered whenever the state changes.
-	
-	If the `dependencies` array is provided, the subscription to the atom or
-	selector is re-created whenever the dependencies change. Otherwise, the
-	subscription is created once when the component is mounted.
-	
-	@param callback The atom or selector to subscribe to.
-	@param dependencies An array of values that the subscription depends on.
-	@return The current state.
-]=]
-local function useAtom<State>(callback: () -> State, dependencies: { any }?): State
-	local state, setState = useState(callback)
+--- A hook that subscribes to changes in the given atom or selector. The
+--- component is re-rendered whenever the state changes.
+---
+--- If the `dependencies` array is provided, the effect is re-created whenever
+--- the dependencies change. Otherwise, the subscription is created once when
+--- the component is mounted.
+---
+--- @param selector The atom or selector to subscribe to.
+--- @param dependencies An array of values that the subscription depends on.
+--- @return The current state.
+local function useAtom<State>(selector: () -> State, dependencies: { any }?): State
+	local state, setState = useState(selector)
 
 	useEffect(function()
-		return listen(callback, setState)
+		return effect(function()
+			setState(selector())
+		end)
 	end, dependencies or {})
 
 	return state
 end
 
+--- A hook that subscribes to changes in the given atom or selector. Returns
+--- a binding that updates when the state changes.
+---
+--- If the `dependencies` array is provided, the effect is re-created whenever
+--- the dependencies change. Otherwise, the subscription is created once when
+--- the component is mounted.
+---
+--- @param selector The atom or selector to subscribe to.
+--- @param dependencies An array of values that the subscription depends on.
+--- @return A binding that stores the current state.
+local function useAtomBinding<State>(selector: () -> State, dependencies: { any }?)
+	local binding, setBinding = useBinding(selector)
+
+	useEffect(function()
+		return effect(function()
+			setBinding(selector())
+		end)
+	end, dependencies or {})
+
+	return binding
+end
+
 return {
 	useAtom = useAtom,
+	useAtomBinding = useAtomBinding,
 }