Nested reactOutput elements possible?

[zilch42]

I'm trying to use the react interface for some UI elements which requires creating them in the server and using reactOutput in the UI. A very simple example of that works, but as soon as I try to call one module from inside another, it doesn't work. I'm not sure if this is a namespace issue with the way I am using modules or if this is an issue with nesting shiny.react stuff.

This works:

library(shiny)
library(shiny.fluent)

# SLIDER MODULE--------------------
mod_slider_ui <- function(id){
  ns <- NS(id)
  tagList(reactOutput(ns("slider")))
}

mod_slider_server <- function(id){
  moduleServer( id, function(input, output, session){
    ns <- session$ns
    
    # create reactive slider UI
    output$slider <- renderReact({
      shiny.fluent::Slider(ranged = TRUE)
    })
  })
}

# SHINY APP--------------------
shinyApp(
  ui = fluidPage(mod_slider_ui("x")),
  server = function(input, output, session) {
    mod_slider_server("x")
  }
)

But the following doesn't, trying to put the slider inside a Panel, which is also rendered on the server side.

library(shiny)
library(shiny.fluent)

# SLIDER MODULE--------------------
mod_slider_ui <- function(id){
  ns <- NS(id)
  tagList(reactOutput(ns("slider")))
}

mod_slider_server <- function(id){
  moduleServer( id, function(input, output, session){
    ns <- session$ns
    
    # create reactive slider UI
    output$slider <- renderReact({
      shiny.fluent::Slider(ranged = TRUE)
    })
  })
}


# PAGE MODULE--------------------
control_bar_ui <- function(id){
  ns <- NS(id)
  tagList(reactOutput(ns("controlPanel")))
}

control_bar_server <- function(id){
  moduleServer( id, function(input, output, session){
    ns <- session$ns
    
    # slider server
    mod_slider_server("x")
    
    # UI for control bar
    output$controlPanel <- renderReact({
      Panel(
        headerText = "Filters",
        isOpen = TRUE,
        mod_slider_ui(ns("x"))
      )
    })
  })
}

# SHINY APP--------------------
shinyApp(
  ui = fluidPage(control_bar_ui("y")),
  server = function(input, output, session) {
    control_bar_server("y")
})

I've tried every combination of calling ns("id") on different things, putting mod_slider_server in different places, et cetera that I can think of. Is this possible to do?

[kamilzyla]

Hi @zilch42, thanks for your question! The problem is due to Appsilon/shiny.react#21 - nested React outputs don't work currently. As a workaround, you can change your slider module to use uiOutput() and renderUI() - it should work.

[zilch42]

Thanks @kamilzyla that works. Out of interest, is anything lost by using renderUI() instead of renderReact()? Are there instances where that would not be a good workaround when using shiny.react?

[kamilzyla]

The reactOutput() paired with renderReact() preserve component state between renders - see here for additional explanation and example. It might be also necessary for component animations to work - e.g. when setting the progress on a progress bar, you might get a smooth transition with reactOutpu() but a jerky one with uiOutput().