I wish I knew these before diving into React – OpsGenie Engineering

  • By default, setState triggers a re-renderThe default behavior of React is to re-render on every state change, and most of the time it is okay to rely on this.
  • However, re-rendering unnecessarily wastes cycles which is not a good practice.Each component has a method called shouldComponentUpdate and it is called everytime you change state or pass new props from the parent component.
  • We can simply divide lifecycle into three parts:Mounting: an instance of the component is being created and inserted into the DOM.Updating: component is being re-rendered, can be caused by changes of props or state.Unmounting: component is being removed from the DOM.It is very important to understand how these methods work….
  • Compare this.props with nextProps and if there is a significant change, act on it.Two important notes here:React may call componentWillReceiveProps even if the props have not changed, so comparing this.props and nextProps is is invoked before a mounted component receives new props, this means React doesn’t call componentWillReceiveProps with initial…
  • Use React Developer ToolsReact Developer Tools lets you inspect the React component hierarchy, components’ props and state.

At OpsGenie, we had a deep dive into React for our Badges project. I learned many new things & made many mistakes. These are the things that really helped me.

At OpsGenie, we had a deep dive into React for our Badges project. I learned many new things made many mistakes. Some of my learnings are subjective, but I thought they may help other people to learn React and avoid making the same mistakes. Long story short, these are the things that really helped me.1. By default, setState triggers a re-renderThe default behavior of React is to re-render on every state change, and most of the time it is okay to rely on this. However, re-rendering unnecessarily wastes cycles which is not a good practice.Each component has a method called shouldComponentUpdate and it is called everytime you change state or pass new props from the parent component. React decides whether to re-render or not according to the return value of shouldComponentUpdate.By default, shouldComponentUpdate returns true, but you can override it to return false for cases that you do not want a re-render. Here is an example:Important notes:Setting shouldComponentUpdate wrongly or forgetting that you set it can cause major problems since your component may not be updated as expected.Running computations in shouldComponentUpdate can be expensive in terms of performance and effort, so you should make sure it is worth it. I strongly recommend you to use React’s Performance Tools to check the number of wasted cycles before and after using shouldComponentUpdate. It has a very simple usage:2. setState updates the local state asynchronouslyYou should think of setState as a request rather than an immediate command. It is not guaranteed that the…

I wish I knew these before diving into React – OpsGenie Engineering