Shared State Issue: Module State Not Updating Across Imports #69328

victorlrz · 2024-08-24T14:37:09Z

victorlrz
Aug 24, 2024

Link to the code that reproduces this issue

To Reproduce

Create a simple module (counter.ts):

let count = 0;

const increment = () => {
  count++;
};

const getCount = () => count;

export { increment, getCount, count };

Use the module in another file (instrumentation.ts):

import { getCount, increment } from './counter.ts;

export const register = async () => {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    console.log(getCount());
    increment();
    console.log(getCount());
  }
};

Use the getCount function in a page (page.tsx):

import { getCount } from '../counter.ts';

const Page = async () => {
  console.log('Logger in B:', getCount());

  return <div>Page</div>;
};

export default Page;

console.log(getCount()); // Expected: 1, but it logs 0

Current vs. Expected behavior

I’m encountering an issue with shared state in a Next.js project where the state isn’t updating as expected across different imports. See the simplified reproduction of the problem.

In the instrumentation.ts file, the state (count) is incremented as expected, and getCount() correctly logs 1 after the increment. However, when I import and use getCount() in page.tsx, it logs 0 instead of 1, indicating that the state was not updated across the imports. I would expect to benefit from the statefulness of NodeJs on server side.

Provide environment information

Node.js v20.15.1

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Fri Jul  5 17:56:41 PDT 2024; root:xnu-10063.141.1~2/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 20.15.1
  npm: 10.7.0
  Yarn: N/A
  pnpm: 9.6.0
Relevant Packages:
  next: 14.2.5 // There is a newer version (14.2.6) available, upgrade recommended! 
  eslint-config-next: 14.2.5
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.5.4
Next.js Config:
  output: standalone

Which area(s) are affected? (Select all that apply)

Module Resolution

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

What I've tried:

Global variables - works, but they can introduce unpredictability, testing challenges, and scalability issues, making them a less reliable choice for managing state in complex applications

if (!globalThis.count) {
  globalThis.count = 0;
}

export const increment = () => {
  globalThis.count++;
};

export const getCount = () => globalThis.count;

Proxy - did not work

const handler = {
  get: (target: any, prop: string | symbol) => Reflect.get(target, prop),
  set: (target: any, prop: string | symbol, value: any) =>
    Reflect.set(target, prop, value),
};

const state = {
  count: 0,
};
const proxy = new Proxy(state, handler);

const increment = () => {
  proxy.count++;
};

const getCount = () => proxy.count;

export { increment, getCount };

Named export - did not

Questions
Is Next.js isolating module state between imports?
Could SSR or module caching be affecting the shared state across different parts of the application?
What would be the recommended approach to ensure that state updates are reflected across all imports?

I suspect this might be related to how Next.js handles module caching or server-side rendering, but I’m not sure of the best way to handle this. Any insights or suggestions would be greatly appreciated!

Thanks in advance for your help!

samcx · 2024-08-26T20:09:39Z

samcx
Aug 26, 2024
Maintainer

@victorlrz Is there a reason why you are not using useState here?

The CodeSandbox is also not publicly available.

3 replies

victorlrz Aug 26, 2024
Author

Hey @samcx,

Thanks for your response! The CodeSandbox should now be accessible 👀

I’m working on creating a logger module that starts with an initial logger stored in memory, and includes a method like configureLogger to override it's initial configuration. This approach is similar to the counter module I shared in the sandbox, where a variable is stored in memory and can be accessed and updated through a method increment.

import 'server-only';

import { LoggerOptions, pino } from 'pino';

let logger = pino({
  level: 'info',
});

const configureLogger = (newConfig: LoggerOptions) => {
  logger = pino({ ...newConfig });
};

export { logger, configureLogger };

I expected that, thanks to ES6 value bindings on the server side, the state of this variable would be shared across different server-side components and modules (e.g., instrumentation.ts, page.tsx, and other server components) - looks like it's not the case.

I didn’t use useState because it’s designed to manage state within a single React component’s lifecycle and doesn’t support sharing state across different modules or server-side components. For server-side shared state, I was aiming to use a plain module variable to maintain and update state across different parts of the server environment.

Could you help clarify this behavior or point me in the right direction?

Thanks in advance! 🙏

samcx Aug 27, 2024
Maintainer

@victorlrz I recommend looking into or going with popular global state management examples that are compatible with App Router (listed two below). These examples are battle-tested and are managing state with React (recommended way of handling state), allowing you to make state changes while allowing React to optimize the updates made to the DOM.

I didn’t use useState because it’s designed to manage state within a single React component’s lifecycle and doesn’t support sharing state across different modules or server-side components

True, but ultimately these examples below will use a mix of React Context to manage the shared state, and then useState to handle the global state within a React component (a Client Component in App Router).

Let me know if that helps!

khuezy Aug 28, 2024

I believe you are encountering this problem #65350 (comment)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Shared State Issue: Module State Not Updating Across Imports #69328

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 3 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Shared State Issue: Module State Not Updating Across Imports #69328

victorlrz Aug 24, 2024

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context

Replies: 1 comment · 3 replies

samcx Aug 26, 2024 Maintainer

victorlrz Aug 26, 2024 Author

samcx Aug 27, 2024 Maintainer

khuezy Aug 28, 2024

victorlrz
Aug 24, 2024

Replies: 1 comment 3 replies

samcx
Aug 26, 2024
Maintainer

victorlrz Aug 26, 2024
Author

samcx Aug 27, 2024
Maintainer