# How do I make a reactive output component using Blocks?

**URL:** <https://discuss.huggingface.co/t/how-do-i-make-a-reactive-output-component-using-blocks/42779>\
**Category:** 🔒 Gradio\
**Created:** [June 10, 2023, 4:46pm UTC](https://discuss.huggingface.co/t/how-do-i-make-a-reactive-output-component-using-blocks/42779 "2023-06-10T16:46:12Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![offchan](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/offchan/32/21567_2.png) [@offchan](https://discuss.huggingface.co/u/offchan)\
**Post date:** [June 10, 2023, 4:46pm UTC](https://discuss.huggingface.co/t/how-do-i-make-a-reactive-output-component-using-blocks/42779/1 "2023-06-10T16:46:12Z")

</div>

Basically I just want to replicate following code using gr.Blocks(), how do I do it?

```py
import gradio as gr

def calculator(num1, operation, num2):
    if operation == "add":
        return num1 + num2
    elif operation == "subtract":
        return num1 - num2
    elif operation == "multiply":
        return num1 * num2
    elif operation == "divide":
        return num1 / num2

demo = gr.Interface(
    calculator,
    [
        "number",
        gr.Radio(["add", "subtract", "multiply", "divide"]),
        "number"
    ],
    "number",
    live=True,
)
demo.launch()

```

The code is from [Reactive Interfaces](https://gradio.app/reactive-interfaces/#live-interfaces)

It automatically updates the output component when any of the input component changes.  
AFAIK, if I want to replicate this behavior using Blocks, I’ll have to call `.change()` method on every input component. Is there a way to do it without calling .change() eagerly on every input?

I’m mostly looking for the ability to store the output into `gr.State()` lazily so that the state can be read by other events.  
Let’s say the output box only updates the display once a second, then you don’t need to eagerly update the state all the time. You only need to update the state every second.