A guide to React Native life cycle hooks
Tags: reactnative, lifecycle, hooks
Published: 2020-03-26 18:04:26

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors is-withLeadingImage" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="725c" class="section section--body section--first section--last" ><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="b150" class="graf graf--p graf-after--figure"  style="">React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI using declarative components.</p><p name="05ce" class="graf graf--p graf-after--h3"  style="">React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.</p><p name="7fee" class="graf graf--p graf-after--p"  style="">Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, not webviews, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.</p><p name="9d66" class="graf graf--p graf-after--p"  style="">React Native currently supports both iOS and Android and has the potential to expand to future platforms as well. In this blog, we’ll cover both iOS and Android. The vast majority of the code we write will be cross-platform. And yes: you can really use React Native to build production-ready mobile applications! Some example: <a href="http://bit.ly/1YipO7A"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Facebook</a>, <a href="http://bit.ly/1PPEiZH"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Palantir</a>, and <a href="http://bit.ly/1PPEjNg"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">TaskRabbit</a> are already using it in production for user-facing applications.</p><p name="7ef1" class="graf graf--p graf-after--p"  style="">When developing in React Native, every Component follows a cycle from when it’s created and mounted on the DOM to when it is unmounted and destroyed. This is what we refer to as the Component lifecycle.</p><p name="0c52" class="graf graf--p graf-after--p"  style="">React Native provides hooks, methods that get called automatically at each point in the lifecycle, that give you good control of what happens at the point it is invoked. A good understanding of these hooks will give you the power to effectively control and manipulate what goes on in a component throughout its lifetime.</p><p name="c3cb" class="graf graf--p graf-after--p"  style="">Our lifecycle is broadly categorized into three parts: <em class="markup--em markup--p-em">Mounting</em>, <em class="markup--em markup--p-em">Updating</em> and <em class="markup--em markup--p-em">Unmounting</em>.</p><figure tabindex="0" contenteditable="false" name="f506" class="graf graf--figure graf-after--p"  style=""><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 383px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.7%;"></div><img class="graf-image" data-image-id="1*XJBsrYIgT8Bu4SFUZowDgA.jpeg" data-width="875" data-height="479" src="https://cdn-images-1.medium.com/max/600/1*XJBsrYIgT8Bu4SFUZowDgA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">New Lifecycle Hooks</figcaption></figure><h3 name="2b68" class="graf graf--h3 graf-after--figure"  style="">Component cycles</h3><p name="e62c" class="graf graf--p graf-after--h3"  style="">There 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.</p><p name="d3f6" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">Component creation</strong></p><p name="e0b2" class="graf graf--p graf-after--p is-selected"  style="">The first cycle is the creation for component, which usually happens the first time a component is encountered in the parsed JSX tree:</p><ol class="postList"><li name="37a3" class="graf graf--li graf-after--p"  style="">Constructor</li><li name="bce1" class="graf graf--li graf-after--li"  style="">componentWillMount</li><li name="bc83" class="graf graf--li graf-after--li"  style="">render</li><li name="be1c" class="graf graf--li graf-after--li"  style="">Create All Child Components</li><li name="c2fb" class="graf graf--li graf-after--li"  style="">componentDidMount</li></ol><p name="df62" class="graf graf--p graf-after--li"  style=""><strong class="markup--strong markup--p-strong">Component re-rendering due to re-rendering of the parent component / Component re-rendering due to internal change</strong></p><ol class="postList"><li name="3372" class="graf graf--li graf-after--p"  style="">getDerivedStateFromProps</li><li name="c762" class="graf graf--li graf-after--li"  style="">shouldComponentUpdate&nbsp;:&#8202;—&#8202;if return yes goto step 3 else stop here</li><li name="6e31" class="graf graf--li graf-after--li"  style="">getSnapShotBeforeUpdate</li><li name="b396" class="graf graf--li graf-after--li"  style="">Rerender All Child Components WIth new Props</li><li name="82ad" class="graf graf--li graf-after--li"  style="">componentDidUpdate</li></ol><p name="be4e" class="graf graf--p graf-after--li"  style=""><strong class="markup--strong markup--p-strong">Component re-rendering due to call to </strong><code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">this.forceUpdate</strong></code></p><ol class="postList"><li name="b08f" class="graf graf--li graf-after--p"  style="">getDerivedStateFromProps</li><li name="ff82" class="graf graf--li graf-after--li"  style="">getSnapShotBeforeUpdate</li><li name="2ec5" class="graf graf--li graf-after--li"  style="">Rerender All Child Components WIth new Props</li><li name="ebda" class="graf graf--li graf-after--li"  style="">componentDidUpdate</li></ol><p name="da76" class="graf graf--p graf-after--li"  style=""><strong class="markup--strong markup--p-strong">Component re-rendering due to catching an error</strong></p><p name="3912" class="graf graf--p graf-after--p"  style="">Introduced in React 16 as “ErrorBoundaries”. A component can define a special layer which can catch errors and provide a new life-cycle method&#8202;—&#8202;<code class="markup--code markup--p-code">componentDidCatch</code> - which allows developers to provide self-repair actions for recovery or graceful handling of errors.</p><ol class="postList"><li name="a512" class="graf graf--li graf-after--p"  style="">render If is populate any error move to step 2 else step 3</li><li name="4b61" class="graf graf--li graf-after--li"  style="">Show error data</li><li name="bbaf" class="graf graf--li graf-after--li"  style="">Send new props to all child data</li><li name="36ba" class="graf graf--li graf-after--li"  style="">Thrown error in any life cycle method</li><li name="7a25" class="graf graf--li graf-after--li"  style="">Parent componentDidCatch()</li><li name="6dbc" class="graf graf--li graf-after--li"  style="">render()</li></ol><h3 name="d0d0" class="graf graf--h3 graf-after--li"  style="">constructor</h3><p name="eef8" class="graf graf--p graf-after--h3"  style="">constructors are the basic of OOP&#8202;—&#8202;this is a special function that will get called whenever a new object is created. It’s very important to call a special function <code class="markup--code markup--p-code">super</code> 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 <code class="markup--code markup--p-code">this.props</code> only after we’ve initially called <code class="markup--code markup--p-code">super</code>.</p><p name="6ffb" class="graf graf--p graf-after--p"  style="">As mentioned, constructors are perfect for setting up our Component&#8202;—&#8202;create any fields (variables starting with <code class="markup--code markup--p-code">this.</code>) or initialize state based on props received.</p><p name="9b9d" class="graf graf--p graf-after--p"  style="">This is also the only place where you are expected to change/set the state by directly overwriting the <code class="markup--code markup--p-code">this.state</code> fields. In all other instances remember to use <code class="markup--code markup--p-code">this.setState</code></p><p name="f546" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">DO</strong></p><ul class="postList"><li name="fb64" class="graf graf--li graf-after--p"  style="">set initial state</li><li name="6903" class="graf graf--li graf-after--li"  style="">if not using class properties syntax&#8202;—&#8202;prepare all class fields and bind functions that will be passed as callbacks</li></ul><p name="1c87" class="graf graf--p graf-after--li"  style=""><strong class="markup--strong markup--p-strong">DON’T</strong></p><ul class="postList"><li name="52c8" class="graf graf--li graf-after--p"  style="">cause any side effects (AJAX calls etc.)</li></ul><h3 name="87ef" class="graf graf--h3 graf-after--li"  style="">deprecated&#8202;—&#8202;componentWillMount</h3><p name="ae59" class="graf graf--p graf-after--h3"  style="">This is a somehow special case&#8202;—&#8202;<code class="markup--code markup--p-code">componentWillMount</code> 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 <code class="markup--code markup--p-code">componentWillMount</code>over <code class="markup--code markup--p-code">constructor</code> <a href="https://github.com/reactjs/react-redux/issues/129"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">see this react-redux issue</a> but please keep in mind that the practice described there is since deprecated.</p><p name="5cca" class="graf graf--p graf-after--p"  style="">Many will be tempted to use this function in order to send a request to fetch data and expect the data to be available before the initial render is ready. This is not the case&#8202;—&#8202;while the request will be initialized before the render, it will not be able to finish before the render is called.</p><p name="7659" class="graf graf--p graf-after--p"  style="">Additionally, with the changes to React Fiber (post-React 16 beta release) this function might end up being called multiple times before the initial <code class="markup--code markup--p-code">render</code> is called so might result in triggering multiple side-effects. Due to this fact it is <strong class="markup--strong markup--p-strong">not</strong> recommended to use this function for any side-effect causing operations.</p><p name="9b43" class="graf graf--p graf-after--p"  style="">It is important to note that this function is called when using server-side-rendering while it is counterpart&#8202;—&#8202;<code class="markup--code markup--p-code">componentDidMount</code> will not be called on the server but on the client in such case. So if some side-effect <em class="markup--em markup--p-em">is desired</em> on the server part this function should be used as an exception.</p><p name="e3cb" class="graf graf--p graf-after--p"  style="">A <code class="markup--code markup--p-code">setState</code> used in this function is “free” and will not trigger a re-render.</p><p name="ece6" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">DO</strong></p><ul class="postList"><li name="35a8" class="graf graf--li graf-after--p"  style="">update state via <code class="markup--code markup--li-code">this.setState</code></li><li name="dd16" class="graf graf--li graf-after--li"  style="">perform last-minute optimization</li><li name="258f" class="graf graf--li graf-after--li"  style="">cause side-effects (AJAX calls etc.) <strong class="markup--strong markup--li-strong">in case of server-side-rendering only</strong></li></ul><p name="c1f4" class="graf graf--p graf-after--li"  style=""><strong class="markup--strong markup--p-strong">DON’T</strong></p><ul class="postList"><li name="06ec" class="graf graf--li graf-after--p"  style="">cause any side effects (AJAX calls etc.) on the client side</li></ul><h3 name="9d4d" class="graf graf--h3 graf-after--li"  style="">deprecated&#8202;—&#8202;componentWillReceiveProps(nextProps) In the latest version of react native app we can use this function as UNSAFE_componentWillReceiveProps(nextProps)</h3><p name="7d52" class="graf graf--p graf-after--h3"  style="">This 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.</p><p name="335a" class="graf graf--p graf-after--p"  style="">This function is ideal if you have a component whose parts of the state are depending on props passed from parent component as calling <code class="markup--code markup--p-code">this.setState</code> here will not cause an extra render call.</p><p name="98a7" class="graf graf--p graf-after--p"  style="">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 example:</p><pre name="305f" class="graf graf--pre graf-after--p"  style="">componentWillReceiveProps(nextProps) {<br>  <strong class="markup--strong markup--pre-strong">if</strong>(nextProps.myProp !== <strong class="markup--strong markup--pre-strong">this</strong>.props.myProps) {<br>    // nextProps.myProp has a different value than our current prop<br>    // so we can perform some calculations based on the new value<br>  }<br>}</pre><p name="1384" class="graf graf--p graf-after--pre"  style="">Due to the fact that with React Fiber (post 16 beta) this function might be called multiple times before the <code class="markup--code markup--p-code">render</code>function is actually called it is <strong class="markup--strong markup--p-strong">not recommended</strong> to use any side-effect causing operations here.</p><p name="be3a" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">DO</strong></p><ul class="postList"><li name="a145" class="graf graf--li graf-after--p"  style="">sync state to props</li></ul><p name="dbe0" class="graf graf--p graf-after--li"  style=""><strong class="markup--strong markup--p-strong">DON’T</strong></p><ul class="postList"><li name="e06a" class="graf graf--li graf-after--p"  style="">cause any side effects (AJAX calls etc.)</li></ul><h3 name="b2f7" class="graf graf--h3 graf-after--li"  style="">static getDerivedStateFromProps(nextProps, prevState)</h3><p name="888e" class="graf graf--p graf-after--h3"  style="">The new function which main responsibility is ensuring that the state and props are in sync for when it is required. Its main job is replacing <em class="markup--em markup--p-em">componentWillReceiveProps</em></p><p name="e26f" class="graf graf--p graf-after--p"  style=""><code class="markup--code markup--p-code">gDSFP</code> is a static function and as such has no access to <code class="markup--code markup--p-code">this</code>&#8202;—&#8202;you are instead expected to return an object, which will be merged into the future state of the component (exactly like working with <code class="markup--code markup--p-code">setState</code>!)</p><p name="5570" class="graf graf--p graf-after--p"  style="">The function is used when a component is updated but also when it is mounted, right after the <code class="markup--code markup--p-code">constructor</code> was called, so you no longer need to use constructor or class property form of state if you want to set initial state from props.</p><p name="6bdb" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">DO</strong></p><ul class="postList"><li name="8afe" class="graf graf--li graf-after--p"  style="">sync state to props</li></ul><p name="64e9" class="graf graf--p graf-after--li"  style=""><strong class="markup--strong markup--p-strong">DON’T</strong></p><ul class="postList"><li name="6bee" class="graf graf--li graf-after--p"  style="">cause any side effects (AJAX calls etc.)</li></ul><h3 name="b996" class="graf graf--h3 graf-after--li"  style="">shouldComponentUpdate(nextProps, nextState, nextContext)</h3><p name="ecf8" class="graf graf--p graf-after--h3"  style="">By default, all class-based Components will re-render themselves whenever the props they receiver, their state or context changes. If re-rendering the component is computation heavy (e.g. generating a chart) or is not recommended for some performance reasons, the developer is given access to a special function which will be called in the update cycle.</p><p name="5e6d" class="graf graf--p graf-after--p"  style="">This function will be called internally with next values of props, state, and object. The developer can use those to verify that the change requires a re-render or not and return <code class="markup--code markup--p-code">false</code> to prevent the re-rendering from happening. In other cases, you are expected to return <code class="markup--code markup--p-code">true</code>.</p><p name="5f05" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">DO</strong></p><ul class="postList"><li name="5c8b" class="graf graf--li graf-after--p"  style="">use for increasing performance of poor performing Components</li></ul><p name="78c9" class="graf graf--p graf-after--li"  style=""><strong class="markup--strong markup--p-strong">DON’T</strong></p><ul class="postList"><li name="b0cb" class="graf graf--li graf-after--p"  style="">cause any side effects (AJAX calls etc.)</li><li name="f2ee" class="graf graf--li graf-after--li"  style="">call <code class="markup--code markup--li-code">this.setState</code></li></ul><h3 name="523b" class="graf graf--h3 graf-after--li"  style="">deprecated&#8202;—&#8202;componentWillUpdate(nextProps, nextState) In the latest version of react-native we can this functions as UNSAFE_componentWillUpdate(nextProps, nextState)</h3><p name="1392" class="graf graf--p graf-after--h3"  style="">If the <code class="markup--code markup--p-code">shouldComponentUpdate</code> function is not implemented, or it decided that the component should update in this render cycle, another life-cycle function will be called. This function is commonly used to perform state and props synchronization for when parts of your state are based on props.</p><p name="5722" class="graf graf--p graf-after--p"  style="">In cases where <code class="markup--code markup--p-code">shouldComponentUpdate</code> is implemented, this function can be used instead of <code class="markup--code markup--p-code">componentWillReceiveProps</code> as it will be called only when the component will actually be re-rendered.</p><p name="cf0f" class="graf graf--p graf-after--p"  style="">Similarly to all other <code class="markup--code markup--p-code">componentWill*</code> functions, this function might end up called multiple times before <code class="markup--code markup--p-code">render</code> so it <strong class="markup--strong markup--p-strong">not</strong> advised to perform side-effects causing operations here.</p><p name="8726" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">DO</strong></p><ul class="postList"><li name="f4ea" class="graf graf--li graf-after--p"  style="">synchronize state to props</li></ul><p name="48eb" class="graf graf--p graf-after--li"  style=""><strong class="markup--strong markup--p-strong">DON’T</strong></p><ul class="postList"><li name="3098" class="graf graf--li graf-after--p"  style="">cause any side effects (AJAX calls etc.)</li></ul><h3 name="500b" class="graf graf--h3 graf-after--li"  style="">getSnapshotBeforeUpdate(prevProps, prevState)</h3><p name="5111" class="graf graf--p graf-after--h3"  style="">Other of the two new functions, invoked in the so-called “pre-commit phase”, right before the changes from VDOM are to be reflected in the DOM.</p><p name="31d6" class="graf graf--p graf-after--p"  style="">It is used mostly if you need to read the current DOM state, for example, you have an application in which new messages are added to the top of the screen&#8202;—&#8202;if a user scrolled down, and a new message is added the screen could move and make the UI harder to use. By adding <code class="markup--code markup--p-code">getSnapshotBeforeUpdate</code> you can calculate current scroll position and maintain it through the DOM update.</p><p name="6eca" class="graf graf--p graf-after--p"  style="">Even though the function is not static, it is recommended to return the value, not update the component. The returned value will be passed to <code class="markup--code markup--p-code">componentDidUpdate</code> as the 3rd parameter</p><p name="8722" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">DO</strong></p><ul class="postList"><li name="2a34" class="graf graf--li graf-after--p"  style="">synchronize state to props</li></ul><p name="71da" class="graf graf--p graf-after--li"  style=""><strong class="markup--strong markup--p-strong">DON’T</strong></p><ul class="postList"><li name="fb1a" class="graf graf--li graf-after--p"  style="">cause any side effects (AJAX calls etc.)</li></ul><h3 name="2110" class="graf graf--h3 graf-after--li"  style="">componentDidUpdate(prevProps, prevState, prevContext)</h3><p name="bb40" class="graf graf--p graf-after--h3"  style="">This function will be called after <code class="markup--code markup--p-code">render</code> is finished in each of the re-render cycles. This means that you can be sure that the component and all its sub-components have properly rendered itself.</p><p name="9720" class="graf graf--p graf-after--p"  style="">Due to the fact that this is the only function that is guaranteed to be called only once in each re-render cycle, it is recommended to use this function for any side-effect causing operations. Similarly to <code class="markup--code markup--p-code">componentWillUpdate</code>and <code class="markup--code markup--p-code">componentWillReceiveProps</code> this function is called with object-maps of <strong class="markup--strong markup--p-strong">previous</strong> props, state, and context, even if no actual change happened to those values. Because of that developers are expected to manually check if given value changed and only then perform various update operations:</p><pre name="d265" class="graf graf--pre graf-after--p"  style="">componentDidUpdate(prevProps) {<br>  if(prevProps.myProps !== this.props.myProp) {<br>    // this.props.myProp has a different value<br>    // we can perform any operations that would <br>    // need the new value <strong class="markup--strong markup--pre-strong">and</strong>/<strong class="markup--strong markup--pre-strong">or</strong> cause side-effects <br>    // like AJAX calls with the new value - this.props.myProp<br>  }<br>}</pre><p name="4d95" class="graf graf--p graf-after--pre"  style=""><strong class="markup--strong markup--p-strong">DO</strong></p><ul class="postList"><li name="3a6e" class="graf graf--li graf-after--p"  style="">cause side effects (AJAX calls etc.)</li></ul><p name="4652" class="graf graf--p graf-after--li"  style=""><strong class="markup--strong markup--p-strong">DON’T</strong></p><ul class="postList"><li name="7717" class="graf graf--li graf-after--p"  style="">call <code class="markup--code markup--li-code">this.setState</code> as it will result in a re-render</li></ul><p name="b7ca" class="graf graf--p graf-after--li"  style="">An 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.</p><h3 name="bcfc" class="graf graf--h3 graf-after--p"  style="">componentDidCatch(errorString, errorInfo)</h3><p name="2312" class="graf graf--p graf-after--h3"  style="">A new addition in React 16&#8202;—&#8202;this life-cycle method is special in the way that it can react to events happening in the child component, specifically to any uncaught errors happening in any of the child components.</p><p name="df51" class="graf graf--p graf-after--p"  style="">With this addition you can make your parent-element handle the error by&#8202;—&#8202;for example&#8202;—&#8202;setting the error info in state and returning appropriate message in its render, or logging to the reporting system, e.g.:</p><pre name="49aa" class="graf graf--pre graf-after--p"  style="">componentDidCatch(errorString, errorInfo) {<br>  this.<strong class="markup--strong markup--pre-strong">setState</strong>({<br>    <strong class="markup--strong markup--pre-strong">error</strong>: errorString<br>  });<br>  ErrorLoggingTool.<strong class="markup--strong markup--pre-strong">log</strong>(errorInfo);<br>}<strong class="markup--strong markup--pre-strong">render</strong>() {<br>  <strong class="markup--strong markup--pre-strong">if</strong>(this.state.<strong class="markup--strong markup--pre-strong">error</strong>) <strong class="markup--strong markup--pre-strong">return</strong> &lt;ShowErrorMessage <strong class="markup--strong markup--pre-strong">error</strong>={this.state.<strong class="markup--strong markup--pre-strong">error</strong>} /&gt;<br>  <strong class="markup--strong markup--pre-strong">return</strong> (<br>    // render normal component output<br>  );<br>}</pre><p name="d9f2" class="graf graf--p graf-after--pre"  style="">When an error happens, the function will be called with:</p><ul class="postList"><li name="dea8" class="graf graf--li graf-after--p"  style="">errorString&#8202;—&#8202;the&nbsp;<code class="markup--code markup--li-code">.toString()</code> the message of the error</li><li name="92f2" class="graf graf--li graf-after--li"  style="">errorInfo&#8202;—&#8202;an object with a single field <code class="markup--code markup--li-code">componentStack</code> which represent the stack trace back to where the error occurred, e.g.:</li></ul><pre name="a744" class="graf graf--pre graf-after--li"  style="">in Thrower<br>    in div (created <strong class="markup--strong markup--pre-strong">by</strong> App)<br>    in App</pre><h3 name="7b70" class="graf graf--h3 graf-after--pre"  style="">componentDidMount</h3><p name="e374" class="graf graf--p graf-after--h3"  style="">This function will be called only once in the whole life-cycle of a given component and it being called signalizes that the component&#8202;—&#8202;and all its sub-components&#8202;—&#8202;rendered properly.</p><p name="b7b3" class="graf graf--p graf-after--p"  style="">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.</p><p name="4809" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">DO</strong></p><ul class="postList"><li name="1207" class="graf graf--li graf-after--p"  style="">cause side effects (AJAX calls etc.)</li></ul><p name="6c7f" class="graf graf--p graf-after--li"  style=""><strong class="markup--strong markup--p-strong">DON’T</strong></p><ul class="postList"><li name="3b6d" class="graf graf--li graf-after--p"  style="">call <code class="markup--code markup--li-code">this.setState</code> as it will result in a re-render</li></ul><p name="20bb" class="graf graf--p graf-after--li"  style="">An 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.</p><h3 name="0c12" class="graf graf--h3 graf-after--p"  style="">componentWillUnmount</h3><p name="458f" class="graf graf--p graf-after--h3"  style="">Use this function to “clean up” after the component if it takes advantage of timers (<code class="markup--code markup--p-code">setTimeout</code>, <code class="markup--code markup--p-code">setInterval</code>), opens sockets or performs any operations we need to close/remove when no longer needed.</p><p name="a7fd" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">DO</strong></p><ul class="postList"><li name="05ac" class="graf graf--li graf-after--p"  style="">remove any timers or listeners created in the lifespan of the component</li></ul><p name="184a" class="graf graf--p graf-after--li"  style=""><strong class="markup--strong markup--p-strong">DON’T</strong></p><ul class="postList"><li name="6c88" class="graf graf--li graf-after--p"  style="">call <code class="markup--code markup--li-code">this.setState</code>, start new listeners or timers</li></ul><h3 name="02b8" class="graf graf--h3 graf-after--li"  style="">Conclusion</h3><p name="c286" class="graf graf--p graf-after--h3 graf--trailing"  style="">In this post, you learned about React js and React Native life cycle hooks.</p></div></div></section></div></article></main>