Master List of Deprecated React Stuff?

react
1

Is there a master list of deprecated react stuff?

Not just meteor specific.

It’s tough to find tutorials that use up-to-date stuff AND best practices…

2

Unfortunately I don’t know that there’s much of a master list. However, here are a few things to keep in mind as goes current React best-practices:

  • Prefer class MyComponent extends React.Component and avoid React.createClass.
    While React.createClass is probably not going anywhere soon, it seems to be on the road out. However, if you use mixins (which are also on the road out [it seems]) you have to use React.createClass.
  • Whenever possible use functional stateless components:
const MyComponent = ({ text, className }) => (
  <span className={className}>{text}</span>
)
  • Use jsx. Avoid direct use of React.createElement, etc. if possible.
  • Use inline operators such as ternary (? :) and logical ORs/ANDs (||, &&) but use indentation and parentheses to assist in these being easily understood.
  • Use ref= only with a function, not a string.
  • Always use React.Children when iterating over children.
  • Avoid ReactDOM.findDOMNode. Use ref instead.
  • Manually bind this for all local component functions when using ES6 classes. Do this in the constructor.
  • Use the spread operator in your JSX.
  • When using React.createClass still use method notation:
const MyComponents = React.createClass({
  componentWillMount() {
    ...
  },

  render() {
    ...
  }
})
  • Have render as the last method in React.createClass and in ES6 class definition.
  • Use destructuring in your props:
// When using functional stateless components
const MyComponent = ({ text, name }) => (
  ...
)

// In your render method
render() {
  const { text, name } = this.props;
  const { persons } = this.state;
  const { onClick } = this;

  return (
    ...
  )
}
  • Avoid storing React components in the global scope. Use ES6 import/export instead.

Honestly that’s all I can think of off the top of my head. The rest are mostly stylistic points. There are also data-flow concepts. React likes data to flow one-directionally with objects down the totem pole only generating events which are caught by a top-level singleton holding all the data. In an ideal structure only the top object(s) would have states and the rest would be functional stateless components with the exception of controlled inputs. This is mostly opinion but works fairly well with React. It’s a given to use JSX and ES6 with React. Liberally use of destructuring, method notation in objects, classes and using the modules system (import/export) are the way to go.

Hope this helps some.

3 Likes
3

Thanks.

Maybe I’ll make a list.

4

React’s CHANGELOG is a pretty good way to stay up to date with deprecations (and overall changes).

5

Also ESLint will catch many React specific anti-patterns.

6

Yeah I forgot about that.

I may try to put something together for average humans that is more succinct as it relates to figuring out if a tutorial is out-of-date or not.