- Component name should start in uppercase otherwise React cannot differentiate between normal HTML tag and React Component
- Do not call setState() method in render
- Do not modify the members of the state using this.state.xyz because render() doesn’t get called
- If you modify a property of an object in state say, this.state.person.name, you don’t really have to call setState() if there’s any need for UI update
- Calling setState() will not update the real DOM. It will create the Virtual DOM and diffing algorithm tells you whether the real DOM needs to be modified or not
- Comments inside JSX are really harmful
- Don’t over-complicate shouldComponentUpdate() by writing complex conditional statements to check if you have to call render or not. Keep it simple
- If you want to write AJAX calls write them in componentDidMount() or componentDidUpdate(). These two functions should satisfy your needs, in most of the cases
- Do not ignore the warning of not having unique “keys” in collection of JSX elements. The UI behaviour can get weird when you are trying to add/remove items dynamically
- The setState() method on parent component automatically calls the render() method of the child components