Bug: React.StrictMode causes AbortController to cancel

This issue has been created since 2022-09-16.

React version: 18.2

Steps To Reproduce

  1. import a hook that uses AbortController
  2. Without React.StrictMode the abort controller aborted = false
  3. With React.StrictMode the abort controller gets set to aborted = true
const useAbortController = (abortControllerProp, shouldAutoRestart = false) => {
  const abortController = useRef(abortControllerProp || initAbortController());

  useEffect(() => {
    if (shouldAutoRestart && abortController.current.signal.aborted) {
      abortController.current = initAbortController();
    }
  }, [abortController.current.signal.aborted, shouldAutoRestart]);

  useEffect(() => () => abortController.current.abort(), []);

  return abortController.current;
};

The current behavior

The "echoed" rendering of the component causes the the controller to go from aborted false -> true.

The expected behavior

I'm not sure if this is inherent to what react tests for in this mode, or something that can be expected to work.

eps1lon wrote this answer on 2022-09-17

This is intentional behavior added in React 18 to StrictMode. Effects are now double-invoked (including their cleanup) to ensure component state is reusable. You can learn more about it in https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state

EdmundsEcho wrote this answer on 2022-09-17

@eps1lon I suspected as much. May I ask what the recommended approach is to manage the AbortController interface in context of StrictMode?

vkurchatkin wrote this answer on 2022-09-19

@EdmundsEcho the recommended approach it to just let it happen and make sure it works correctly

gaearon wrote this answer on 2022-09-19

The issue here is that your effect’s code isn’t symmetric. You shouldn’t implement cleanup in a separate effect — the effect that creates the controller should be the same one that destroys. Then an extra cycle wouldn’t break your code.

More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-09-26
Star Count 195293
Watcher Count 6655
Fork Count 40426
Issue Count 1113

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Batch size error while running trainer.sample 1 2022-05-26 2022-08-20
Looking forward to it! 16 2022-05-24 2022-07-17
[iOS] [universal link]It should be possible to open staging and product urls in the proper app 2 2022-07-13 2022-08-11
Terminate when meets termination character multiple times 1 2021-08-20 2022-08-28
Issue with saving screen image from scope - 5 2021-08-31 2022-09-11
Lazy Loading with Auto Trigger DOESN'T work 1 2017-05-23 2022-07-11
ping-pong on Arm seems does not respect --mps parameter 3 2021-11-24 2022-08-29
How to understand the output of the obb2xyxy function 2 2022-03-12 2022-09-24
Task-only calendar also shows as calendar 10 2021-10-11 2022-09-26
Failed to build on Debian Bullseye - the_FoundationConfig.cmake 2 2022-05-23 2022-08-21
Unexpected behaviour when using combineReducers() 0 2018-04-18 2022-08-30
assignBrowse()方法如何使用 1 2019-12-14 2022-09-16
Exception with MSBuild on Mono if flag maxCpuCount > 1 2 2021-12-02 2022-09-13
Core layer todo list for 2.2.X [NEED CONTRIBUTION] 0 2019-05-07 2022-09-18
Delete posted image without having to click outside the image 2 2021-12-06 2022-09-02
Why is this not matrix client/backend? 9 2021-12-01 2022-09-02
[FEATURE] Suggest & create your own metric! 0 2021-10-05 2022-05-23
[Textfield] Textfield not show the last row when set autoSize 3 2021-04-09 2022-09-22
Add Metal backend for macOS 0 2021-04-14 2022-06-29
Replace window managment with glfw 0 2021-04-14 2022-06-29
Multiple Occurrences of One Task in a Day 2 2021-05-09 2022-09-26
[BUG] ValueCount() op yields an error with to_parquet() method 1 2021-10-18 2022-08-21
建议添加更多文件格式关联 0 2021-12-12 2022-01-18
Build error: Qt5Core.lib(qcoreapplication.obj) : error LNK2001: unresolved external symbol __std_find_trivial_4 0 2022-07-10 2022-09-27
issue in WordPress 1 2022-01-04 2022-01-20
[FEATURE REQUEST] Add urlencode template function 0 2022-04-22 2022-09-02
Use fixes._compare_version for version checks everywhere 0 2021-10-23 2022-08-27
纵向联邦模式下,train_fn和eval_fn无法共存 4 2022-03-22 2022-09-24
AWS X-Ray. Container commend seems to be wrong. 1 2021-04-29 2022-09-10
Plugin broken after latest changes from upstream neovim 4 2022-08-26 2022-09-02
Online Service Terms(OST) - Link broken 9 2022-01-07 2022-09-22
"ghdl -a" barfs if there's a non-ascii character in a comment 1 2021-09-30 2022-07-24
Cart i2: Move all duplicated code to a shared place. 0 2021-09-21 2022-08-02
How to custom Id type for AuditLog 1 2022-08-17 2022-09-17
Error: An argument named "response_headers_policy_id" is not expected here. 5 2022-01-25 2022-09-14
Add Repository Error 1 2021-03-08 2022-09-14
(BUG) 4-Speed Fan 0 2021-02-23 2022-01-18
Shipyard Controller: Check out shipyard for specific commit during a sequence 0 2021-12-14 2022-01-30
[Feature request] I don't want the "base" effect everywhere, if i can control it don't work. 1 2022-03-14 2022-08-03
uploads not moving files to azure from website upload, its keeping in wp-content folder 0 2021-02-04 2022-09-09
No warning/error when updating a core that is currently loaded 3 2022-08-22 2022-09-19
Unable to debug Python tests in mixed Python/C++ project 3 2022-01-19 2022-09-13
Null coalesce operator can be used for type specifying shorthand 1 2022-06-20 2022-09-14
evangelize "rnx-test" command and rnx-kit Jest multi-platform testing 0 2022-03-21 2022-09-19
Add the artifact to vaadin-bom 0 2021-09-24 2021-12-31
Add macOS support 6 2021-06-20 2022-01-13
Add support for API_KEY_FILE 0 2020-09-19 2022-08-18
Modify syntax for arrays of channels 1 2022-04-27 2022-09-15
Nunit.Runner.App doesn't have the property 'Options' 6 2017-03-10 2022-09-02
[Bug] Wrap UserControl (which Contains a WrapLayout) inside StackLayout raises Exception 2 2022-08-24 2022-08-29