From 0.19.0 to 0.20.0

_as_body variant of start_app is removed

This method of controlling body has caused issues in event registration and SSR hydration. They have been removed. Read more in the github issue.

New Hooks and Function Components API

The Function Components and Hooks API are re-implemented with a different mechanism:

• User-defined hooks are now required to have a prefix use_ and must be marked with the #[hook] attribute.
• Hooks will now report compile errors if they are not called from the top level of a function component or a user defined hook. The limitation existed in the previous version of Yew as well. In this version, It is reported as a compile time error.

Automatic Message Batching

The scheduler now shedules its start to the end of the browser event loop. All messages queued during in the meantime will be run in batch. The running order of messages between components are no longer guaranteed, but messages sent to the same component is still acknowledged in an FIFO order. If multiple updates will result in a render, the component will be rendered once.

What this means to developers?

For struct components, this means that if you send 2 messages to 2 different components, they will not be guaranteed to be seen in the same order they are sent. If you send 2 messages to the same component, they will still be passed to the component in the order they are sent. The messages are not sent to the component immediately so you should not assume that when the component receives a message it still has the same state at the time the message is created.

For function components, if you store states with use_state(_eq) and the new value of that state depends on the previous value, you may want to switch to use_reducer(_eq). The new value of the state will not be visible / acknowledged until the next time the component is rendered. The reducer action works similar to messages for struct components and will be sent to the reducer function in the same order as they are dispatched. The reducer function can see all previous changes at the time they are run.

Yew Renderer

start_app* has been replaced by yew::Renderer.

You need to enable feature csr to use yew::Renderer.

For example, to use client side rendering to render a typical app component:

yew::Renderer::<App>::new().render();

For more options, see the docs.

ref prop for Components

Components no longer have a ref prop. Trying to add a node ref to a component will result in a compile error

Previously node ref passed to a component was bound to the first element rendered by it. If this behavior is still desired, it is recommended to use add a r#ref field to the component’s properties and bind it manually

changed Method on Components

The method fn changed() has now a new argument to provide the old properties to the function.

The old method’s signature was:

fn changed(&mut self, ctx: &Context<Self>) -> bool

The new method’s signature is now:

fn changed(&mut self, ctx: &Context<Self>, old_props: &Self::Properties) -> bool

This can be adjusted automatically in your code using this bash script (save your code before running this!):

perl -p -i -e  's/fn changed\(&mut self, (\w+): &Context<Self>\)/fn changed(&mut self, $1: &Context<Self>, _old_props: &Self::Properties)/g' $(find . -name \*.rs)