def create(
        cls,
        var_name: str | None = None,
        default: Any = NoValue,
        global_ref: bool = True,
    ) -> ClientStateVar:
        """Create a local_state Var that can be accessed and updated on the client.

        The `ClientStateVar` should be included in the highest parent component
        that contains the components which will access and manipulate the client
        state. It has no visual rendering, including it ensures that the
        `useState` hook is called in the correct scope.

        To render the var in a component, use the `value` property.

        To update the var in a component, use the `set` property or `set_value` method.

        To access the var in an event handler, use the `retrieve` method with
        `callback` set to the event handler which should receive the value.

        To update the var in an event handler, use the `push` method with the
        value to update.

        Args:
            var_name: The name of the variable.
            default: The default value of the variable.
            global_ref: Whether the state should be accessible in any Component and on the backend.

        Raises:
            ValueError: If the var_name is not a string.

        Returns:
            ClientStateVar
        """
        if var_name is None:
            var_name = get_unique_variable_name()
        id_name = "id_" + get_unique_variable_name()
        if not isinstance(var_name, str):
            msg = "var_name must be a string."
            raise ValueError(msg)
        if default is NoValue:
            default_var = Var(_js_expr="")
        elif not isinstance(default, Var):
            default_var = LiteralVar.create(default)
        else:
            default_var = default
        setter_name = f"set{var_name.capitalize()}"
        hooks: dict[str, VarData | None] = {
            f"const {id_name} = useId()": None,
            f"const [{var_name}, {setter_name}] = useState({default_var!s})": None,
        }
        imports = {
            "react": [ImportVar(tag="useState"), ImportVar(tag="useId")],
        }
        if global_ref:
            arg_name = get_unique_variable_name()
            func = ArgsFunctionOperationBuilder.create(
                args_names=(arg_name,),
                return_expr=Var("Array.prototype.forEach.call")
                .to(FunctionVar)
                .call(
                    (
                        Var("Object.values")
                        .to(FunctionVar)
                        .call(Var(_client_state_ref_dict(setter_name)))
                        .to(list)
                        .to(list)
                    )
                    + Var.create(
                        [
                            Var(
                                f"(value) => {{ {_client_state_ref(var_name)} = value; }}"
                            )
                        ]
                    ).to(list),
                    ArgsFunctionOperationBuilder.create(
                        args_names=("setter",),
                        return_expr=Var("setter").to(FunctionVar).call(Var(arg_name)),
                    ),
                ),
            )

            hooks[f"{_client_state_ref(setter_name)} = {func!s}"] = None
            hooks[f"{_client_state_ref(var_name)} ??= {var_name!s}"] = None
            hooks[f"{_client_state_ref_dict(var_name)} ??= {{}}"] = None
            hooks[f"{_client_state_ref_dict(setter_name)} ??= {{}}"] = None
            hooks[
                f"{_client_state_ref_dict(var_name)}[{id_name}] = {_client_state_ref(var_name)}"
            ] = None
            hooks[
                f"{_client_state_ref_dict(setter_name)}[{id_name}] = {setter_name}"
            ] = None
            imports.update(_refs_import)
        return cls(
            _js_expr="",
            _setter_name=setter_name,
            _getter_name=var_name,
            _id_name=id_name,
            _global_ref=global_ref,
            _var_type=default_var._var_type,
            _var_data=VarData.merge(
                default_var._var_data,
                VarData(
                    hooks=hooks,
                    imports=imports,
                ),
            ),
        )
Create a local_state Var that can be accessed and updated on the client.

        The `ClientStateVar` should be included in the highest parent component
        that contains the components which will access and manipulate the client
        state. It has no visual rendering, including it ensures that the
        `useState` hook is called in the correct scope.

        To render the var in a component, use the `value` property.

        To update the var in a component, use the `set` property or `set_value` method.

        To access the var in an event handler, use the `retrieve` method with
        `callback` set to the event handler which should receive the value.

        To update the var in an event handler, use the `push` method with the
        value to update.

        Args:
            var_name: The name of the variable.
            default: The default value of the variable.
            global_ref: Whether the state should be accessible in any Component and on the backend.

        Raises:
            ValueError: If the var_name is not a string.

        Returns:
            ClientStateVar
        
reflex/experimental/client_state.py