{"guide": {"name": "state-in-blocks", "category": "building-with-blocks", "pretty_category": "Building With Blocks", "guide_index": 3, "absolute_index": 10, "pretty_name": "State In Blocks", "content": "# State in Blocks\n\nWe covered [State in Interfaces](https://gradio.app/interface-state), this guide takes a look at state in Blocks, which works mostly the same.\n\n## Global State\n\nGlobal state in Blocks works the same as in Interface. Any variable created outside a function call is a reference shared between all users.\n\n## Session State\n\nGradio supports session **state**, where data persists across multiple submits within a page session, in Blocks apps as well. To reiterate, session data is _not_ shared between different users of your model. To store data in a session state, you need to do three things:\n\n1. Create a `gr.State()` object. If there is a default value to this stateful object, pass that into the constructor.\n2. In the event listener, put the `State` object as an input and output.\n3. In the event listener function, add the variable to the input parameters and the return value.\n\nLet's take a look at a game of hangman.\n\n```python\nimport gradio as gr\n\nsecret_word = \"gradio\"\n\nwith gr.Blocks() as demo:    \n    used_letters_var = gr.State([])\n    with gr.Row() as row:\n        with gr.Column():\n            input_letter = gr.Textbox(label=\"Enter letter\")\n            btn = gr.Button(\"Guess Letter\")\n        with gr.Column():\n            hangman = gr.Textbox(\n                label=\"Hangman\",\n                value=\"_\"*len(secret_word)\n            )\n            used_letters_box = gr.Textbox(label=\"Used Letters\")\n\n    def guess_letter(letter, used_letters):\n        used_letters.append(letter)\n        answer = \"\".join([\n            (letter if letter in used_letters else \"_\")\n            for letter in secret_word\n        ])\n        return {\n            used_letters_var: used_letters,\n            used_letters_box: \", \".join(used_letters),\n            hangman: answer\n        }\n    btn.click(\n        guess_letter, \n        [input_letter, used_letters_var],\n        [used_letters_var, used_letters_box, hangman]\n        )\ndemo.launch()\n```\n<gradio-app space='gradio/hangman'></gradio-app>\n\nLet's see how we do each of the 3 steps listed above in this game:\n\n1. We store the used letters in `used_letters_var`. In the constructor of `State`, we set the initial value of this to `[]`, an empty list.\n2. In `btn.click()`, we have a reference to `used_letters_var` in both the inputs and outputs.\n3. In `guess_letter`, we pass the value of this `State` to `used_letters`, and then return an updated value of this `State` in the return statement.\n\nWith more complex apps, you will likely have many State variables storing session state in a single Blocks app.\n\nLearn more about `State` in the [docs](https://gradio.app/docs/state).\n", "tags": [], "spaces": [], "url": "/guides/state-in-blocks/", "contributor": null}}