New rule proposal: Check if this.refs.someRef properties are actually defined

[Intellicode]

I had a few occasions myself that some of my components had typo's or missing reference attributes in components causing crashes.

const Hello = React.createClass({
  onFocus() {
    const scrollResponder = this.refs.scrollView.getScrollResponder();
    ...
  }

  render() {
     return <ScrollList />
  }
});

[jimbolla]

Just a heads up... I remember reading (but can't seem to find) a mention that this.refs is eventually going to be phased out by the React team. I believe the reasoning is that ref= is basically an escape hatch that breaks encapsulation and its use should be minimized. To make the code simpler, they'll phase out ref="thing" going into this.refs.thing and instead only support the function-based ref={c => this.thing = c} style. I can't seem to find the github issue where this was discussed, but I remember reading it in the past few months.

A better rule might be to disallow use of this.refs.

[Intellicode]

Good point, I'll do some research and if I come across the discussion you mentioned, I'll reference it here.

[Intellicode]

"React also supports using a string (instead of a callback) as a ref prop on any component, although this approach is mostly legacy at this point." https://facebook.github.io/react/docs/more-about-refs.html so indeed a rule to prevent using this.refs would make more sense.