Understanding React — Component life-cycle – Bartosz Szczeciński – Medium

Understanding #ReactJS: Component life-cycle

  • DOupdate state via this.setStateperform last minute optimizationcause side-effects (AJAX calls etc.) in case of server-side-rendering onlyDON’Tcause any side effects (AJAX calls etc.) on client function will be called in each update life-cycle caused by changes to props (parent component re-rendering) and will be passed an object map of all the…
  • == this.props.myProps) { // nextProps.myProp has a different value than our current prop // so we can perform some calculations based on the new value }}Due to the fact that with React Fiber (post 16 beta) this function might be called multiple times before the renderfunction is actually called it…
  • == this.props.myProp) { // this.props.myProp has a different value // we can perform any operations that would // need the new value and/or cause side-effects // like AJAX calls with the new value – this.props.myProp }}DOcause side effects (AJAX calls etc.)DON’Tcall this.setState as it will result in a re-renderAn exception…
  • Please take extra care to prevent against updating if the value did not in fact change as it might result in a render errorInfo)A new addition in React 16 — this life-cycle method is special in way that it can react to events happening in the child component, specifically to any uncaught…
  • Please take extra care to prevent against updating if the value did not in fact change as it might result in a render loop.componentWillUnmountUse this function to “clean up” after the component if it takes advantage of timers (setTimeout, setInterval), opens sockets or performs any operations we need to close…

React provides developers with many methods or “hooks” that are called during the life-cycle of an component, which allows us to update the UI and application state. Knowing when to use which of them…

Understanding React — Component life-cycleReact provides developers with many methods or “hooks” that are called during the life-cycle of an component, which allows us to update the UI and application state. Knowing when to use which of them is crucial to properly understanding how to work with React.constructorconstructors are the basic of OOP — this is a special function that will get called whenever a new object is created. It’s very important to call a special function super in cases where our class extends any other class that also has a defined constructor. Calling this special function will call the constructor of our parent class and allow it to initialize itself. This is why we have access to this.props only after we’ve initially called super.As mentioned, constructors are perfect for setting up our Component — create any fields (variables starting with this.) or initialize state based on props received.This is also the only place where you are expected to change / set the state by directly overwriting the this.state fields. In all other instances remember to use this.setStateDOset initial stateif not using class properties syntax — prepare all class fields and bind functions that will be passed as callbacksDON’Tcause any side effects (AJAX calls etc.)componentWillMountThis is a somehow special case — componentWillMount does not differ much from constructor – it is also called once only in the initial mounting life-cycle. Historically there were some reasons to use componentWillMountover constructor see this react-redux issue but please keep in mind that the practice described there is since deprecated.Many will be tempted to…

Understanding React — Component life-cycle – Bartosz Szczeciński – Medium