Implementing useState similar to React to achieve stateful functional components

[B4PT0R]

Hello,

Just discovered Reflex recently. Amazing piece of work here.

I've been lurking at the source code and played around with the framework to get to know its internal workings better.

Here is what I came up with :

import reflex as rx
import uuid

def use_state(default,vartype=None):
    """
    Creates a state with a single var 'value' set to default and returns the corresponding state var and setter
    """
    vartype=vartype or type(default)
    attributes={
        'value':default,
        '__annotations__':{'value':vartype}
    }
    cls_name="State_"+str(uuid.uuid4())
    state=type(cls_name,(rx.State,),attributes)
    state_var=state.value
    state_setter=state.set_value
    return state_var,state_setter

#Usage:

def button(initial_count:int=0) -> rx.Component:
    count,set_count=use_state(initial_count)
    return rx.button(count,on_click=set_count(count+1))

@rx.page()
def index() -> rx.Component:
    return rx.box(
        button(),
        button(10)
    )

app = rx.App()

Which successfully produces two stateful buttons with independent states.
The state is purely internal to the button and can't be referenced from outside.
Idk, maybe this has some relevance for some use cases where you just want to quickly use a state in a purely functional component.

[benedikt-bartscher]

@B4PT0R there is rx.ComponentState for stateful components, docs: https://reflex.dev/docs/substates/component-state/

[B4PT0R]

@benedikt-bartscher Yes, I know. I looked at the source code of ComponentState to figure out how to implement this.
It's mostly an alternative to quickly spawn a state variable/setter into a functional component without having to declare a full ComponentState object. Akin to the difference in React between class-based and functional components.
I admit it won't change the face of the world, I was just playing with the library.

[masenf]

Some prior art:

reflex/reflex/experimental/hooks.py

Lines 80 to 93 in 9c7dbdb

	def useState(var_name, default=None) -> Var | None:
	"""Create a useState hook with a variable name and setter name.
	Args:
	var_name: The name of the variable.
	default: The default value of the variable.
	Returns:
	A useState hook.
	"""
	setter_name = f"set{var_name.capitalize()}"
	v = const([var_name, setter_name], f"useState({default})")
	_add_react_import(v, "useState")
	return v

https://github.com/masenf/reflex-pomodoro/blob/main/reflex_pomodoro/components/use_state.py

#2917 (comment) (similar to above, but with a small working example)

The team has been discussing the exposure of client-side-only state (i.e. formalizing the useState function I have defined above), but we haven't decided if it will actually help, or make things more confusing... the requirement to wrap components in an IntegralFragment to allow multiple components to share the client side state is also a bit weird. [1]

(Edit: oops, misread this and thought the code was going for browser-side state. At any rate, leaving it for potential inspo)