[Bug]: Element from routes inside a DataBrowserRouter not reacting to changes (state, hot reload)

[diogomartino]

What version of React Router are you using?

6.4.0-pre.14

Steps to Reproduce

1. Use DataBrowserRouter
2. Add a Route with something that is not a component, like div, h1, etc. as an element.
3. Change the content of the element by literally editing the file or adding some kind of state to it.

Reproduce it here

Expected Behavior

The element should rerender on a hot reload or on a state change...?

Actually I'm not sure if this is the expected behaviour or not, I can't find any mentions to it in the docs that says this will happen when using this kind of router.

Actual Behavior

Element does not rerender.

[brophdawg11]

This is expected behavior, but it's a bit unintuitive. We're actively looking into some slight API changes to make this more explicit.

The underlying issue is that at the moment, the route tree known to the underlying @remix-run/router is static and built once at app initialization (there's a singleton router instance internally which helps us avoid issues with concurrent mode). It has to know about the tree ahead of time so it can fetch before rendering. This means that the value of count is evaluated only then - and we don't re-create the element on subsequent state updates.

For now, I would avoid referencing state in element and would instead use a context to provide the state to the tree. And keep an eye out for a new prerelease which may make this behavior more explicit!