Limited number of available hooks - IndexError

[jkrobicki]

Description

When defining too many hooks IndexError: tuple index out of range appears

My code

from idom import html, run, use_state, component, event, vdom, EventHandler
from pathlib import Path
from idom.server.sanic import PerClientStateServer
import json
import requests
from sanic import Sanic
from typing import List


def FlexContainer(*args: html):
    return html.div({"class": "flex w-full"}, args)


@component
def ListPages(current_page, set_current_page, pages: List[str], title: str = ""):
    @event(prevent_default=True)
    def handle_click(event):
        set_current_page(event["target"]["value"])

    anchors = []
    for page in pages:
        anchors.append(
            vdom(
                "button",
                {
                    "href": f"#{page}",
                    "value": page,
                    "onClick": handle_click,
                },
                page,
            )
        )
    return html.div(anchors)


@component
def Sidebar(current_page, set_current_page, pages: List[str], title: str = ""):
    return html.div(
        html.div(
            html.div(
                html.div(
                    html.a(
                        {
                            "href": "#",
                        },
                        title,
                    ),
                ),
                html.nav(
                    ListPages(current_page, set_current_page, pages=pages, title=title),
                ),
            ),
        ),
    )


@component
def users_page():
    a, set_a = use_state("")
    b, set_b = use_state("")
    c, set_c = use_state("")
    d, set_d = use_state("")
    e, set_e = use_state("")
    f, set_f = use_state("")
    g, set_g = use_state("")
    h, set_h = use_state("")
    i, set_i = use_state("")
    return html.div()


@component
def timelogs_page():
    j, set_j = use_state("")
    k, set_k = use_state("")
    l, set_l = use_state("")
    m, set_m = use_state("")
    n, set_n = use_state("")
    o, set_o = use_state("")
    p, set_p = use_state("")

    return html.div()


@component
def page():

    current_page, set_current_page = use_state("Timelogs")
    pages = ["Users", "Timelogs"]

    print("here", current_page)
    if current_page == "Users":
        current_page_component = users_page()
    elif current_page == "Timelogs":
        current_page_component = timelogs_page()
    else:
        current_page_component = html.h1(
            {"class": "text-white"}, "Test Page, not implemented yet"
        )

    return html.div(
        {"class": "flex w-full"},
        Sidebar(current_page, set_current_page, pages=pages, title="Timesheets UI"),
        FlexContainer(current_page_component),
    )


app = Sanic(__name__)
HERE = Path(__file__).parent
app.static("/static", str(HERE / "tailwind/build"))
PerClientStateServer(
    page,
    {
        "redirect_root_to_index": False,
    },
    app,
)


def run():
    app.run(
        host="0.0.0.0",
        port=8002,
        workers=1,
        debug=True,
    )


run()

Details

The error appears when I define too many hooks in users_page component, and set initial state of current page as Timelogs. It's not the case however, when I set the initial state of current page as Users . Same issue appears for timelogs_page component and initial state of current page as Users. I noticed maximum number of available hooks varies, but most often is 4.
Is there some sort of hooks limitation?

[rmorshea]

Ok, I figured it out. This is a bug, but there's a way to work around it which is is to give users_page and timelogs_page unique keys.

...
if current_page == "Users":
    current_page_component = users_page(key="users")
elif current_page == "Timelogs":
    current_page_component = timelogs_page(key="timelogs")
...

[rmorshea]

I think this issue is releated: #652

[jkrobicki]

Thanks, it solves my issue, and it resets the state in between also.

[rmorshea]

I'll be able to make a release with a fix for this early next week.