Bug: Unexpected automatic batching behavior?

This issue has been created since 2022-11-23.

When running a heavy computation between two "setState" in a useEffect, one being out of a setTimeout and the other inside it, React does not re-render twice.

This is a problem because it prevents us from showing a "loading state" to the user while the heavy computation is running.

React version: 18.2.0

Steps To Reproduce

See this sandbox.

Main part of the sandbox code

  useEffect(() => {
    setData(undefined);
    setTimeout(() => {
      const res = slowFibonacci(counter);
      setData({ res });
    });
  }, [counter]);

The current behavior

It changes depending on some things I'm unfortunately not sure about.
Sometimes the loading state is correctly showed on mount, sometimes it's on update.
Sometimes the loading state displays smoothly, sometimes it seems that it is stuck mid-render (I don't know this for a fact).
And finally some other times, the loading state is not displayed at all, and the component is only rendered once the computation is done.

The expected behavior

I'd expect this code to behave as described in this comment from the "Automatic batching for fewer renders in React 18" discussion on the React 18 repo of the React Working Group:

The updates outside setTimeout will be batched together and updates inside setTimeout will be batched together separately so it will be 2 separate renders.

Thanks to @gaearon for taking a look at this beforehand and suggesting to submit this issue.

More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-12-10
Star Count 198882
Watcher Count 6638
Fork Count 41302
Issue Count 1120

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
cache files won't get written to tmp from s3 storage 1 2022-08-22 2022-12-03
cannot connect with my rust server with +rcon.web "1" 4 2021-11-12 2022-08-16
Error: [docker] error pulling image: invalid reference format 1 2022-01-09 2022-11-20
Talos installation on Hetzner bare metal servers not possible 6 2022-07-30 2022-08-14
Images not served properly 3 2020-12-29 2022-12-03
express-graphql as serverless? 2 2021-01-20 2022-12-03
[Bug] [client] An exception occurred during the packaging process 0 2022-07-19 2022-09-12
Feature request: extend Rdkafka::Error with instance name 2 2021-11-27 2022-10-21
Override constants with compile-time CLI args 1 2021-11-22 2022-09-28
Integrate v1.0.0a20 version of contracts in ocean.py 0 2022-02-16 2022-11-14
Integrate changes from the latest version of contracts 0 2022-02-14 2022-10-09
clarify `transfer rule`, `exclude rule` & `file-lists` terms in man page 2 2022-05-20 2022-11-28
How to transmit / upload files over API? 23 2015-04-16 2022-12-04
Missing "./postcss/buttons" export in "open-props" package 1 2022-09-19 2022-11-28
希望支持 Gitee 5 2021-02-13 2022-01-15
inconsistent partial_token_sort_ratio results 1 2022-11-09 2022-11-28
Docker container build failure 3 2022-01-28 2022-09-20
Error Snapshots cannot be created in Live CD mode 6 2021-03-14 2022-10-24
PS D:\wechaty\wechaty-getting-started> npm install安装失败 10 2021-08-05 2022-12-02
[Issue]: Graphical Issue in Killer 7 - Double Enemies 1 2022-03-10 2022-11-01
feature: support Multi-dataset I/O 1 2022-10-28 2022-11-16
2.5.0: Fails to find HDF5 9 2022-11-04 2022-11-16
iMessage contacts don't show up in Element 2 2022-06-05 2022-12-01
Redirects URLs not fully resolving -- MIME-Type being inferred from initial redirect headers 15 2022-07-17 2022-09-02
Vibrant Mode is not available on ubuntu 1 2018-02-28 2022-07-18
SHACL with FIBO (Version: NEO4j-4.3.4)- Not Validating with Graph_Config set to 'MAP' as Prefix is not being resolved 3 2021-11-09 2022-11-26
OpenAPI not parsing Enums in Type Query 0 2022-02-10 2022-11-28
[Docs - Quickstart] - Requesting Nim 1 2021-12-29 2022-10-25
How to quantize a mmdet model with MQBench 1 2022-07-12 2022-11-10
[Feature Request]: Enable new dependency approach from a pipeline perspective 2 2022-06-23 2022-10-26
Does miette support printing out the line number that the error was triggered at like eyre does? 3 2022-04-30 2022-10-03
playground panic when boot monitor 0 2022-01-06 2022-10-13
Missing infill in round upgoing corners 4 2022-06-03 2022-12-04
Less verbose way to pass through props into components? 2 2022-11-13 2022-11-26
Typo in chart 1 2021-05-26 2021-12-20
Investigate whether it makes sense to integrate with Bean Validation 9 2021-05-17 2022-12-09
More than one file was found with OS independent path 'META-INF/library_release.kotlin_module'. 0 2021-05-19 2022-12-07
Crash on rotation 0 2021-05-19 2021-12-23
iOS: No software keyboard for input 2 2022-11-01 2022-11-23
Localization status 2 2020-10-18 2022-01-04
Bump lodash from 4.17.15 to 4.17.19 0 2020-07-16 2022-11-10
LDAP[Authentication/Authorization]Backend2 does not support all configuration settings as LDAP Backend v1 0 2022-11-01 2022-11-29
ASSERT_THAT and wildcard matcher not compiling with multiparameter template 2 2022-11-10 2022-12-01
Blog posts order differs in side-nav vs list 4 2022-08-24 2022-11-04
Upsert is not working on 2.0.0-alpha 2 2021-04-18 2022-11-10
Custom Hooks docs page entirely blank 2 2021-08-25 2022-11-24
SAVI config: num_processes, num_updates, number of gpus during pre-training, validation, and training 5 2022-09-05 2022-11-30
Call Screen does not respect system theme. 0 2022-11-29 2022-11-28
Action View Class Methods incorrectly mixed into RBIs 0 2022-08-04 2022-11-24
Switch keyboard animation is not available on iOS 3 2021-10-21 2022-11-28