Issues with @react-spring/web and React 18 in strict mode

[milotoor]

I've encountered some odd behavior related to @react-spring/web (via the @mui/x-charts package which uses it) that I've so far only been able to reproduce within the context of the Next.js App Router. I'm not sure if this is a bug with the App Router or not; this post is intended mainly to improve my understanding of what "strict mode" means in the context of the App Router, and whether Next.js applies any significance to <StrictMode> beyond React's own implementation.

Consider the following code:

import { StrictMode } from "react";
import * as ReactDOM from "react-dom";
import { animated, useSpring } from "@react-spring/web";
import Demo from "./Demo";

function Demo() {
  const { animatedWidth } = useSpring({
    from: { animatedWidth: 0 },
    to: { animatedWidth: 300 },
    reset: false,
    immediate: false,
  });

  return (
    <svg>
      <animated.rect height={10} width={animatedWidth} fill="blue" />
    </svg>
  );
}

const root = document.querySelector("#root")!;
ReactDOM.createRoot(root).render(
  <StrictMode>
    <Demo />
  </StrictMode>
);

This is a very simple usage of the useSpring "flagship hook" from @react-spring/web. It renders an svg and within it a short blue rect which initially has zero width but soon grows to a width of 300px. You can see it in action here. React's "strict mode" is in effect.

That's all well and good. However, when I port the exact same code into the Next.js v14 App Router, things begin to break down. Consider the following setup:

// next.config.js
module.exports = {
    reactStrictMode: false,
};

// app/page.tsx
'use client';

import { StrictMode } from "react";

export default function Page() {
  return (
    <div>
      <Demo />

      <StrictMode>
        <Demo />
      </StrictMode>
    </div>
  );
}

Items to note:

• reactStrictMode is set to false. This turns off strict mode globally and is crucial for demonstrating the purported bug
• the page uses the use client directive. This is needed because useSpring relies on React.createContext
• the <Demo> component is rendered twice within Page, once within a <StrictMode> boundary and once without it

See this sandbox for a live example. This code misbehaves. The expected behavior is that two svg's should render, each with its own blue rect that grows to 300px wide. However, only the first Demo component (i.e. the one outside of <StrictMode>) achieves this. The second Demo renders an svg and a rect, but its width is stuck at 0 forever.

I'm having a very hard time understanding why the behavior of these two snippets differs. They both render the exact same Demo component wrapped in a StrictMode boundary, yet in the context of the Next.js App Router this fails to achieve the desired result. I have virtually no familiarity with Next.js internals, and I'm hoping someone here will have some clue or hunches about what might be going on.

Thanks in advance for any ideas!

[RomainoSoko]

Any update about this ?