text: webpackJsonp([0x6f86d85e6f37],{836:function(n,s){n.exports={data:{markdownRemark:{html:'<p>Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance. Nevertheless, there are several ways you can speed up your React application.</p>\n<h2 id="use-the-production-build"><a href="#use-the-production-build" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Use the Production Build</h2>\n<p>If you’re benchmarking or experiencing performance problems in your React apps, make sure you’re testing with the minified production build.</p>\n<p>By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app.</p>\n<p>If you aren’t sure whether your build process is set up correctly, you can check it by installing <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi">React Developer Tools for Chrome</a>. If you visit a site with React in production mode, the icon will have a dark background:</p>\n\n  <a class="gatsby-resp-image-link" href="/static/devtools-prod-d0f767f80866431ccdec18f200ca58f1-1e9b4.png" style="display: block" target="_blank" rel="noopener">\n  \n  <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; ; max-width: 600px; margin-left: auto; margin-right: auto;">\n    <span class="gatsby-resp-image-background-image" style="padding-bottom: 21.16666666666667%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAIAAAABPYjBAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAtElEQVQI142ISwqDMABEvf+Fumyh4C5p1ChtoUZj/EUEG/MxUbHppus+GObNBPu+O+fWP9jc5qzTxkghTpcriJOg73uttZJSKy2l7x/zN/OslBTvt/dpmayzq1utXVo+vHIShGGYJBhC+Lg/bxAlcYxxmqYYAID9D2CWZRFCKEJnehFGWLMopY7joJQGpCCM1U3TMMZITmqvrafzs++6qmL+4cNQVbTICee8bdqyLLU24zh+AGg72y61QftkAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;">\n      <img class="gatsby-resp-image-image" style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;" alt="React DevTools on a website with production version of React" title="" src="/static/devtools-prod-d0f767f80866431ccdec18f200ca58f1-1e9b4.png" srcset="/static/devtools-prod-d0f767f80866431ccdec18f200ca58f1-1cd08.png 210w,\n/static/devtools-prod-d0f767f80866431ccdec18f200ca58f1-9b07a.png 420w,\n/static/devtools-prod-d0f767f80866431ccdec18f200ca58f1-1e9b4.png 600w" sizes="(max-width: 600px) 100vw, 600px">\n    </span>\n  </span>\n  \n  </a>\n    \n<p>If you visit a site with React in development mode, the icon will have a red background:</p>\n\n  <a class="gatsby-resp-image-link" href="/static/devtools-dev-e434ce2f7e64f63e597edf03f4465694-1e9b4.png" style="display: block" target="_blank" rel="noopener">\n  \n  <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; ; max-width: 600px; margin-left: auto; margin-right: auto;">\n    <span class="gatsby-resp-image-background-image" style="padding-bottom: 33.33333333333333%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAIAAACHqfpvAAAACXBIWXMAABYlAAAWJQFJUiTwAAABI0lEQVQY04WQ3XKCMBCFef+X6k2tkAIGRa1Ox5kOGiCAkt81gtINM73uudicTTaz324w/qfnn9Bi6u739nr9eX8rDvvAzLLWAlitNXqttFJq9to/WOsLAB7OPMfHNE3DOJqm7rsuSJKURITSLM/zMAw3m3WWZXEcRxFZpWmSovxJSPx9WHXNBcBJIWeQMbgwxmteMnY+nxl63vCm5byu8bKsGCs5523TFkXBWFVzXlXV6XQCgGEYAqSaCT2b0lIpibTaeGYAP5EUAiP4RAsh0HjyYXDOBYvFB11RhM2zr3BB42hN413yucvpcUOPOFG4XOJoOAAhZLfdK6mmWb7zvBvci9ES5A1kb2+duXVa9La/GiwFa6XE9gIB8cPr9cLo1+7cL+jygk7PcoV8AAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;">\n      <img class="gatsby-resp-image-image" style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;" alt="React DevTools on a website with development version of React" title="" src="/static/devtools-dev-e434ce2f7e64f63e597edf03f4465694-1e9b4.png" srcset="/static/devtools-dev-e434ce2f7e64f63e597edf03f4465694-1cd08.png 210w,\n/static/devtools-dev-e434ce2f7e64f63e597edf03f4465694-9b07a.png 420w,\n/static/devtools-dev-e434ce2f7e64f63e597edf03f4465694-1e9b4.png 600w" sizes="(max-width: 600px) 100vw, 600px">\n    </span>\n  </span>\n  \n  </a>\n    \n<p>It is expected that you use the development mode when working on your app, and the production mode when deploying your app to the users.</p>\n<p>You can find instructions for building your app for production below.</p>\n<h3 id="create-react-app"><a href="#create-react-app" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Create React App</h3>\n<p>If your project is built with <a href="https://github.com/facebookincubator/create-react-app">Create React App</a>, run:</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-text"><code class="gatsby-code-text">npm run build</code></pre>\n      </div>\n<p>This will create a production build of your app in the <code class="gatsby-code-text">build/</code> folder of your project.</p>\n<p>Remember that this is only necessary before deploying to production. For normal development, use <code class="gatsby-code-text">npm start</code>.</p>\n<h3 id="single-file-builds"><a href="#single-file-builds" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Single-File Builds</h3>\n<p>We offer production-ready versions of React and React DOM as single files:</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-html"><code class="gatsby-code-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/react@16/umd/react.production.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/react-dom@16/umd/react-dom.production.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>\n      </div>\n<p>Remember that only React files ending with <code class="gatsby-code-text">.production.min.js</code> are suitable for production.</p>\n<h3 id="brunch"><a href="#brunch" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Brunch</h3>\n<p>For the most efficient Brunch production build, install the <a href="https://github.com/brunch/uglify-js-brunch"><code class="gatsby-code-text">uglify-js-brunch</code></a> plugin:</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-text"><code class="gatsby-code-text"># If you use npm\nnpm install --save-dev uglify-js-brunch\n\n# If you use Yarn\nyarn add --dev uglify-js-brunch</code></pre>\n      </div>\n<p>Then, to create a production build, add the <code class="gatsby-code-text">-p</code> flag to the <code class="gatsby-code-text">build</code> command:</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-text"><code class="gatsby-code-text">brunch build -p</code></pre>\n      </div>\n<p>Remember that you only need to do this for production builds. You shouldn’t pass the <code class="gatsby-code-text">-p</code> flag or apply this plugin in development, because it will hide useful React warnings and make the builds much slower.</p>\n<h3 id="browserify"><a href="#browserify" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Browserify</h3>\n<p>For the most efficient Browserify production build, install a few plugins:</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-text"><code class="gatsby-code-text"># If you use npm\nnpm install --save-dev envify uglify-js uglifyify \n\n# If you use Yarn\nyarn add --dev envify uglify-js uglifyify </code></pre>\n      </div>\n<p>To create a production build, make sure that you add these transforms <strong>(the order matters)</strong>:</p>\n<ul>\n<li>The <a href="https://github.com/hughsk/envify"><code class="gatsby-code-text">envify</code></a> transform ensures the right build environment is set. Make it global (<code class="gatsby-code-text">-g</code>).</li>\n<li>The <a href="https://github.com/hughsk/uglifyify"><code class="gatsby-code-text">uglifyify</code></a> transform removes development imports. Make it global too (<code class="gatsby-code-text">-g</code>).</li>\n<li>Finally, the resulting bundle is piped to <a href="https://github.com/mishoo/UglifyJS2"><code class="gatsby-code-text">uglify-js</code></a> for mangling (<a href="https://github.com/hughsk/uglifyify#motivationusage">read why</a>).</li>\n</ul>\n<p>For example:</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-text"><code class="gatsby-code-text">browserify ./index.js \\\n  -g [ envify --NODE_ENV production ] \\\n  -g uglifyify \\\n  | uglifyjs --compress --mangle &gt; ./bundle.js</code></pre>\n      </div>\n<blockquote>\n<p><strong>Note:</strong></p>\n<p>The package name is <code class="gatsby-code-text">uglify-js</code>, but the binary it provides is called <code class="gatsby-code-text">uglifyjs</code>.<br>\nThis is not a typo.</p>\n</blockquote>\n<p>Remember that you only need to do this for production builds. You shouldn’t apply these plugins in development because they will hide useful React warnings, and make the builds much slower.</p>\n<h3 id="rollup"><a href="#rollup" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Rollup</h3>\n<p>For the most efficient Rollup production build, install a few plugins:</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-text"><code class="gatsby-code-text"># If you use npm\nnpm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-uglify \n\n# If you use Yarn\nyarn add --dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-uglify </code></pre>\n      </div>\n<p>To create a production build, make sure that you add these plugins <strong>(the order matters)</strong>:</p>\n<ul>\n<li>The <a href="https://github.com/rollup/rollup-plugin-replace"><code class="gatsby-code-text">replace</code></a> plugin ensures the right build environment is set.</li>\n<li>The <a href="https://github.com/rollup/rollup-plugin-commonjs"><code class="gatsby-code-text">commonjs</code></a> plugin provides support for CommonJS in Rollup.</li>\n<li>The <a href="https://github.com/TrySound/rollup-plugin-uglify"><code class="gatsby-code-text">uglify</code></a> plugin compresses and mangles the final bundle.</li>\n</ul>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-jsx"><code class="gatsby-code-jsx">plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n  <span class="token comment">// ...</span>\n  <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'rollup-plugin-replace\'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n    <span class="token string">\'process.env.NODE_ENV\'</span><span class="token punctuation">:</span> JSON<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token string">\'production\'</span><span class="token punctuation">)</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'rollup-plugin-commonjs\'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'rollup-plugin-uglify\'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token comment">// ...</span>\n<span class="token punctuation">]</span></code></pre>\n      </div>\n<p>For a complete setup example <a href="https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0">see this gist</a>.</p>\n<p>Remember that you only need to do this for production builds. You shouldn’t apply the <code class="gatsby-code-text">uglify</code> plugin or the <code class="gatsby-code-text">replace</code> plugin with <code class="gatsby-code-text">&#39;production&#39;</code> value in development because they will hide useful React warnings, and make the builds much slower.</p>\n<h3 id="webpack"><a href="#webpack" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>webpack</h3>\n<blockquote>\n<p><strong>Note:</strong></p>\n<p>If you’re using Create React App, please follow <a href="#create-react-app">the instructions above</a>.<br>\nThis section is only relevant if you configure webpack directly.</p>\n</blockquote>\n<p>For the most efficient webpack production build, make sure to include these plugins in your production configuration:</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>DefinePlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n  <span class="token string">\'process.env.NODE_ENV\'</span><span class="token punctuation">:</span> JSON<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token string">\'production\'</span><span class="token punctuation">)</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n<span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>optimize<span class="token punctuation">.</span>UglifyJsPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></pre>\n      </div>\n<p>You can learn more about this in <a href="https://webpack.js.org/guides/production-build/">webpack documentation</a>.</p>\n<p>Remember that you only need to do this for production builds. You shouldn’t apply <code class="gatsby-code-text">UglifyJsPlugin</code> or <code class="gatsby-code-text">DefinePlugin</code> with <code class="gatsby-code-text">&#39;production&#39;</code> value in development because they will hide useful React warnings, and make the builds much slower.</p>\n<h2 id="profiling-components-with-the-chrome-performance-tab"><a href="#profiling-components-with-the-chrome-performance-tab" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Profiling Components with the Chrome Performance Tab</h2>\n<p>In the <strong>development</strong> mode, you can visualize how components mount, update, and unmount, using the performance tools in supported browsers. For example:</p>\n<center>\n  <a class="gatsby-resp-image-link" href="/static/react-perf-chrome-timeline-64d522b74fb585f1abada9801f85fa9d-dcc89.png" style="display: block" target="_blank" rel="noopener">\n  \n  <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; ; max-width: 651px; margin-left: auto; margin-right: auto;">\n    <span class="gatsby-resp-image-background-image" style="padding-bottom: 35.023041474654384%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAIAAACHqfpvAAAACXBIWXMAAAsSAAALEgHS3X78AAABYUlEQVQY022NeUsCURTF5yMG0aaZSgniMtqCEfQlgoowqCCoRDNIs+gfdVTMJa3JbdRyaROHyXJ0xuc47zVqC0Rw7uHec/lxsPeqmyJ0WT+e8xspwli+wp9ipnZ+QRJHzfP3y3RyPeXAMycm0oEXXeayx/zmXWIDliZhwXgmHzuQxQ+VKefcg0db9+kaQT1D6Gm/vu7V0gEzW7JVLxTF45Gya4wLyoSwvBOaAqFJEBrHel2+Gt1PnGqj9onIkTx3pqLcyrxbVfdrGsFZJowLbKlbcHK32+BmAyTXAGntkFZAboH0LgYhRBCKIAUYX9JmiO0pSLsm7pzJeNSVy2k6toKgAIcSOVFgYY+DQguKvJT34T4tGULP6R3KO0pTm48Rw8v1In23ytWcUg6//mhg6OtACBtuUrfkzdd44VzdqkXZSuijTIB6QuSYbxj+YH/hfiKNwPN0Vuy2ByUQoV/mX/gTU11epAmedTIAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;">\n      <img class="gatsby-resp-image-image" style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;" alt="React components in Chrome timeline" title="" src="/static/react-perf-chrome-timeline-64d522b74fb585f1abada9801f85fa9d-dcc89.png" srcset="/static/react-perf-chrome-timeline-64d522b74fb585f1abada9801f85fa9d-cf87c.png 210w,\n/static/react-perf-chrome-timeline-64d522b74fb585f1abada9801f85fa9d-ba000.png 420w,\n/static/react-perf-chrome-timeline-64d522b74fb585f1abada9801f85fa9d-dcc89.png 651w" sizes="(max-width: 651px) 100vw, 651px">\n    </span>\n  </span>\n  \n  </a>\n    </center>\n<p>To do this in Chrome:</p>\n<ol>\n<li>\n<p>Temporarily <strong>disable all Chrome extensions, especially React DevTools</strong>. They can significantly skew the results!</p>\n</li>\n<li>\n<p>Make sure you’re running the application in the development mode.</p>\n</li>\n<li>\n<p>Open the Chrome DevTools <strong><a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool">Performance</a></strong> tab and press <strong>Record</strong>.</p>\n</li>\n<li>\n<p>Perform the actions you want to profile. Don’t record more than 20 seconds or Chrome might hang.</p>\n</li>\n<li>\n<p>Stop recording.</p>\n</li>\n<li>\n<p>React events will be grouped under the <strong>User Timing</strong> label.</p>\n</li>\n</ol>\n<p>For a more detailed walkthrough, check out <a href="https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad">this article by Ben Schwarz</a>.</p>\n<p>Note that <strong>the numbers are relative so components will render faster in production</strong>. Still, this should help you realize when unrelated UI gets updated by mistake, and how deep and how often your UI updates occur.</p>\n<p>Currently Chrome, Edge, and IE are the only browsers supporting this feature, but we use the standard <a href="https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API">User Timing API</a> so we expect more browsers to add support for it.</p>\n<h2 id="virtualize-long-lists"><a href="#virtualize-long-lists" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Virtualize Long Lists</h2>\n<p>If your application renders long lists of data (hundreds or thousands of rows), we recommended using a technique known as “windowing”. This technique only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created.</p>\n<p><a href="https://bvaughn.github.io/react-virtualized/">React Virtualized</a> is one popular windowing library. It provides several reusable components for displaying lists, grids, and tabular data. You can also create your own windowing component, like <a href="https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3">Twitter did</a>, if you want something more tailored to your application’s specific use case.</p>\n<h2 id="avoid-reconciliation"><a href="#avoid-reconciliation" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Avoid Reconciliation</h2>\n<p>React builds and maintains an internal representation of the rendered UI. It includes the React elements you return from your components. This representation lets React avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower than operations on JavaScript objects. Sometimes it is referred to as a “virtual DOM”, but it works the same way on React Native.</p>\n<p>When a component’s props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM.</p>\n<p>You can now visualize these re-renders of the virtual DOM with React DevTools:</p>\n<ul>\n<li><a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en">Chrome Browser Extension</a></li>\n<li><a href="https://addons.mozilla.org/en-GB/firefox/addon/react-devtools/">Firefox Browser Extension</a></li>\n<li><a href="https://www.npmjs.com/package/react-devtools">Standalone Node Package</a></li>\n</ul>\n<p>In the developer console select the <strong>Highlight Updates</strong> option in the <strong>React</strong> tab:</p>\n<center>\n  <a class="gatsby-resp-image-link" href="/static/devtools-highlight-updates-97eda4825de476af4515435a0c36ca78-a62e3.png" style="display: block" target="_blank" rel="noopener">\n  \n  <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; ; max-width: 840px; margin-left: auto; margin-right: auto;">\n    <span class="gatsby-resp-image-background-image" style="padding-bottom: 11.338289962825279%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAIAAADXZGvcAAAACXBIWXMAAAsSAAALEgHS3X78AAAAdElEQVQI1xWN2woCMQxE9/+/ycujiKgoKGLZtEmbbsmmG9f+gHWeBs4cZiilMLOponMSo045AswiRFSr8j9JO0VMieuyYN/kHDZb3O0HzhOOzl+fr/ODLqd4v+Hx8Ak+EAGA976brTUR6cXM+tm6fqtaeI8/WDpqZSOplTAAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;">\n      <img class="gatsby-resp-image-image" style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;" alt="How to enable highlight updates" title="" src="/static/devtools-highlight-updates-97eda4825de476af4515435a0c36ca78-acf85.png" srcset="/static/devtools-highlight-updates-97eda4825de476af4515435a0c36ca78-c1418.png 210w,\n/static/devtools-highlight-updates-97eda4825de476af4515435a0c36ca78-5d5d8.png 420w,\n/static/devtools-highlight-updates-97eda4825de476af4515435a0c36ca78-acf85.png 840w,\n/static/devtools-highlight-updates-97eda4825de476af4515435a0c36ca78-a62e3.png 1076w" sizes="(max-width: 840px) 100vw, 840px">\n    </span>\n  </span>\n  \n  </a>\n    </center>\n<p>Interact with your page and you should see colored borders momentarily appear around any components that have re-rendered. This lets you spot re-renders that were not necessary. You can learn more about this React DevTools feature from this <a href="https://blog.logrocket.com/make-react-fast-again-part-3-highlighting-component-updates-6119e45e6833">blog post</a> from <a href="https://blog.logrocket.com/@edelstein">Ben Edelstein</a>.</p>\n<p>Consider this example:</p>\n<center><img src="/highlight-updates-example-7a42123e91b1b460b1a65605d6ff0d2b.gif" style="max-width:100%; margin-top:20px;" alt="React DevTools Highlight Updates example"></center>\n<p>Note that when we’re entering a second todo, the first todo also flashes on the screen on every keystroke. This means it is being re-rendered by React together with the input. This is sometimes called a “wasted” render. We know it is unnecessary because the first todo content has not changed, but React doesn’t know this.</p>\n<p>Even though React only updates the changed DOM nodes, re-rendering still takes some time. In many cases it’s not a problem, but if the slowdown is noticeable, you can speed all of this up by overriding the lifecycle function <code class="gatsby-code-text">shouldComponentUpdate</code>, which is triggered before the re-rendering process starts. The default implementation of this function returns <code class="gatsby-code-text">true</code>, leaving React to perform the update:</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token function">shouldComponentUpdate</span><span class="token punctuation">(</span>nextProps<span class="token punctuation">,</span> nextState<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>\n      </div>\n<p>If you know that in some situations your component doesn’t need to update, you can return <code class="gatsby-code-text">false</code> from <code class="gatsby-code-text">shouldComponentUpdate</code> instead, to skip the whole rendering process, including calling <code class="gatsby-code-text">render()</code> on this component and below.</p>\n<p>In most cases, instead of writing <code class="gatsby-code-text">shouldComponentUpdate()</code> by hand, you can inherit from <a href="/docs/react-api.html#reactpurecomponent"><code class="gatsby-code-text">React.PureComponent</code></a>. It is equivalent to implementing <code class="gatsby-code-text">shouldComponentUpdate()</code> with a shallow comparison of current and previous props and state.</p>\n<h2 id="shouldcomponentupdate-in-action"><a href="#shouldcomponentupdate-in-action" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>shouldComponentUpdate In Action</h2>\n<p>Here’s a subtree of components. For each one, <code class="gatsby-code-text">SCU</code> indicates what <code class="gatsby-code-text">shouldComponentUpdate</code> returned, and <code class="gatsby-code-text">vDOMEq</code> indicates whether the rendered React elements were equivalent. Finally, the circle’s color indicates whether the component had to be reconciled or not.</p>\n<figure>\n  <a class="gatsby-resp-image-link" href="/static/should-component-update-5ee1bdf4779af06072a17b7a0654f6db-9a3ff.png" style="display: block" target="_blank" rel="noopener">\n  \n  <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; ; max-width: 555px; margin-left: auto; margin-right: auto;">\n    <span class="gatsby-resp-image-background-image" style="padding-bottom: 66.84684684684686%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAACcklEQVQ4y2Ow8jZgAIHgXDcGHn5OMPv///9g+lhdTerB9CTv3QwMsu+U1dhAYqUMTAzpToYM9j0MDF5JAmB1Ti0MmODU/y2MUIOYgZhDgIuLDS5pbA0SYwNaxwS2cPNOxv8MnQw3oNIgXYeRDYO5CATYZUTZgRQjiP1tQi/T/yWzGEGyQEFmPk4ODiCTBUUvussmzO0Fa55/eMrMtRMKY6A2MNQAqZmT+sHcipBwhv97N4DVHaqq1Dzb3bZ6drCUzREGBlGQ2JQ6X4akeAaGbo/HDAwTj+aCFS44PCFg+7ZJWiB29/8rjDCbJ1TOQnHF5NBAiR2VZcnr5VUUdzAwCKO4rpIBN+jf1YYuxMoQzseOIqIixQIWB4L1uZBgYlhwYNLyVcfnOoJds7mCc+GByavXnV6kDeIfXj4FHF5Xurvbt9dktPcyMEisXdqgv/TAlI3XncxUQHIzdvWazd3bu1G1gUkXGE6CDEtPTvLacn65AkiS9xwDw/KTU33Wn1gkBuKfXTENHKs3u9ut7ze1mPwGxv7y7jix1Wdn+h6LCeMFyS07P0F4xanpfgzVHMJAA0WxxjQyuNbewMhACth4f/nClnm1xkAmPw8ft5iwuKA4KxurBJDPB1NTFyXH2RzJriTHwCDIyMwkJSIuKMHMyCgOlJLi5ObgATsmmIkRnDROHpi/cNOqKeDYlZWR4AIlYFDChiZwiIHaDKxRngz6zMUMIENYmFjB8pxQdWywiAGDD5Onrt1aV28CcpEANzdIgwgQiyH7IseKgbnalMGs3IDBEBTULEzg5CIKxeLIvmFgeN7IiCv8/iPRQMz8H5r18AEAM723cnu0lYoAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;">\n      <img class="gatsby-resp-image-image" style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;" alt="should component update" title="" src="/static/should-component-update-5ee1bdf4779af06072a17b7a0654f6db-9a3ff.png" srcset="/static/should-component-update-5ee1bdf4779af06072a17b7a0654f6db-41d3f.png 210w,\n/static/should-component-update-5ee1bdf4779af06072a17b7a0654f6db-101f4.png 420w,\n/static/should-component-update-5ee1bdf4779af06072a17b7a0654f6db-9a3ff.png 555w" sizes="(max-width: 555px) 100vw, 555px">\n    </span>\n  </span>\n  \n  </a>\n    </figure>\n<p>Since <code class="gatsby-code-text">shouldComponentUpdate</code> returned <code class="gatsby-code-text">false</code> for the subtree rooted at C2, React did not attempt to render C2, and thus didn’t even have to invoke <code class="gatsby-code-text">shouldComponentUpdate</code> on C4 and C5.</p>\n<p>For C1 and C3, <code class="gatsby-code-text">shouldComponentUpdate</code> returned <code class="gatsby-code-text">true</code>, so React had to go down to the leaves and check them. For C6 <code class="gatsby-code-text">shouldComponentUpdate</code> returned <code class="gatsby-code-text">true</code>, and since the rendered elements weren’t equivalent React had to update the DOM.</p>\n<p>The last interesting case is C8. React had to render this component, but since the React elements it returned were equal to the previously rendered ones, it didn’t have to update the DOM.</p>\n<p>Note that React only had to do DOM mutations for C6, which was inevitable. For C8, it bailed out by comparing the rendered React elements, and for C2’s subtree and C7, it didn’t even have to compare the elements as we bailed out on <code class="gatsby-code-text">shouldComponentUpdate</code>, and <code class="gatsby-code-text">render</code> was not called.</p>\n<h2 id="examples"><a href="#examples" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Examples</h2>\n<p>If the only way your component ever changes is when the <code class="gatsby-code-text">props.color</code> or the <code class="gatsby-code-text">state.count</code> variable changes, you could have <code class="gatsby-code-text">shouldComponentUpdate</code> check that:</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token keyword">class</span> <span class="token class-name">CounterButton</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  <span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>count<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">shouldComponentUpdate</span><span class="token punctuation">(</span>nextProps<span class="token punctuation">,</span> nextState<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>color <span class="token operator">!==</span> nextProps<span class="token punctuation">.</span>color<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span>\n    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>count <span class="token operator">!==</span> nextState<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span>\n    <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>\n        <span class="token attr-name">color</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>color<span class="token punctuation">}</span></span>\n        <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>state <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>count<span class="token punctuation">:</span> state<span class="token punctuation">.</span>count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n        Count<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>count<span class="token punctuation">}</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre>\n      </div>\n<p>In this code, <code class="gatsby-code-text">shouldComponentUpdate</code> is just checking if there is any change in <code class="gatsby-code-text">props.color</code> or <code class="gatsby-code-text">state.count</code>. If those values don’t change, the component doesn’t update. If your component got more complex, you could use a similar pattern of doing a “shallow comparison” between all the fields of <code class="gatsby-code-text">props</code> and <code class="gatsby-code-text">state</code> to determine if the component should update. This pattern is common enough that React provides a helper to use this logic - just inherit from <code class="gatsby-code-text">React.PureComponent</code>. So this code is a simpler way to achieve the same thing:</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token keyword">class</span> <span class="token class-name">CounterButton</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>PureComponent</span> <span class="token punctuation">{</span>\n  <span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>count<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>\n        <span class="token attr-name">color</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>color<span class="token punctuation">}</span></span>\n        <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>state <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>count<span class="token punctuation">:</span> state<span class="token punctuation">.</span>count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n        Count<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>count<span class="token punctuation">}</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre>\n      </div>\n<p>Most of the time, you can use <code class="gatsby-code-text">React.PureComponent</code> instead of writing your own <code class="gatsby-code-text">shouldComponentUpdate</code>. It only does a shallow comparison, so you can’t use it if the props or state may have been mutated in a way that a shallow comparison would miss.</p>\n<p>This can be a problem with more complex data structures. For example, let’s say you want a <code class="gatsby-code-text">ListOfWords</code> component to render a comma-separated list of words, with a parent <code class="gatsby-code-text">WordAdder</code> component that lets you click a button to add a word to the list. This code does <em>not</em> work correctly:</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token keyword">class</span> <span class="token class-name">ListOfWords</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>PureComponent</span> <span class="token punctuation">{</span>\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>words<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">\',\'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">class</span> <span class="token class-name">WordAdder</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  <span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>\n      words<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">\'marklar\'</span><span class="token punctuation">]</span>\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span>handleClick <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>handleClick<span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token comment">// This section is bad style and causes a bug</span>\n    <span class="token keyword">const</span> words <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>words<span class="token punctuation">;</span>\n    words<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">\'marklar\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>words<span class="token punctuation">:</span> words<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleClick<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ListOfWords</span> <span class="token attr-name">words</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>words<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre>\n      </div>\n<p>The problem is that <code class="gatsby-code-text">PureComponent</code> will do a simple comparison between the old and new values of <code class="gatsby-code-text">this.props.words</code>. Since this code mutates the <code class="gatsby-code-text">words</code> array in the <code class="gatsby-code-text">handleClick</code> method of <code class="gatsby-code-text">WordAdder</code>, the old and new values of <code class="gatsby-code-text">this.props.words</code> will compare as equal, even though the actual words in the array have changed. The <code class="gatsby-code-text">ListOfWords</code> will thus not update even though it has new words that should be rendered.</p>\n<h2 id="the-power-of-not-mutating-data"><a href="#the-power-of-not-mutating-data" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The Power Of Not Mutating Data</h2>\n<p>The simplest way to avoid this problem is to avoid mutating values that you are using as props or state. For example, the <code class="gatsby-code-text">handleClick</code> method above could be rewritten using <code class="gatsby-code-text">concat</code> as:</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>prevState <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>\n    words<span class="token punctuation">:</span> prevState<span class="token punctuation">.</span>words<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">\'marklar\'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>\n      </div>\n<p>ES6 supports a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread syntax</a> for arrays which can make this easier. If you’re using Create React App, this syntax is available by default.</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>prevState <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>\n    words<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span>prevState<span class="token punctuation">.</span>words<span class="token punctuation">,</span> <span class="token string">\'marklar\'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n      </div>\n<p>You can also rewrite code that mutates objects to avoid mutation, in a similar way. For example, let’s say we have an object named <code class="gatsby-code-text">colormap</code> and we want to write a function that changes <code class="gatsby-code-text">colormap.right</code> to be <code class="gatsby-code-text">&#39;blue&#39;</code>. We could write:</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token keyword">function</span> <span class="token function">updateColorMap</span><span class="token punctuation">(</span>colormap<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  colormap<span class="token punctuation">.</span>right <span class="token operator">=</span> <span class="token string">\'blue\'</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>\n      </div>\n<p>To write this without mutating the original object, we can use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign">Object.assign</a> method:</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token keyword">function</span> <span class="token function">updateColorMap</span><span class="token punctuation">(</span>colormap<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">return</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> colormap<span class="token punctuation">,</span> <span class="token punctuation">{</span>right<span class="token punctuation">:</span> <span class="token string">\'blue\'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>\n      </div>\n<p><code class="gatsby-code-text">updateColorMap</code> now returns a new object, rather than mutating the old one. <code class="gatsby-code-text">Object.assign</code> is in ES6 and requires a polyfill.</p>\n<p>There is a JavaScript proposal to add <a href="https://github.com/sebmarkbage/ecmascript-rest-spread">object spread properties</a> to make it easier to update objects without mutation as well:</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token keyword">function</span> <span class="token function">updateColorMap</span><span class="token punctuation">(</span>colormap<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token operator">...</span>colormap<span class="token punctuation">,</span> right<span class="token punctuation">:</span> <span class="token string">\'blue\'</span><span class="token punctuation">}</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>\n      </div>\n<p>If you’re using Create React App, both <code class="gatsby-code-text">Object.assign</code> and the object spread syntax are available by default.</p>\n<h2 id="using-immutable-data-structures"><a href="#using-immutable-data-structures" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using Immutable Data Structures</h2>\n<p><a href="https://github.com/facebook/immutable-js">Immutable.js</a> is another way to solve this problem. It provides immutable, persistent collections that work via structural sharing:</p>\n<ul>\n<li><em>Immutable</em>: once created, a collection cannot be altered at another point in time.</li>\n<li><em>Persistent</em>: new collections can be created from a previous collection and a mutation such as set. The original collection is still valid after the new collection is created.</li>\n<li><em>Structural Sharing</em>: new collections are created using as much of the same structure as the original collection as possible, reducing copying to a minimum to improve performance.</li>\n</ul>\n<p>Immutability makes tracking changes cheap. A change will always result in a new object so we only need to check if the reference to the object has changed. For example, in this regular JavaScript code:</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token keyword">const</span> x <span class="token operator">=</span> <span class="token punctuation">{</span> foo<span class="token punctuation">:</span> <span class="token string">\'bar\'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> y <span class="token operator">=</span> x<span class="token punctuation">;</span>\ny<span class="token punctuation">.</span>foo <span class="token operator">=</span> <span class="token string">\'baz\'</span><span class="token punctuation">;</span>\nx <span class="token operator">===</span> y<span class="token punctuation">;</span> <span class="token comment">// true</span></code></pre>\n      </div>\n<p>Although <code class="gatsby-code-text">y</code> was edited, since it’s a reference to the same object as <code class="gatsby-code-text">x</code>, this comparison returns <code class="gatsby-code-text">true</code>. You can write similar code with immutable.js:</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token keyword">const</span> SomeRecord <span class="token operator">=</span> Immutable<span class="token punctuation">.</span><span class="token function">Record</span><span class="token punctuation">(</span><span class="token punctuation">{</span> foo<span class="token punctuation">:</span> <span class="token keyword">null</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> x <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SomeRecord</span><span class="token punctuation">(</span><span class="token punctuation">{</span> foo<span class="token punctuation">:</span> <span class="token string">\'bar\'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> y <span class="token operator">=</span> x<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">\'foo\'</span><span class="token punctuation">,</span> <span class="token string">\'baz\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> z <span class="token operator">=</span> x<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">\'foo\'</span><span class="token punctuation">,</span> <span class="token string">\'bar\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\nx <span class="token operator">===</span> y<span class="token punctuation">;</span> <span class="token comment">// false</span>\nx <span class="token operator">===</span> z<span class="token punctuation">;</span> <span class="token comment">// true</span></code></pre>\n      </div>\n<p>In this case, since a new reference is returned when mutating <code class="gatsby-code-text">x</code>, we can use a reference equality check <code class="gatsby-code-text">(x === y)</code> to verify that the new value stored in <code class="gatsby-code-text">y</code> is different than the original value stored in <code class="gatsby-code-text">x</code>.</p>\n<p>Two other libraries that can help use immutable data are <a href="https://github.com/rtfeldman/seamless-immutable">seamless-immutable</a> and <a href="https://github.com/kolodny/immutability-helper">immutability-helper</a>.</p>\n<p>Immutable data structures provide you with a cheap way to track changes on objects, which is all we need to implement <code class="gatsby-code-text">shouldComponentUpdate</code>. This can often provide you with a nice performance boost.</p>',
  frontmatter:{title:"Optimizing Performance",next:null,prev:null},fields:{path:"docs/optimizing-performance.md",slug:"docs/optimizing-performance.html"}}},pathContext:{slug:"docs/optimizing-performance.html"}}}});
  //# sourceMappingURL=path---docs-optimizing-performance-html-c26239d68a8cf3e665d3.js.map