yewstack / yewstack/yew

Hooks do not work inside html!

Open
#2,612 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

A-yew-macro blocked feature-request
Dominant language
Rust
Stars
32.8k
Forks
1.5k
Avg merge
5h 34m
Merged PRs (30d)
2

Description

Problem

The rewriting of function_component breaks when using hooks inside html! (and other macros, but I don't think it's easy to solve it in general).

use yew::prelude::*;

#[function_component(App)]
fn app() -> Html {
    let not_inlined = use_state(|| 42);
    html! {
        <p>
             {*not_inlined} // Working as intended
             {*use_state(|| 42)}
              ^^^^^^^^^^^^^^^^^
              // error[E0614]: type `impl Hook<Output = UseStateHandle<{integer}>>` cannot be dereferenced
        </p>
    }
}

Expected behavior

Inlining an expression into the html! macro (into properties and as text fragment) should work, even when a hook is part of the expression. Currently, hooks used inside html! are not rewritten and lead to hard-to-understand errors (for users, for me it's perfectly clear what's going on under the hood and why one works and the other doesn't). A good implementation takes care to preserve lints for conditionally used hooks, in conditional html.

Screenshots

Environment:

  • Yew version: master

Questionnaire

  • I'm interested in fixing this myself but don't know where to start
  • I would like to fix and I have a solution
  • I don't have time to fix this right now, but maybe later

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing how the function_component rewriting interacts with the html! macro, using the inline use_state example to reproduce the failure. Done means hooks used in html! properties and text fragments are rewritten correctly, while conditional HTML preserves lints for conditionally used hooks.

Written by the indexing model from the issue text.

Assessment

Tech stack
rust
Domain
frontend, web-dev
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.