React Cheat Sheet

React Devtools extension.

If component does not have state, does not have user interaction, is not top-level component, use function component. Otherwise, use class component.

Use 'axios' library for AJAX requests.

  // Not so good, cos setState is async and could make race condition.
  handleClick = () => {
  	this.setState({
    	counter: this.state.counter + 1
    });
  };
 
  // Fixed. Only needed if accessing current (prevState) state.
  handleClick = () => {
  	this.setState((prevState) => {
    	counter: prevState.counter + 1
    });
  };

componentDidUpdate(prevProps, prevState) {
	Object.entries(this.props).forEach(([key, val]) => prevProps[key] !== val && console.log(`Prop '${key}' changed`));
 
	if (this.state) {
		Object.entries(this.state).forEach(([key, val]) => prevState[key] !== val && console.log(`State '${key}' changed`));
	}
}