---
title: 'State'
---

## General view of how to store state

This table can be used as a guide when deciding what state-storing type fits best for your use case:

| Hook                     | Type                       | Rerender when?               | Scope               |
| ------------------------ | -------------------------- | ---------------------------- | ------------------- |
| [use_state]              | `T`                        | got set                      | component instance  |
| [use_state_eq]           | `T: PartialEq`             | got set with diff. value     | component instance  |
| [use_reducer]            | `T: Reducible`             | got reduced                  | component instance  |
| [use_reducer_eq]         | `T: Reducible + PartialEq` | got reduced with diff. value | component instance  |
| [use_memo]               | `Deps -> T`                | dependencies changed         | component instance  |
| [use_callback]           | `Deps -> Callback<E>`      | dependencies changed         | component instance  |
| [use_mut_ref]            | `T`                        | -                            | component instance  |
| a static global variable | `T`                        | -                            | global, used by all |

## Accessing handle internals

Both `UseStateHandle` and `UseReducerHandle` provide methods to access their internal parts directly.

### `value_rc()`

Returns the current value wrapped in an `Rc<T>`. Unlike dereferencing the handle (which gives a `&T`
tied to the handle's lifetime), `value_rc()` gives you an owned `Rc<T>` that can be moved into
closures or stored independently.

```rust
# use std::rc::Rc;
# use yew::prelude::*;
# #[component]
# fn Comp() -> Html {
let counter = use_state(|| 0);
let rc_value: Rc<i32> = counter.value_rc();
# html! {}
# }
```

### `into_inner()`

Consumes the handle and returns its two parts: the current value as `Rc<T>` and the
setter/dispatcher. This is useful when you want to separate reading from writing without cloning
the full handle.

For `UseReducerHandle`, the return type is `(Rc<T>, UseReducerDispatcher<T>)`:

```rust
# use std::rc::Rc;
# use yew::prelude::*;
# #[derive(Default, PartialEq)]
# struct CounterState { counter: i32 }
# impl Reducible for CounterState {
#     type Action = ();
#     fn reduce(self: Rc<Self>, _: ()) -> Rc<Self> { self }
# }
# #[component]
# fn Comp() -> Html {
let state = use_reducer(CounterState::default);
let (value, dispatcher) = state.into_inner();
# html! {}
# }
```

For `UseStateHandle`, the return type is `(Rc<T>, UseStateSetter<T>)`:

```rust
# use std::rc::Rc;
# use yew::prelude::*;
# #[component]
# fn Comp() -> Html {
let state = use_state(|| 0);
let (value, setter) = state.into_inner();
# html! {}
# }
```

[use_state]: https://yew-rs-api.web.app/next/yew/functional/fn.use_state.html
[use_state_eq]: https://yew-rs-api.web.app/next/yew/functional/fn.use_state_eq.html
[use_reducer]: https://yew-rs-api.web.app/next/yew/functional/fn.use_reducer.html
[use_reducer_eq]: https://yew-rs-api.web.app/next/yew/functional/fn.use_reducer_eq.html
[use_memo]: https://yew-rs-api.web.app/next/yew/functional/fn.use_memo.html
[use_callback]: https://yew-rs-api.web.app/next/yew/functional/fn.use_callback.html
[use_mut_ref]: https://yew-rs-api.web.app/next/yew/functional/fn.use_mut_ref.html
