diff --git a/.changeset/lemon-planets-kiss.md b/.changeset/lemon-planets-kiss.md
new file mode 100644
index 000000000000..5264b6cb8925
--- /dev/null
+++ b/.changeset/lemon-planets-kiss.md
@@ -0,0 +1,5 @@
+---
+"gradio": patch
+---
+
+fix:add test + demo
diff --git a/demo/sub_block_render/cheetah.jpg b/demo/sub_block_render/cheetah.jpg
new file mode 100644
index 000000000000..d1fde62d026a
Binary files /dev/null and b/demo/sub_block_render/cheetah.jpg differ
diff --git a/demo/sub_block_render/frog.jpg b/demo/sub_block_render/frog.jpg
new file mode 100644
index 000000000000..031b404f0d8f
Binary files /dev/null and b/demo/sub_block_render/frog.jpg differ
diff --git a/demo/sub_block_render/run.ipynb b/demo/sub_block_render/run.ipynb
new file mode 100644
index 000000000000..fa9c85503fb6
--- /dev/null
+++ b/demo/sub_block_render/run.ipynb
@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: sub_block_render"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/sub_block_render/cheetah.jpg\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/sub_block_render/frog.jpg"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "from pathlib import Path\n", "\n", "from PIL import Image\n", "\n", "\n", "root = Path(os.path.abspath(''))\n", "\n", "\n", "def infer(\n", "    text,\n", "    guidance_scale,\n", "):\n", "\n", "    img = (\n", "        Image.open(root / \"cheetah.jpg\")\n", "        if text == \"Cheetah\"\n", "        else Image.open(root / \"frog.jpg\")\n", "    )\n", "    img = img.resize((224, 224))\n", "\n", "    return ([img, img, img, img], \"image\")\n", "\n", "\n", "block = gr.Blocks()\n", "\n", "examples = [\n", "    [\"A serious capybara at work, wearing a suit\", 7],\n", "    [\"A Squirtle fine dining with a view to the London Eye\", 7],\n", "    [\"A tamale food cart in front of a Japanese Castle\", 7],\n", "    [\"a graffiti of a robot serving meals to people\", 7],\n", "    [\"a beautiful cabin in Attersee, Austria, 3d animation style\", 7],\n", "]\n", "\n", "\n", "with block as demo:\n", "    with gr.Row(elem_id=\"prompt-container\", equal_height=True):\n", "        text = gr.Textbox(\n", "            label=\"Enter your prompt\",\n", "            show_label=False,\n", "            max_lines=1,\n", "            placeholder=\"Enter your prompt\",\n", "            elem_id=\"prompt-text-input\",\n", "        )\n", "\n", "    gallery = gr.Gallery(\n", "        label=\"Generated images\", show_label=False, elem_id=\"gallery\", rows=2, columns=2\n", "    )\n", "    out_txt = gr.Textbox(\n", "        label=\"Prompt\",\n", "        placeholder=\"Enter a prompt to generate an image\",\n", "        lines=3,\n", "        elem_id=\"prompt-text-input\",\n", "    )\n", "\n", "    guidance_scale = gr.Slider(\n", "        label=\"Guidance Scale\", minimum=0, maximum=50, value=7.5, step=0.1\n", "    )\n", "\n", "    ex = gr.Examples(\n", "        examples=examples,\n", "        fn=infer,\n", "        inputs=[text, guidance_scale],\n", "        outputs=[gallery, out_txt],\n", "        cache_examples=True,\n", "    )\n", "\n", "    text.submit(\n", "        infer,\n", "        inputs=[text, guidance_scale],\n", "        outputs=[gallery, out_txt],\n", "        concurrency_id=\"infer\",\n", "        concurrency_limit=8,\n", "    )\n", "\n", "with gr.Blocks() as demo:\n", "    block.render()\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.queue(max_size=10, api_open=False).launch(show_api=False)\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/sub_block_render/run.py b/demo/sub_block_render/run.py
new file mode 100644
index 000000000000..d216219f7675
--- /dev/null
+++ b/demo/sub_block_render/run.py
@@ -0,0 +1,82 @@
+import gradio as gr
+import os
+from pathlib import Path
+
+from PIL import Image
+
+
+root = Path(os.path.dirname(__file__))
+
+
+def infer(
+    text,
+    guidance_scale,
+):
+
+    img = (
+        Image.open(root / "cheetah.jpg")
+        if text == "Cheetah"
+        else Image.open(root / "frog.jpg")
+    )
+    img = img.resize((224, 224))
+
+    return ([img, img, img, img], "image")
+
+
+block = gr.Blocks()
+
+examples = [
+    ["A serious capybara at work, wearing a suit", 7],
+    ["A Squirtle fine dining with a view to the London Eye", 7],
+    ["A tamale food cart in front of a Japanese Castle", 7],
+    ["a graffiti of a robot serving meals to people", 7],
+    ["a beautiful cabin in Attersee, Austria, 3d animation style", 7],
+]
+
+
+with block as demo:
+    with gr.Row(elem_id="prompt-container", equal_height=True):
+        text = gr.Textbox(
+            label="Enter your prompt",
+            show_label=False,
+            max_lines=1,
+            placeholder="Enter your prompt",
+            elem_id="prompt-text-input",
+        )
+
+    gallery = gr.Gallery(
+        label="Generated images", show_label=False, elem_id="gallery", rows=2, columns=2
+    )
+    out_txt = gr.Textbox(
+        label="Prompt",
+        placeholder="Enter a prompt to generate an image",
+        lines=3,
+        elem_id="prompt-text-input",
+    )
+
+    guidance_scale = gr.Slider(
+        label="Guidance Scale", minimum=0, maximum=50, value=7.5, step=0.1
+    )
+
+    ex = gr.Examples(
+        examples=examples,
+        fn=infer,
+        inputs=[text, guidance_scale],
+        outputs=[gallery, out_txt],
+        cache_examples=True,
+    )
+
+    text.submit(
+        infer,
+        inputs=[text, guidance_scale],
+        outputs=[gallery, out_txt],
+        concurrency_id="infer",
+        concurrency_limit=8,
+    )
+
+with gr.Blocks() as demo:
+    block.render()
+
+
+if __name__ == "__main__":
+    demo.queue(max_size=10, api_open=False).launch(show_api=False)
diff --git a/gradio/blocks.py b/gradio/blocks.py
index b62a45b89047..b64a4a224afb 100644
--- a/gradio/blocks.py
+++ b/gradio/blocks.py
@@ -1352,7 +1352,7 @@ def render(self):
                     )
 
             root_context.blocks.update(self.blocks)
