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…
Continue reading “Understanding React — Component life-cycle – Bartosz Szczeciński – Medium”

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

  • 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 props passed, no matter if the prop value has changed or not since previous re-render phase.This function is ideal if you have a component whose parts of state are depending on props passed from parent component as calling this.setState here will not cause an extra render call.Please keep in mind that due to the fact that the function is called with all props, even those that did not change it is expected the developers implement a check to determine if the actual value has changed, for { if(nextProps.myProp !
  • == 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 is not recommended to use any side-effect causing operations here.DODON’Tcause any side effects (AJAX calls nextState, nextContext)By default, all class based Components will re-render themselves whenever the props they receiver, their state or context changes.
  • == 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 to the above rule is updating the state based on some DOM property which can be only computed once a component has re-rendered (e.g. position / dimensions of some DOM nodes).
  • 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 errors happening in any of the child components.With this addition you can make your parent-element handle the error by — for example — setting the error info in state and returning appropriate message in its render, or logging to reporting system, errorInfo) { this.setState({ error: errorString }); { if(this.state.error) return ShowErrorMessage error={this.state.error} / return ( // render normal component output );}When an error happens, the function will be called message of the errorerrorInfo — an object with a single field componentStack which represent the stack trace back to where the error occured, e.g.:in Thrower in div (created by App) in AppcomponentDidMountThis function will be called only once in the whole life-cycle of a given component and it being called signalizes that the component — and all its sub-components — rendered properly.Since this function is guaranteed to be called only once it is a perfect candidate for performing any side-effect causing operations such as AJAX requests.DOcause side effects (AJAX calls etc.)DON’Tcall this.setState as it will result in a re-renderAn exception to the above rule is updating the state based on some DOM property which can be only computed once a component has re-rendered (e.g. position / dimensions of some DOM nodes).
  • 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 / remove when no longer needed.DOremove any timers or listeners created in lifespan of the componentDON’Tcall this.setState, start new listeners or timersComponent cyclesThere are multiple reasons a component might re-render, and in each of them different functions are called allowing the developer to update certain parts of the Component.Component creationThe first cycle is the creation for component, which usually happens the first time a component is encountered in the parsed JSX tree:Component re-rendering due to re-rendering of the parent componentComponent re-rendering due to internal change (e.g. a call to this.setState())Component re-rendering due to call to this.forceUpdateComponent re-rendering due to catching an errorIntroduced in React 16 as “ErrorBoundaries”.

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…
Continue reading “Understanding React — Component life-cycle – Bartosz Szczeciński – Medium”