When the set operation is executed in the 「then callback」, the 「set operation」 takes nearly a hundred times longer.

[LZY622]

When the set operation is executed in the 「then callback」, the「set operation」 takes nearly a hundred times longer.

In a new umi framework，Add a button to the page and add a handle to the button to test the time consumption of the 「set operation」.

Print time-consuming code(Store)

import {create} from "zustand";
export const useStore = create<any>()((set, get) => ({
  loading: false, 
  setLoading: (loading: boolean) => {
    console.time('time--set')
    set({ loading })
    console.timeEnd('time--set')
  },
}))

UI code

return (
  <div>
    <div>{String(loading)}</div>
    <Button type="primary" onClick={testSetHandle}>setLoading</Button>
  </div>
);

Experiment 1

Handle code：

const testSetHandle = useCallback(async () => {
  setLoading(!loading)
}, [loading])

Time consuming printing：

Experiment 2

Handle code：

const testSetHandle = useCallback(async () => {
  await sleep(3000);
  console.log('sleep 3000')
  setLoading(!loading)
}, [loading])

Time consuming printing：

Experiment 3

Handle code：

const testSetHandle = useCallback(async () => {
  await sleep(3000);
  console.log('sleep 3000')
  await sleep(2000);
  console.log('sleep 2000')
  setLoading(!loading)
}, [loading])

Time consuming printing：

Experiment 4

Handle code：

const testSetHandle = useCallback(async () => {
  await sleep(3000);
  console.log('sleep 3000')
  await sleep(2000);
  console.log('sleep 2000')
  await sleep(1000);
  console.log('sleep 1000')
  setLoading(!loading)
}, [loading])

Time consuming printing：

Experiment 5

Handle code：

const testSetHandle = useCallback(async () => {
  await sleep(3000);
  console.log('sleep 3000')
  await sleep(2000);
  console.log('sleep 2000')
  await sleep(1000);
  console.log('sleep 1000')
  await sleep(2000);
  console.log('sleep 2000')
  setLoading(!loading)
}, [loading])

Time consuming printing：

Conclusions and conjectures

If there is an await statement before the set operation, the set operation will take longer. And the more awaits, the more time it takes. From experiments, we can find that there seems to be a threshold for the number of awaits. In the example, if there are more than 2 awaits, the time consumption will jump directly to 30ms.In our actual project, due to factors such as store size, a simple set operation will take 200+ms. The essence of await is the syntactic sugar of 「.then callback」, so it is reasonable to speculate that it is related to the number of nesting of 「.then」.Please suggest some solutions, thank you very much

Link to reproduction

The code is relatively simple to reproduce，code repository is no longer provided

Check List

Please do not ask questions in issues.

• I've already opened a discussion before opening this issue, or already discussed in other media.

Please include a minimal reproduction.

• I've added a link to a typescript playground or codesandbox with a minimal reproduction.

Please check this if you're filing an issue regarding TypeScript.

• I've read the typescript guide, in particular that create is to be used as create<T>()(...) and not create<T>(...).

[dai-shi]

Hi, thanks for reporting.
Would it change if it's a normal function without Zustand?
Also, what happens if you remove showing loading and use the function directly const { setLoading } = useStore.getState();?

[LZY622]

hello，I removed showing loading, and use static method const { setLoading } = useStore.getState(); ,but there hasn't been any change. And compared it with the native setState

[dai-shi]

Thanks for investigating it.
That's interesting.
I hope someone can dig into it.
Let me add the "help wanted" label.

[dai-shi]

I removed showing loading

Ah, wait, can you remove the line const { loading } = useStore(e => e); entirely?

And compared it with the native setState

So, what would be your insight?