Module functional

Expand description

Function components are a simplified version of normal components. They consist of a single function annotated with the attribute #[function_component] that receives props and determines what should be rendered by returning Html.

Functions with the attribute have to return Html and may take a single parameter for the type of props the component should accept. The parameter type needs to be a reference to a Properties type (ex. props: &MyProps). If the function doesn’t have any parameters the resulting component doesn’t accept any props.

Just mark the component with the attribute. The component will be named after the function.

#[function_component]
fn HelloWorld() -> Html {
    html! { "Hello world" }
}

More details about function components and Hooks can be found on Yew Docs

Macros§

use_prepared_state: Use a state prepared on the server side and its value is sent to the client side during hydration.
use_transitive_state: Use a state created as an artifact of the server-side rendering.

Structs§

HookContext: A hook context to be passed to hooks.
UseForceUpdateHandle: A handle which can be used to force a re-render of the associated function component.
UseReducerDispatcher: Dispatcher handle for use_reducer and use_reducer_eq hook
UseReducerHandle: State handle for use_reducer and use_reducer_eq hook
UseStateHandle: State handle for the use_state hook.
UseStateSetter: Setter handle for use_state and use_state_eq hook

Traits§

FunctionProvider: Trait that allows a struct to act as Function Component.
Hook: A trait that is implemented on hooks.
Reducible: A trait that implements a reducer function of a type.
TearDown: Trait describing the destructor of use_effect hook.

Functions§

use_callback: Get a immutable reference to a memoized Callback. Its state persists across renders. It will be recreated only if any of the dependencies changes value.
use_context: Hook for consuming context values in function components. The context of the type passed as T is returned. If there is no such context in scope, None is returned. A component which calls use_context will re-render when the data of the context changes.
use_effect: use_effect is used for hooking into the component’s lifecycle and creating side effects.
use_effect_with: This hook is similar to use_effect but it accepts dependencies.
use_force_update: This hook is used to manually force a function component to re-render.
use_memo: Get a immutable reference to a memoized value.
use_mut_ref: This hook is used for obtaining a mutable reference to a stateful value. Its state persists across renders.
use_node_ref: This hook is used for obtaining a NodeRef. It persists across renders.
use_reducer: This hook is an alternative to use_state. It is used to handle component’s state and is used when complex actions needs to be performed on said state.
use_reducer_eq: use_reducer but only re-renders when prev_state != next_state.
use_ref: This hook is used for obtaining a reference to a stateful value. Its state persists across renders.
use_state: This hook is used to manage state in a function component.
use_state_eq: use_state but only re-renders when prev_state != next_state.

Attribute Macros§