Reactive Web Dashboards with Shiny Transcripts
Chapter: Reactive effects and events
Lecture: Reactive effect
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Okay, so we've learned a lot about reactivity and we kind of understand roughly how reactivity works
0:06
in Shiny. You might, as you start developing Shiny applications, realize that there are some
0:11
interactions that are really, really hard to capture in a reactive framework. So let's go
0:17
through one of those interactions and see, you know, just how maybe reactivity is not giving us
0:21
everything that we need. So this is an example of a modal. So this is a feature of Shiny where you
0:27
can click a button and have this important message or some other thing pop up and let the user
0:32
interact with it. And when you sort of think about this interaction, it's a little bit hard to figure
0:37
out how it fits in a reactive framework. I'm sure we could do it with some work, thinking about
0:42
storing some reactive variables or something, but this is a little bit different than a lot of the
0:48
other interactions we've been dealing with because we're really triggering a side effect, right? So
0:52
when we click this button, it's triggering this side effect of this message popping up. And we
0:56
click this button, there's a side effect where it's going away. And these types of side effect
1:02
interactions are a lot easier to deal with using event handling. And event handling is a little
1:08
different from reactive programming where instead of defining the relationships between things and
1:14
letting Shiny figure out when to implement them, we actually want to tell Shiny what to do when
1:19
this happens, right? We want to capture this particular event and handle it somehow. That's
1:24
why it's called event handling. So in Shiny, those event handlers are called reactive effects.
1:29
And down here at the bottom, you can kind of see this reactive effect and reactive event decorator.
1:35
That's what makes it sort of escape the traditional reactive framework and instead let you do
1:41
something specific when that particular action happens. So let's go through an example of that.
1:49
The example I'm going to use here is I want to let the user update the label of this species
1:55
checkbox. So this is a little bit of a synthetic example. Probably you wouldn't really want to do
1:59
it, but it's illustrative of the type of pattern that you're going to use to do some of these
2:03
interactions. So I need a text box and I need a button to let them enter a new label and to click
2:10
the button to change that text box. So we know how to do that. So I'll use input text, new label,
2:17
and then I'll also add a UI input button for update. I save that. It'll rerun and now we have
2:24
this space where somebody can add some text and click this update button to do something with it.
2:31
Right now this isn't connected. It's not doing anything. So we're going to add a reactive
2:36
effect. This again, just like reactive calculations, can go anywhere. So we're going to call this
2:42
update label. And for now I'm just going to click say pass, ignore the copilot.
2:49
So there are two things we need to use as decorators. So one is a reactive effect decorator.
2:56
This just says that this is a function that is triggering a side effect. And then we're going to
3:01
do reactive event and specify the trigger of that reactive event, which is this update trigger. This
3:08
reactive event is exactly the same as we used for controlling reactivity in the last session. So
3:15
reactive event is a generic thing. It can go under any reactive decorator, reactive effect, render,
3:21
any of the render decorators, or reactive calculations. And it'll just trigger this
3:26
function when this input is passed. So here I'm going to use something called the update functions
3:33
so we can update checkbox group. And this takes the speed, the ID. So this is the same ID that
3:42
we are specifying down here when we're defining the checkbox group. And you can pass any argument
3:47
that you would normally pass to the function that creates the input to the update method.
3:54
So we're going to say label, and then we're going to say that's going to be input new label.
4:01
So what this is going to do is whenever I click this button, it's going to update the label of
4:06
that input to be the label that I've typed. So I enter that and I click update, and you see that's
4:15
going to change. There's one other thing probably we want to do here. We probably want to clear this
4:19
text input at the same time. And we can do that the same way that we did with the label by having a
4:28
UI update text input text and call that new label. And the value is just blank.
4:38
So now when I type my species or whatever, it's both going to update that label and also clear
4:49
the new label text input. One of the most common problems that I see when people are starting to
4:55
develop in Shiny, especially if you have experience in another web application framework,
5:01
is that you use reactive effect too often. So some other frameworks, event handling is the only way
5:06
that you can build interaction with your application. So it's often the first thing that
5:10
people go to. But with Shiny, you want to do the opposite. You want to start with reactivity,
5:14
start with the declarative framework where you're just telling Shiny what to do and letting Shiny
5:18
figure out when to do it, and only use reactive effect in particular circumstances. And those
5:23
circumstances are when you want to handle side effects. So some examples of that is anytime you're
5:28
posting to an API or downloading a file or making some specific change to your application in
5:35
response to user actions, you usually want to reach for reactive effect. Everything else,
5:39
you should try to use the traditional reactivity pattern. This will result both in you doing less
5:44
work because there's fewer things that you need to worry about, but also in your application being
5:47
more efficient. For the most part, Shiny will do a really good job of rendering your application
5:51
and adding in a bunch of reactive effects where you're handling particular things will often just
5:59
kind of get in the way of that execution. So it's for things like this where you want to update a
6:03
UI element or handle a button click or something like that. That's where the case is where reactive effect is really helpful.