Recursive components

[romain-bury]

Following a chat with @masenf on Discord, this thread aims to discuss how a recursive component can be implemented in reflex.

The idea would be to make the following code runnable (while today, it throws the following error "RecursionError: maximum recursion depth exceeded while calling a Python object")

import random
from typing import Optional
import reflex as rx


class Node(rx.Base):
    l: Optional["Node"]
    r: Optional["Node"]
    data: int


def add_node(tree: Node, value: int) -> Node:
    if tree is None:
        return Node(data=value)
    if value < tree.data:
        tree.l = add_node(tree.l, value)
    else:
        tree.r = add_node(tree.r, value)
    return tree


def print_node(n: Node, label: str = "Root"):
    print(f"{label} Data: {n.data}")
    if n.l:
        print_node(n.l, "L")
    if n.r:
        print_node(n.r, "R")


def render_node(n: Node, label: str = "Root") -> rx.Component:
    return rx.card(
        rx.vstack(
            rx.text(label),
            rx.text(f"Data: {n.data}"),
            rx.hstack(
                rx.cond(
                    n.l,
                    render_node(n.l, "Left"),
                ),
                rx.cond(
                    n.r,
                    render_node(n.r, "Right"),
                ),
            ),
        )
    )


class State(rx.State):
    """The app state."""
    b_tree = Node(data=50)

    def build_tree(self):
        for _ in range(10):
            add_node(self.b_tree, random.randint(0, 100))
        print_node(self.b_tree)


def index() -> rx.Component:
    return rx.center(
        # Maximum recursion depth 😭
        # rx.vstack(
        #     render_node(State.b_tree),
        # ),
        height="100vh",
    )


app = rx.App()
app.add_page(index, on_load=State.build_tree)

For future references, below is the initial thread / discussion on github.

masenf — Hier à 21:09
yeah i would guess the generated javascript code gets insanely large and nested; i don't think that's a sustainable solution, but sort of points toward a better solution.

i don't think we get out of this without defining an anonymous js function under the covers kind of like a cond, but with special syntax for recursive calling
Arkhonx — Aujourd’hui à 12:47
yes indeed, the generated index.js file has 33k+ lines
I can see that react supports recursive components, so the idea would be to find a i) syntax allowing to define recursive components in reflex and ii) a way to compile that into a recursive react component ?
Arkhonx — Aujourd’hui à 13:00
from my understanding of compilation, currently when you define a function that return a rx.component (such as the render_node function above), it's not compiled into a new react component by reflex, but rather its content (which are reflex function corresponding to react components) are directly rendered into the corresponding react component in the corresponding routing page. So if I were to call this function twice in two different routes, its content & corresponding react children would be fully compiled / rendered twice ?
(not sure if that's clear)
In any case, that would mean that we would have to find a way (for a instance a function decorator?) that would allow users to tell reflex that this function need to be compiled into a component, and that calls that function in any route / page should not render children components, but rather make reference to that component?
And in addition, to add recursion, that would mean that we have to find a way, within the python function to make a call to the newly defined react component, along with the relevant variables. This could be like a function that get compiled into a call to a component based on its name & params directly?
Just trying to understand the complexity of the task to evaluate whether I can be of help or not on this
for better follow-up, probably we can switch the discussion to github?
masenf — Aujourd’hui à 16:35
We do have a mechanism that automatically memoizes components to their own individual react components... but it does not handle props currently, so recursion is hard.

Let's go to gh discussions and we can brainstorm and design a solution over there

Following on that, can you point me where the memoization happens in the current code, so that i can see how it works? How difficult you think it would be to allow that mechanism to handle props?