Parent to child communication

As stated in the Components page, Properties are used to communicate from a parent to a child component.

Derive macro

Don't try to implement Properties yourself, derive it by using #[derive(Properties)] instead.

Required attribute

The fields within a struct that implements Properties are required by default. When the field is missing and the component is created in the html! macro, a compiler error is returned. For fields with optional properties, use #[prop_or_default] to use the default value for that type. To specify a value, use #[prop_or_else(value)] where value is the default value for the property. For example, to default a boolean value as true, use the attribute #[prop_or_else(true)]. It is common for optional properties to use Option which defaults to None.


It often makes sense to derive PartialEq on your props if you can. This makes it much easier to avoid rerendering using a trick explained in the Optimizations & Best Practices section.

Memory/Speed overhead of Properties

Remember the component's view function signature:

fn view(&self) -> Html

You take a reference of the component's state, and use that to create Html. But properties are owned values. This means that in order to create them and pass them to child components, we need to get ownership of the references provided in the view function. This is done by implicitly cloning the references as they are passed to components in order to get owned values that constitute their props.

This means that each component has its own distinct copy of state passed down from its parent, and that whenever you re-render a component, the props for all child components of the re-rendering component will have to be cloned.

The implication of this is if you would otherwise be passing huge amounts of data down as props (Strings that are 10s of kilobytes in size), you may want to consider turning your child component into a Html-returning function that runs in the parent, as you aren't forced to clone your data.

Alternatively, if you won't need to alter the large data that is passed as props, and only will display it, you can wrap it in an Rc so that only a ref-counted pointer is cloned, instead of the data itself.


pub struct LinkColor {
impl Default for LinkColor {
fn default() -> Self {
// The link color will be Blue unless otherwise specified.
#[derive(Properties, PartialEq)]
pub struct LinkProps {
/// The link must have a target.
href: String,
/// If the link text is huge, this will make copying the string much cheaper.
/// This isn't usually recommended unless performance is a problem.
text: Rc<String>,
/// Color of the link.
color: LinkColor,
/// The view function will not specify a size if this is None.
size: Option<u32>
/// When the view function doesn't specify active, it defaults to true.
active: bool,