---
title: 'use_node_ref'
---

`use_node_ref` is used for maintaining a reference to a DOM element represented as a
[`NodeRef`](../node-refs.mdx). It also persists across renders.

The `ref` attribute can be used to attach the `NodeRef` to an HTML element. In callbacks,
you can then get the DOM `Element` that the ref is attached to.

## Example

```rust
use web_sys::HtmlInputElement;
use yew::{
    function_component, functional::*, html,
    NodeRef, Html
};

#[function_component(UseRef)]
pub fn ref_hook() -> Html {
    // highlight-next-line
    let input_ref = use_node_ref();
    let value = use_state(|| 25_f64);

    let onclick = {
        let input_ref = input_ref.clone();
        let value = value.clone();
        move |_| {
            // highlight-start
            if let Some(input) = input_ref.cast::<HtmlInputElement>() {
                value.set(*value + input.value_as_number());
            }
            // highlight-end
        }
    };

    html! {
        <div>
    // highlight-next-line
            <input ref={input_ref} type="number" />
            <button {onclick}>{ format!("Add input to {}", *value) }</button>
        </div>
    }
}
```

:::tip Advanced tip

When conditionally rendering elements you can use `NodeRef` in conjunction with `use_effect_with_deps`
to perform actions each time an element is rendered and just before its going to be removed from the
DOM.

:::