Extend Patch append perf fix to nested and non-tail locations

The O(appended) append fast-path only recognized appends at the top level
of a patched property, so a nested `p[0]['props']['children'].extend(...)`
fell back to the O(total-children) re-hydrate + path-table rebuild on every
click - the exact slowdown the top-level fix removed (reported in review of
#3948). Appending 250 nodes into a growing nested container went from a flat
~0.2s back up to ~8.6s at 3000 children.

- patchAnalysis: `tailAppends` now records `{location, count}` instead of a
  bare count, so an append to a single nested list stays eligible. Appends to
  two different lists, or any reorder/insert/delete, still disqualify it.
- executedCallbacks: the incremental path-table update targets
  `oldChildrenPath + location` and slices the nested array. Gated to the plain
  property value (not a dotted `figure.data` sub-path).
- DashWrapper: the item-by-item ref-skip now runs during a fresh, non-remount
  render too, not only a settled reconcile. An ancestor rebuilt by assocPath on
  the path down to a deep append still lets its `concat`-preserved children
  reconcile in place instead of re-hydrating the whole list. A real remount
  (identity change / dash.remount) still rebuilds everything. This half is
  operation-agnostic, so a nested scalar Assign/arithmetic/Merge into a large
  container is now O(1) re-hydration too, at parity with append.

Index-shifting ops (Prepend/Insert-mid/Delete/Remove/Reverse) remain
O(shifted) by nature - they genuinely move pre-existing items.

Tests: nested tail-append detection + multi-list/nested-disruption disqualify
cases in patch.test.js; nested-location appendPaths<->computePaths equivalence
in paths.test.js. Renderer unit 55/55; integration test_patch,
test_clientside_patch, test_redraw, test_children_reorder green.

Author: T4rk1n

CHANGELOG.md

@@ -20,7 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - Fix components rendered as props (eg. component labels in `dcc.Dropdown` options, `dcc.Tab` labels) crashing with "can't access property 'props', layout is undefined" or failing to update when the host component's subtree was replaced by a callback. Components inserted out of the layout tree via `ExternalWrapper` now re-insert themselves when their layout entry was removed, so they update in place instead of updating a stale path.
 - [#3929](https://github.com/plotly/dash/issues/3929) Fix components that set their own initial state on mount (eg. `dash-bootstrap-components` `Tabs`, which selects its default active tab) not applying that state on first render - a component's descendant layout hashes were reset on its very first fresh render, discarding the mount-time update before it took effect. The reset now only runs from the second fresh render onward, so a component's initial state survives (regression introduced in 4.2.0 by [#3570](https://github.com/plotly/dash/pull/3570)).
 - [#3938](https://github.com/plotly/dash/pull/3938) Fix `dcc.Patch()` re-running the initial callbacks of components that were already on the page, including every matching (`MATCH`/`ALL`) element, and wiping their user-edited persisted values. Fixes [#3681](https://github.com/plotly/dash/issues/3681) and [#3937](https://github.com/plotly/dash/issues/3937)
-- Fix `dcc.Patch().append()` (and `.extend()`) into a growing container getting progressively slower as the container fills — each append re-hydrated the entire children array (re-running `Registry.resolve` and prop hydration for every pre-existing child) and rebuilt the whole id→path table, making a single append cost O(total children) instead of O(appended). Appending 250 nodes to a 2750-node container dropped from ~4.5s back to a flat ~85ms, matching pre-4.2.0 behavior. Children that are the same object reference as the previous render now skip re-hydration (only for a settled component reconciling in place, never a first render or a forced remount), and pure tail-appends update the path table incrementally. Any change that reorders, inserts, replaces or writes a child still re-renders it normally.
+- Fix `dcc.Patch().append()` (and `.extend()`) into a growing container getting progressively slower as the container fills — each append re-hydrated the entire children array (re-running `Registry.resolve` and prop hydration for every pre-existing child) and rebuilt the whole id→path table, making a single append cost O(total children) instead of O(appended). Appending 250 nodes to a 3000-node container dropped from ~8.6s back to a flat ~0.2s, matching pre-4.2.0 behavior. This now also covers appending to a *nested* list (eg. `p[0]['props']['children'].extend(...)`), which previously fell back to the full re-hydrate. Children that are the same object reference as the previous render skip re-hydration (unless the component is being remounted), and pure tail-appends — at any depth — update the path table incrementally. Any change that reorders, inserts, replaces or writes a child still re-renders it normally.
 
 ## [4.4.1] - 2026-07-21
 

dash/dash-renderer/src/actions/patch.ts

@@ -366,10 +366,10 @@ function recordWrittenProp(
 
 /*
  * Operations that only add items at the end of a list, and how many items
- * each one adds. Anything else that touches a list's top level (Insert,
- * Prepend, Delete, Remove, Clear, Reverse, Assign) invalidates the
- * append-only shortcut for that property, since old items can no longer be
- * assumed to have kept their indices.
+ * each one adds. `location` is the list they append to. Anything else that
+ * touches a list (Insert, Prepend, Delete, Remove, Clear, Reverse, Assign)
+ * invalidates the append-only shortcut for that property, since old items can
+ * no longer be assumed to have kept their indices.
  */
 const tailAppendCounts: {[operation: string]: (params: any) => number} = {
     Append: () => 1,
@@ -386,15 +386,26 @@ function recordTailAppend(
     if (property === undefined) {
         return;
     }
-    if (analysis.tailAppends[property] === false) {
+    const existing = analysis.tailAppends[property];
+    if (existing === false) {
         // Already invalidated for this property; nothing can undo that.
         return;
     }
-    if (location.length === 0 && operation in tailAppendCounts) {
-        analysis.tailAppends[property] =
-            (analysis.tailAppends[property] || 0) +
-            tailAppendCounts[operation](params);
-        return;
+    if (operation in tailAppendCounts) {
+        const count = tailAppendCounts[operation](params);
+        if (existing === undefined) {
+            // First append to this property: remember which list it grew.
+            analysis.tailAppends[property] = {location, count};
+            return;
+        }
+        if (equals(existing.location, location)) {
+            // Another append to the same list - still a pure single-list
+            // append, just more items.
+            existing.count += count;
+            return;
+        }
+        // Appended to a second, different list. We can only express one
+        // grown list per property, so fall back to a full recompute.
     }
     analysis.tailAppends[property] = false;
 }

dash/dash-renderer/src/actions/patchAnalysis.ts

@@ -32,15 +32,27 @@ export type PatchAnalysis = {
     /* Props the patch wrote on components that already existed. */
     writtenProps: {[idStr: string]: {[property: string]: true}};
     /*
-     * For a property whose value is a list: how many items were added at the
-     * tail (Append/Extend, at the top level of that property's value) by this
-     * patch, if that's *all* this patch did to the list. `false` means the
-     * patch also did something else to it (Insert/Prepend/Delete/Remove/
-     * Clear/Reverse/Assign, or wrote into a nested location) - the old items
-     * can no longer be assumed to have kept their positions, so the property
-     * is not eligible for the append-only paths shortcut.
+     * For a property whose value is a list somewhere in its tree: where the
+     * patch appended and how many items it added, if appending to one single
+     * list is *all* this patch did.
+     *
+     * `location` is the path, within the property's value, of the list that
+     * grew (`[]` when the property's value is itself the list, e.g. a plain
+     * `children`; `[0, 'props', 'children']` for a nested
+     * `p[0]['props']['children'].extend(...)`). `count` is the total number of
+     * items appended to that list.
+     *
+     * `false` means the patch is not a pure single-list append - it did
+     * something else to a list (Insert/Prepend/Delete/Remove/Clear/Reverse/
+     * Assign), or appended to more than one distinct list. Either way the old
+     * items can no longer be assumed to have kept their positions, so the
+     * property is not eligible for the append-only paths shortcut.
      */
-    tailAppends: {[property: string]: number | false};
+    tailAppends: {
+        [property: string]:
+            | {location: (string | number)[]; count: number}
+            | false;
+    };
 };
 
 export function createPatchAnalysis(): PatchAnalysis {
@@ -123,16 +135,26 @@ export function wasWrittenByPatch(
 }
 
 /*
- * How many items this patch appended to the tail of `property`'s list, if
- * appending (Append/Extend) is *all* it did to that list - the shortcut
- * paths.js needs to compute paths only for the new items instead of
- * re-crawling every pre-existing one. 0 when the analysis doesn't cover this
- * property, or when the patch touched the list in some other way.
+ * Where and how much this patch appended, if appending to one single list
+ * (possibly nested) is *all* it did to `property` - what paths.js needs to
+ * compute paths for only the new items instead of re-crawling every
+ * pre-existing one. `null` when the analysis doesn't cover this property, or
+ * when the patch touched a list in some other way (see `tailAppends`).
+ */
+export function tailAppend(
+    analysis: PatchAnalysis | undefined,
+    property: string
+): {location: (string | number)[]; count: number} | null {
+    const entry = analysis?.tailAppends[property];
+    return entry && typeof entry === 'object' ? entry : null;
+}
+
+/*
+ * How many items `tailAppend` reports for `property` (0 when it reports none).
  */
 export function tailAppendCount(
     analysis: PatchAnalysis | undefined,
     property: string
 ): number {
-    const count = analysis?.tailAppends[property];
-    return typeof count === 'number' ? count : 0;
+    return tailAppend(analysis, property)?.count ?? 0;
 }

dash/dash-renderer/src/observers/executedCallbacks.ts

@@ -41,7 +41,7 @@ import {
     PatchAnalysis,
     analysisForAllProps,
     analysisForProp,
-    tailAppendCount
+    tailAppend
 } from '../actions/patchAnalysis';
 
 import {applyPersistence, prunePersistence} from '../persistence';
@@ -177,37 +177,58 @@ const observer: IStoreObserverDefinition<IStoreState> = {
                             oldChildrenPath: any[],
                             filterRoot: any = false,
                             propAnalysis?: PatchAnalysis,
-                            appendedCount = 0
+                            append: {
+                                location: (string | number)[];
+                                count: number;
+                            } | null = null
                         ) => {
                             const oPaths = getState().paths;
 
                             // If this patch's only structural change was
-                            // appending items to the tail (tracked by
-                            // patchAnalysis.tailAppends), the pre-existing
+                            // appending items to the tail of one list (tracked
+                            // by patchAnalysis.tailAppends), the pre-existing
                             // children kept their positions and identities.
-                            // Compute paths only for the new tail slice
-                            // instead of re-crawling the whole array - the
-                            // dominant cost of a repeated Patch().append()
-                            // into a large container.
+                            // Compute paths only for the new tail slice instead
+                            // of re-crawling the whole array - the dominant cost
+                            // of a repeated Patch().append() into a large
+                            // container. `location` points at the grown list,
+                            // which may be nested (`[]` for a plain `children`,
+                            // `[0, 'props', 'children']` for a nested extend).
+                            const newList = append
+                                ? append.location.length
+                                    ? path(append.location, children)
+                                    : children
+                                : undefined;
+                            const oldList = append
+                                ? append.location.length
+                                    ? path(append.location, oldChildren)
+                                    : oldChildren
+                                : undefined;
                             const isTailAppend =
-                                appendedCount > 0 &&
-                                Array.isArray(children) &&
-                                Array.isArray(oldChildren) &&
-                                children.length ===
-                                    oldChildren.length + appendedCount;
-
-                            const paths = isTailAppend
-                                ? appendPaths(
-                                      children.slice(oldChildren.length),
-                                      oldChildrenPath,
-                                      oldChildren.length,
-                                      oPaths
-                                  )
-                                : computePaths(
-                                      children,
-                                      oldChildrenPath,
-                                      oPaths
-                                  );
+                                !!append &&
+                                append.count > 0 &&
+                                Array.isArray(newList) &&
+                                Array.isArray(oldList) &&
+                                newList.length ===
+                                    oldList.length + append.count;
+
+                            const paths =
+                                isTailAppend && append
+                                    ? appendPaths(
+                                          (newList as any[]).slice(
+                                              (oldList as any[]).length
+                                          ),
+                                          oldChildrenPath.concat(
+                                              append.location
+                                          ),
+                                          (oldList as any[]).length,
+                                          oPaths
+                                      )
+                                    : computePaths(
+                                          children,
+                                          oldChildrenPath,
+                                          oPaths
+                                      );
                             dispatch(setPaths(paths));
 
                             // Get callbacks for new layout (w/ execution group)
@@ -325,10 +346,18 @@ const observer: IStoreObserverDefinition<IStoreState> = {
                                         oldChildrenPath,
                                         false,
                                         childrenPropAnalysis,
-                                        tailAppendCount(
-                                            childrenPropAnalysis,
-                                            childrenPropPath[0]
-                                        )
+                                        // `tailAppends` locations are relative
+                                        // to the top-level property's value, so
+                                        // the shortcut only applies when
+                                        // `children` *is* that value (a plain
+                                        // `children`), not a dotted sub-path
+                                        // (`figure.data`) into it.
+                                        childrenPropPath.length === 1
+                                            ? tailAppend(
+                                                  childrenPropAnalysis,
+                                                  childrenPropPath[0]
+                                              )
+                                            : null
                                     );
                                 }
                             });

dash/dash-renderer/src/wrapper/DashWrapper.tsx

@@ -87,6 +87,10 @@ function DashWrapper({
     const memoizedKeys: MutableRefObject<MemoizedKeysType> = useRef({});
     const newRender = useRef(false);
     const freshRenders = useRef(0);
+    // Did *this* render remount the subtree (identity changed or an explicit
+    // dash.remount())? A remount rebuilds every descendant from scratch, so
+    // the item-by-item ref-skip below must not carry anything over across it.
+    const remountedThisRender = useRef(false);
     const renderedIdentity: MutableRefObject<string | null> = useRef(null);
     const hasFreshRendered = useRef(false);
     const renderedPath = useRef<DashLayoutPath>(componentPath);
@@ -128,11 +132,13 @@ function DashWrapper({
             // a remount even when the identity is unchanged, letting a
             // callback explicitly reset a component's internal state.
             const identity = componentIdentity(_passedComponent);
-            if (
+            const isRemount = Boolean(
                 _passedComponent?._dashprivate_remount ||
-                (renderedIdentity.current !== null &&
-                    renderedIdentity.current !== identity)
-            ) {
+                    (renderedIdentity.current !== null &&
+                        renderedIdentity.current !== identity)
+            );
+            remountedThisRender.current = isRemount;
+            if (isRemount) {
                 freshRenders.current += 1;
             }
             renderedIdentity.current = identity;
@@ -141,6 +147,7 @@ function DashWrapper({
             }
         } else {
             newRender.current = false;
+            remountedThisRender.current = false;
         }
         renderedPath.current = componentPath;
     }, [_newRender]);
@@ -244,8 +251,12 @@ function DashWrapper({
                         // An item that's the exact same object as before
                         // didn't change - not even props a shallow patch
                         // analysis might miss - so it doesn't need to be
-                        // forced into a fresh hydrate just because this
-                        // array as a whole did (eg. a sibling got added).
+                        // forced into a fresh hydrate just because this array
+                        // as a whole did (eg. a sibling got appended, or a
+                        // deeper list this item sits above grew: ramda's
+                        // assocPath rebuilds the array and this item's parent
+                        // on the way to the change, but `concat` keeps the
+                        // pre-existing items themselves the same object).
                         const unchanged = allowRefSkip && prevArray?.[i] === n;
                         return createContainer(
                             n,
@@ -542,11 +553,16 @@ function DashWrapper({
                 !renderH || newRender.current || 'children' in changedProps
                     ? {}
                     : 0,
-                // Only worth checking item-by-item when this component
-                // itself isn't already getting a fresh hydrate (first
-                // render / forced remount already means "treat everything
-                // below as new", so there's nothing to skip).
-                Boolean(renderH) && !newRender.current
+                // Check items one by one against the previous render whenever
+                // we're not remounting. Even a component getting a fresh
+                // hydrate (eg. a Patch appended a deep sibling, so its parent
+                // was rebuilt on the path down) can keep the pre-existing
+                // items - the exact same objects - reconciling in place
+                // instead of re-hydrating the whole list every time. A first
+                // render simply has no previous array to match, and a remount
+                // must rebuild everything, so both fall through to a fresh
+                // hydrate.
+                !remountedThisRender.current
             );
         }
         newRender.current = false;