Stephen's Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

====== React Cheat Sheet ======

[[https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?utm_source=chrome-ntp-icon|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.

<code javascript>
  // 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
    });
  };
</code>

===== What triggered a render? =====

<code javascript>
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`));
	}
}
</code>