-            dependency_offset = len(root_context.fns)
+            dependency_offset = max(root_context.fns.keys(), default=-1) + 1
             existing_api_names = [
                 dep.api_name
                 for dep in root_context.fns.values()
@@ -1379,8 +1379,8 @@ def render(self):
                         root_context.fns[i].get_config() for i in dependency.cancels
                     ]
                     dependency.cancels = get_cancelled_fn_indices(updated_cancels)
-                root_context.fns[root_context.fn_id] = dependency
-                root_context.fn_id += 1
+                root_context.fns[dependency._id] = dependency
+            root_context.fn_id = max(root_context.fns.keys(), default=-1) + 1
             Context.root_block.temp_file_sets.extend(self.temp_file_sets)
             Context.root_block.proxy_urls.update(self.proxy_urls)
 
diff --git a/js/app/test/sub_block_render.spec.ts b/js/app/test/sub_block_render.spec.ts
new file mode 100644
index 000000000000..f51f52356be1
--- /dev/null
+++ b/js/app/test/sub_block_render.spec.ts
@@ -0,0 +1,14 @@
+import { test, expect } from "@gradio/tootils";
+
+test("submit works", async ({ page }) => {
+	await page.getByTestId("textbox").first().focus();
+	await page.keyboard.press("Enter");
+
+	await expect(page.getByLabel("Prompt", { exact: true })).toHaveValue("image");
+});
+
+test("examples work", async ({ page }) => {
+	await page.getByText("A serious capybara at work, wearing a suit").click();
+
+	await expect(page.getByLabel("Prompt", { exact: true })).toHaveValue("image");
+});