R Tutorial: Reactivity 101

Key Takeaways

one of the most important concepts in SHINee is the concept of reactivity reactivity or reactive programming is a key part what makes SHINee so powerful reactivity is what enables outputs to automatically react to changes in inputs reactivity in SHINee can seem intimidating but at a basic level it means that when the value of a variable X changes then anything that relies on X gets reacts acute 'add this is very different from what you're used to in our consider this code x equals 5 y equals x plus 1 then X gets 10 normally you would say that Y has the value of 6 but if x and y are both reactive variables then Y would actually be 11 because Y would update anytime that exchanges this is a very powerful concept that is very useful for the responsiveness and interactivity of SHINee but it may seem confusing at first only reactive variables behave this way and in SHINee all inputs are automatically reactive that is why you can always use input dollar sign input ID inside render functions and you can be sure that whenever output depends on this input we'll use the most up-to-date value whenever the input changes for example in this code the my plot outputs depends on the Nam input this means that whenever the Nam input changes my plot will react and reevaluate one important thing to remember about reactive variables is that they can only be used inside reactive contexts any render function is a reactive context so you don't need to worry about using reactive values inside render functions if you try accessing your reactive value outside or reactive context you will get an error for example suppose you try to print the value of input dollar sign numb like this SHINee will give you a helpful error message telling you that this cannot be done outside of a reactive context so how would you access a reactive value that's what the observed function is for observe is another reactive context that you use to access a reactive variable this code is the correct way to print the value of an input all we did is wrap the print statement inside an observe function this pattern is actually a very common use of observed think of it is a simple debugging tool to trace the different values of an input note that if you use two reactive values inside observe like in this code then each of these variables becomes a dependency for the observer the entire observe code chunk will get rerun every time any of its dependencies are updated this means that when either num1 or nom to update this whole code will run and both values will get printed you can create your own reactive variables using the reactive function which is another reactive context suppose you wanted to variable X to be one larger than input num you might be tempted to write this code this will result in the same error as before since input num is being accessed outside a reactive context the correct way to define a reactive variable is using the reactive function like this when you want to access a reactive variable that you created with the reactive function you need to add parenthesis to the variable name as if you were calling a function notice how in the observer in this code accessing x requires parentheses but accessing the input does not now that you reviewed the basics of reactivity let's try some exercises