question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TextInput ref gets re-set with every render

See original GitHub issue

Description

starting in 0.62 (probably related with the hooks-rewrite of textinput), every time textinput re-renders, the ref callback function is executed. That means that for every character you write, ref callback is called with

  1. null and then
  2. new ref

the refs are not referentially equal, even though the _nativeTag field on the ref is the same, and the TextInput is not unmounted in between the renders.

React Native version:

This is reproducible on current master

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

use code here https://github.com/facebook/react-native/blob/5cde6c5e7d440e62d21ef858d77ed185df8a2da0/RNTester/js/examples/TextInput/TextInputSharedExamples.js#L162 - just put a console log in there

Expected Results

I expect the ref callback to be called when the component mounts / unmounts only, not on every re-render

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:6
  • Comments:7

github_iconTop GitHub Comments

3reactions
david-arteagacommented, Aug 25, 2020

@vonovak The code you provided to reproduce the error actually is expected to cause the callback to be run on every re-render (see callback ref caveats).

But still, I came across the same error even when the callback ref is not re-created on every render. You can look at the result here.

The ref callback is only called on every re-render (4 times) when the code is running on mobile (I have only tested iOS). There is no issue when using React Native Web, or React DOM for that matter.

And I did not find that the values provided are referentially different when using the same callback ref. I used a Set to keep track of how many distinct object references were passed.

1reaction
yairoprocommented, Jun 30, 2020

Same problem. Here my environment information

System:
    OS: macOS 10.15.5
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Memory: 228.73 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.20.1 - ~/.nvm/versions/node/v10.20.1/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v10.20.1/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v10.20.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 22, 23, 25, 26, 27, 28, 29
      Build Tools: 23.0.1, 25.0.2, 26.0.2, 26.0.3, 27.0.0, 27.0.3, 28.0.2, 28.0.3, 29.0.0, 29.0.2, 29.0.3
      System Images: android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.4/11E146 - /usr/bin/xcodebuild
  npmPackages:
    react: ^16.13.1 => 16.13.1 
    react-native: ^0.62.2 => 0.62.2
Read more comments on GitHub >

github_iconTop Results From Across the Web

How to reset input field from useRef in React? - Stack Overflow
To reset the value of the referenced input, you can set it to an empty string (or whatever you want the "default" value...
Read more >
More About Refs | React
After returning the structure of your UI from the render method, ... clearAndFocusInput}> Click to Focus and Reset </div> <input value={this.state.
Read more >
Preserving and Resetting State - React Docs
Every time you click the button, the input state disappears! This is because a different MyTextField function is created for every render of...
Read more >
Reset input field values tracked by useRef in React | bobbyhadz
To reset input field values tracked by `useRef` in React, set the ref's value property to an empty string, e.g. `ref.current.value = ''`....
Read more >
The Complete Guide to useRef() and Refs in React
Updating a reference doesn't trigger re-rendering, while updating the state makes the component re-render;; The reference update is synchronous ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found