Sharing Top Content from the Angular-sphere.

How to NOT React: Common Anti-Patterns and Gotchas in React

  • Democlass app extends Component { – constructor(props) { – super(props); – this.state = { – name: ” – }; – this.updateValue = this.updateValue.bind(this); – }updateValue(evt) { – this.setState({ – name: evt.target.value – }); – }render() { – return ( – form – input onChange={this.updateValue} value={this.state.name} / – /form – )…
  • Now you can write components like this — – class App extends Component { – constructor(props) { – super(props); – this.state = { – name: ” – };// Look ma!
  • updateValue = (evt) = { – this.setState({ – name: evt.target.value – }); – }render() { – return ( – form – input onChange={this.updateValue} value={this.state.name} / – /form – ) – } – }Read More —2.
  • However, using certain set of values such as array indexes may break your application or render wrong index) = – Display – {…element} – key={index} – / – ) – }ProblemsWhen children have keys, React uses the key to match children in the original tree with children in the subsequent…
  • The docs also mention this — – Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.Another problem is when you have multiple setState calls in a single function, as shown above on line 16 and 20.

What is an anti-pattern? Anti-patterns are certain patterns in software development that are considered bad programming practices. The same pattern may have been considered correct at one point in…

How to NOT React: Common Anti-Patterns and Gotchas in ReactWhat is an anti-pattern? Anti-patterns are certain patterns in software development that are considered bad programming practices. The same pattern may have been considered correct at one point in the past, but now developers have realised that they cause more pain and hard-to-track bugs in long term.

React has matured as an UI library and with that a lot of best development practices have evolved over the years. We are going to learn from the collective wisdom of thousands of programmers and developers who learnt those things the hard way.

Truly said!Let’s begin!

1. bind() and arrow functions in ComponentsYou must have bound your custom functions in the constructor function before using them as props for components. If you declare components using the extends keyword, then the custom functions (such as updateValue below) lose their this bindings. So, if you want to access this.state, or this.props or this.setState then you need to re-bind them.

Democlass app extends Component {

constructor(props) {

super(props);

this.state = {

name: ”

};

this.updateValue = this.updateValue.bind(this);

}updateValue(evt) {

this.setState({

name: evt.target.value

});

}render() {

return (

form

input onChange={this.updateValue} value={this.state.name} /

/form

)

}

}ProblemsThere are two ways to bind the custom…

How to NOT React: Common Anti-Patterns and Gotchas in React