Nested context does not update value if outer context should not render

[Archmonger]

Current Situation

ReactJS appears to support nested context.

However, in IDOM situations like the following simply don't render...

    return ModalStateContext(
        HomepageStateContext(
            navbar(),
            modal(),
            sidebar(),
            viewport_loading_animation(),
            viewport(),
            backdrop(),
            value=home_state,
        ),
        value=modal_state,
    )

Proposed Actions

Modify the ContextProvider to support nested contexts.

[rmorshea]

I'm unable to reproduce - this test passes. Can you provide sample code I can use to test this?

[Archmonger]

EDIT: Wrong issue. This comment can be ignored.

I can attempt to generate an example tomorrow.

I think it's about nested contexts on conditionally rendered components. When the conditionally rendered component is gone, seems to break use_context.

[rmorshea]

My suspicion here is that this logic is wrong. After reading a bit, context providers don't actually stop descendants that do not use_context from rendering. That is, should_render ought to always return True. Given that, this ability to skip a render seems like a remnant of React's class-based components I might actually remove this method entirely.

[rmorshea]

This fact, that presently in IDOM the descendants of a context (except those that use_context) skip a render if the context's value did not change, may be what you're observing.

[Archmonger]

We might want to develop memo components before removing the should_render value.

Also it's worth double checking that the one commenter on stackoverflow is telling the truth.

[rmorshea]

In ReactJS, useMemo was intended to be a replacement for shouldComponentUpdate (the analog to should_render).

[Archmonger]

I think the issue I'm seeing might be set_state getting mangled if it's a dataclass(frozen=True) attribute within a nested context...

Still trying to dig a bit deeper and confirm this.

The issues seem fairly random though, sometimes calling set_state in this situation causes assert parent is not None, "detached model state" to occur, and other times simply nothing occurs.

[Archmonger]

I've committed an example of problematic nested contexts.

It seems like calling set_state (that is contained within an object in a sub-context) will not send an event onto the layout render queue.

Issue can be detected by creating several app store subcategories, and then clicking through them. Also, if you click on the "details" button on any card (triggers a re-render of the page), then all children within my sub-context go poof.

This issue can be replicated by pulling down Archmonger/Conreq@f21ea6e

[Archmonger]

Maybe there's an additional layer to consider with conditionally rendered components. I wasn't able to reproduce using this example

from typing import Callable
from idom import component, hooks, html, run
from dataclasses import dataclass
from flask import Flask

@dataclass
class State:
    value: int = 0
    set_value: Callable = lambda x: None


@dataclass
class RootState:
    doesnt_matter: int = 0


RootContext = hooks.create_context(RootState())
SubContext = hooks.create_context(State())


@component
def root():
    return RootContext(child(), value=RootState(123))


@component
def child():
    state, set_state = hooks.use_state(State(value=456))
    state.set_value = set_state

    print("`state.value` value should start as 456 change to 666 when clicked: ", state)

    return SubContext(
        str(state),
        html.button(
            {"onClick": lambda x: set_state(State(value=666))},
            "Click Me",
        ),
        value=state,
    )


run(root)

[rmorshea]

I think we can remove the should_render method entirely. It seems like a vestige from old class-based components.

[Archmonger]

There is somehow still some lingering issues with this fix.

Do you have time this weekend for me to demo?

[rmorshea]

Sure. Sat or mid-day Sun work

[Archmonger]

Spoke too soon. It was an issue on my end.