mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
cd5b8a520c
* Read through the docs and correct spelling and grammar * Run prettier * Apply review suggestions Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com> * adjust translation messages Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com>
127 lines
3.0 KiB
Plaintext
127 lines
3.0 KiB
Plaintext
---
|
|
title: 'use_effect'
|
|
---
|
|
|
|
`use_effect` is used for hooking into the component's lifecycle and creating side-effects.
|
|
|
|
It takes a function which is called every time after the component's render has finished.
|
|
|
|
The input function has to return a closure - a cleanup function, which is called right
|
|
before starting a new render or when the component unmounts.
|
|
|
|
## Example
|
|
|
|
```rust
|
|
use yew::{Callback, function_component, html, use_effect, use_state, Html};
|
|
|
|
#[function_component]
|
|
fn EffectExample() -> Html {
|
|
let counter = use_state(|| 0);
|
|
|
|
{
|
|
let counter = counter.clone();
|
|
use_effect(move || {
|
|
// Make a call to DOM API after component is rendered
|
|
gloo::utils::document().set_title(&format!("You clicked {} times", *counter));
|
|
|
|
// Perform the cleanup
|
|
|| gloo::utils::document().set_title("You clicked 0 times")
|
|
});
|
|
}
|
|
let onclick = {
|
|
let counter = counter.clone();
|
|
Callback::from(move |_| counter.set(*counter + 1))
|
|
};
|
|
|
|
html! {
|
|
<button {onclick}>{ format!("Increment to {}", *counter) }</button>
|
|
}
|
|
}
|
|
```
|
|
|
|
## `use_effect_with_deps`
|
|
|
|
`use_effect_with_deps` is a more enhanced version of [`use_effect`](#use_effect).
|
|
|
|
It takes a second argument - dependencies. The effect is only executed - and the
|
|
old effect cleaned up - when the dependencies change compared to the previous call.
|
|
|
|
:::note
|
|
|
|
`dependencies` must implement `PartialEq`.
|
|
|
|
:::
|
|
|
|
```rust
|
|
use yew::{function_component, html, Html, Properties, use_effect_with_deps};
|
|
|
|
#[derive(Properties, PartialEq)]
|
|
pub struct Props {
|
|
pub is_loading: bool,
|
|
}
|
|
|
|
#[function_component]
|
|
fn HelloWorld(props: &Props) -> Html {
|
|
let is_loading = props.is_loading.clone();
|
|
|
|
use_effect_with_deps(
|
|
move |_| {
|
|
web_sys::console::log_1(&" Is loading prop changed!".into());
|
|
|| ()
|
|
},
|
|
// highlight-next-line
|
|
is_loading,
|
|
);
|
|
|
|
html! { <>{"Am I loading? - "}{is_loading}</> }
|
|
}
|
|
```
|
|
|
|
## Tips
|
|
|
|
### Only on first render {#only-on-first-render}
|
|
|
|
Provide a empty tuple `()` as dependencies when you need to do something only on the first render
|
|
of a component.
|
|
|
|
```rust
|
|
use yew::{function_component, html, Html, use_effect_with_deps};
|
|
|
|
#[function_component]
|
|
fn HelloWorld() -> Html {
|
|
|
|
use_effect_with_deps(
|
|
move |_| {
|
|
web_sys::console::log_1(&"I got rendered, yay!".into());
|
|
|| ()
|
|
},
|
|
// highlight-next-line
|
|
(),
|
|
);
|
|
|
|
html! { "Hello" }
|
|
}
|
|
```
|
|
|
|
### On destructing or last render
|
|
|
|
Use [Only on first render](#only-on-first-render) but put the code in the cleanup function.
|
|
It will only get called when the component is removed from view / gets destroyed.
|
|
|
|
```rust
|
|
use yew::{function_component, html, Html, use_effect_with_deps};
|
|
|
|
#[function_component]
|
|
fn HelloWorld() -> Html {
|
|
use_effect_with_deps(
|
|
move |_| {
|
|
|| {
|
|
web_sys::console::log_1(&"Noo dont kill me, ahhh!".into());
|
|
}
|
|
},
|
|
(),
|
|
);
|
|
html! { "Hello" }
|
|
}
|
|
```
|