React.js
Angular
Ethical Hacking
Agile
AWS
BlockChain
Cassandra
Cloud
Salesforce
Scaled Agile
TOGAF
DevOps
GIT
Jenkins
Jira
Kibana
Linux
NGINX
Ansible
Artificial Intelligence
in React JS by

Why are String Refs legacy?

Click here to read more about DevOps

1 Answer

0 votes
by

f you worked with React before, you might be familiar with an older API where the ref attribute is a string, like ref={'textInput'}, and the DOM node is accessed as this.refs.textInput. We advise against it because string refs have below issues, and are considered legacy. String refs were removed in React v16.

  1. They force React to keep track of currently executing component. This is problematic because it makes react module stateful, and thus causes weird errors when react module is duplicated in the bundle.
  2. They are not composable — if a library puts a ref on the passed child, the user can't put another ref on it. Callback refs are perfectly composable.
  3. They don't work with static analysis like Flow. Flow can't guess the magic that framework does to make the string ref appear on this.refs, as well as its type (which could be different). Callback refs are friendlier to static analysis.
  4. It doesn't work as most people would expect with the "render callback" pattern (e.g. )
    class MyComponent extends Component {
      renderRow = (index) => {
        // This won't work. Ref will get attached to DataTable rather than MyComponent:
        return <input ref={'input-' + index} />;
    
        // This would work though! Callback refs are awesome.
        return <input ref={input => this['input-' + index] = input} />;
      }
    
      render() {
        return <DataTable data={this.props.data} renderRow={this.renderRow} />
      }
    }

Related questions

Madanswer
0 votes
0 votes
0 votes
asked Jun 19 in React JS by JackTerrance
0 votes
asked Jun 19 in React JS by JackTerrance
...