Bug: save ref into state by callback ref with useImperativeHandle will cause infinite loops error

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

Hi. In my case, I want to save every instance of ref in a closure. So I saved ref into state to rerender my component while ref changed, then to rerun the useMemo/useCallback function. But I find this would cause infinite loops, and when I remove useImperativeHandle hook, everything works fine. Is it a bug?

image

React version: 16.14.0

Steps To Reproduce

  1. Create a component with useImperativeHandle
  2. Using this component with callback ref, and save ref into state

Link to code example: codesandbox demo

The current behavior

infinite loops error

The expected behavior

only rerender twice.

vkurchatkin wrote this answer on 2022-11-08

useImperativeHandle hook has deps argument that should be used to prevent unnecessary ref updates. If ref is a ref object that might not be a problem, because updating it does no trigger rerenders. In your case each render of FancyInput triggers ref update, which triggers App rerender, which triggers FancyInput rerender, etc.

csu-feizao wrote this answer on 2022-11-11

useImperativeHandle hook has deps argument that should be used to prevent unnecessary ref updates. If ref is a ref object that might not be a problem, because updating it does no trigger rerenders. In your case each render of FancyInput triggers ref update, which triggers App rerender, which triggers FancyInput rerender, etc.

Thank you. I missed the deps argument while looking document.

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
extract slice size from tiff files 1 2021-07-26 2022-07-18
Error when trying to import content from a peer 1 2022-05-06 2022-11-12
Bug: mgl-layer does not unregister source 1 2022-04-20 2022-08-18
Support `ignoreClientDirectives` in operation definitions 3 2022-05-31 2022-12-04
Psych Engine crashes when opening it 0 2022-08-21 2022-11-28
How to make stun note in psych engine 13 2022-08-21 2022-08-28
Error: Unexpected argument: 6 1 2022-05-12 2022-12-09
[Upload] 图片上传可以给个设置宽高的参数吗? 5 2022-06-28 2022-08-20
SRA Toolkit Error while using prefetch 12 2021-06-08 2022-11-26
[Nuget] Add nuget readme 2 2021-11-11 2022-11-03
unknown attribute:AB error for octopus joint-called VCF 2 2022-01-28 2022-12-01
Unable to access split-vep annotation in INFO 3 2022-02-06 2022-12-01
Styles option not working as expected 4 2022-09-11 2022-12-01
FAQ menu item does nothing (f-droid) 1 2021-12-16 2022-11-27
Custom parameters for email templates 0 2022-12-02 2022-12-02
Add meta description tag 6 2022-07-19 2022-09-25
Catalogue of Monero decoy selection algorithms 7 2022-03-16 2022-11-28
Missing Item tags on `alltheores:raw_zinc` 1 2022-09-01 2022-09-25
The game crashed whilst adding item to inventory Error: java.lang.IllegalStateException: mc.player is not initialized! Probably not in game 3 2022-09-03 2022-09-25
Problem with Create train and field of view 0 2022-09-03 2022-09-25
Fill: ZeroDivisionError 2 2022-08-16 2022-10-29
`storablePeekByte` uses wrong offset values 2 2021-05-12 2022-07-29
Missing the menu 15 2021-05-31 2021-12-28
Feature: add VARIANT type 0 2021-10-17 2022-09-25
Would it be possible to add GB Player emulation? 1 2021-03-31 2022-11-12
AppSyncApi: support lambda authorizer 0 2021-11-07 2022-12-04
MD Express Request a way to debug track jobs 2 2022-11-01 2022-11-30
401 while downloading Sidekiq Pro 1 2021-05-05 2022-10-15
Searching for Updates (Forever) 5 2019-04-04 2022-11-26
[New Feature]: Add a code action to update the usages when the signature is changed 0 2022-08-29 2022-09-04
Available for offline use as well, or just online? 2 2022-06-03 2022-11-12
Step 10 Shared Library File Names Update Needed 2 2022-01-03 2022-10-30
Incremental unit test coverage improvement 0 2022-11-04 2022-11-14
Ability to ignore dependencies 0 2021-07-26 2022-10-30
[开源自荐][Go] 一个低代码侵入的SQL 链路追踪库,适用于任何关系数据库(Sqlite3、 MySQL、 Oracle、 SQL Server、 PostgreSQL、TiDB等)和各种关系型数据库的ORM库(gorm、xorm、 sqlx等) 0 2022-09-13 2022-10-30
Auto Uploads with Large Videos is Broken, not Auto, rather stuck. 1 2022-04-04 2022-11-20
google.api_core.exceptions.ServiceUnavailable: 503 Getting metadata from plugin failed with error: None could not be converted to unicode 1 2022-11-15 2022-12-01
.NET client quickstart guide uses deprecated methods 0 2022-08-25 2022-11-22
flutter run failed with permission denied (copy to /usr/local/) why? 2 2022-01-25 2022-12-02
Commented lines does not show up in nested tmux session 4 2021-08-18 2022-12-04
The content of the generated plugin class has problems 2 2021-06-11 2022-11-27
You must be logged into a voice channel to play 1 2021-09-20 2022-09-15
Edit Content Model: Ability to delete fields that are not used/set in any entries 5 2022-02-28 2022-11-01
Null stream causing ArgumentNullException during serialization while running query 8 2022-05-20 2022-11-01
cmd/go: get does not enforce minimum version from package's go.mod file 1 2021-09-23 2022-11-19
Issue: Changing one tab triggers the build method of other tabs. 3 2021-04-29 2022-12-04
Bump comm-cid and filecoin-ffi 0 2020-07-15 2022-11-26
Can't create multiple port forwarding rules at once 5 2021-11-16 2022-11-06
Strictness of `foldr'` and `foldl'` 16 2020-10-07 2022-11-25
[ML] Investigate performance of datafeed timing stats searches 4 2022-01-05 2022-10-25