templates: runtime templates rerender on url change (#1528)

Author: MykolaGolubyev

znai-docs/znai/release-notes/1.90/add-2026-04-24-user-defined-plugins.md

@@ -0,0 +1 @@
+* Fix: [Runtime Templates](layout/runtime-templates) re-renders on url change

znai-docs/znai/release-notes/1.90/fix-2026-05-03-runtime-template-rerender.md

@@ -20,7 +20,7 @@ import React, { useState, useEffect, useMemo } from "react";
 import CliCommandToken from "./CliCommandToken";
 import { splitParts } from "../../utils/strings";
 import { DocElementPayload } from "../default-elements/DocElement";
-import { resolveTemplateText } from "../url-query-value/queryParamTemplate";
+import { resolveTemplateText, useUrlQuerySubscription } from "../url-query-value/queryParamTemplate";
 import "./CliCommand.css";
 
 interface Token {
@@ -53,6 +53,7 @@ const CliCommand: React.FC<CliCommandProps> = ({
   splitAfter = [],
   templateUseQueryParam = false,
 }) => {
+  useUrlQuerySubscription();
   const resolvedCommand = templateUseQueryParam ? resolveTemplateText(command) : command;
   const tokens = useMemo(() => tokenize(resolvedCommand), [resolvedCommand]);
 

znai-reactjs/src/doc-elements/cli/CliCommand.tsx

@@ -35,7 +35,7 @@ import { parseCode } from "./codeParser";
 import { countNumberOfLines } from "../../utils/strings";
 
 import { SnippetBulletExplanations } from "./explanations/SnippetBulletExplanations";
-import { resolveTemplateText } from "../url-query-value/queryParamTemplate";
+import { resolveTemplateText, useUrlQuerySubscription } from "../url-query-value/queryParamTemplate";
 
 import "./Snippet.css";
 
@@ -45,6 +45,7 @@ const BULLETS_COMMENT_TYPE = "inline";
 const REMOVE_COMMENT_TYPE = "remove";
 
 const Snippet = (props) => {
+  useUrlQuerySubscription();
   const snippet = props.templateUseQueryParam ? resolveTemplateText(props.snippet) : props.snippet;
   const tokensToUse = parseCodeWithCompatibility({ lang: props.lang, snippet, tokens: props.tokens });
 

znai-reactjs/src/doc-elements/code-snippets/Snippet.jsx

@@ -16,7 +16,7 @@
 
 import React from "react";
 
-import { resolveQueryParamValue } from "./queryParamTemplate";
+import { resolveQueryParamValue, useUrlQuerySubscription } from "./queryParamTemplate";
 
 import "./UrlQueryValue.css";
 
@@ -26,6 +26,7 @@ interface Props {
 }
 
 export function UrlQueryValue({ queryParam, default: defaultValue }: Props) {
+  useUrlQuerySubscription();
   const resolved = resolveQueryParamValue(queryParam, defaultValue);
 
   if (resolved.isMissing) {

znai-reactjs/src/doc-elements/url-query-value/UrlQueryValue.tsx

@@ -14,8 +14,24 @@
  * limitations under the License.
  */
 
+import { useEffect, useReducer } from "react";
+import { documentationNavigation } from "../../structure/DocumentationNavigation";
+
 const TEMPLATE_PATTERN = /\$\{([^}]+)}/g;
 
+// subscribes the calling component to URL changes so it re-renders when the
+// query string changes — query-param-driven content stays in sync even when
+// an ancestor's shouldComponentUpdate would otherwise skip the re-render.
+// TODO: switch to useSyncExternalStore once React is upgraded to 18+.
+export function useUrlQuerySubscription(): void {
+  const [, forceUpdate] = useReducer((x: number) => x + 1, 0);
+
+  useEffect(() => {
+    documentationNavigation.addUrlChangeListener(forceUpdate);
+    return () => documentationNavigation.removeUrlChangeListener(forceUpdate);
+  }, []);
+}
+
 export function resolveQueryParamValue(
   paramName: string,
   defaultValue?: string