The latest articles on DEV Community by sohel1718 (@sohel1718). https://dev.to/sohel1718 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F655081%2Fe672395f-f076-4e89-95cd-8ee49cd39bc9.png https://dev.to/sohel1718 en sohel1718 Mon, 28 Jun 2021 08:56:43 +0000 https://dev.to/sohel1718/best-ways-to-optimize-react-sites-m0o https://dev.to/sohel1718/best-ways-to-optimize-react-sites-m0o <p>React Performance Optimization is easy to achieve with the following simple steps.</p> <ul> <li>Using <strong>React Hooks</strong> and working with functional programming</li> <li>Use <strong>React.memo</strong> for Component Memorization</li> <li>Using the <strong>shouldComponentUpdate</strong> Life Cycle Event</li> <li>Using <strong>Lazy Loading</strong> of React Components</li> <li>Use <strong>React Fragments</strong> to Avoid Extra Tag</li> <li>Do Not Use <strong>React Inline Function Definition</strong> </li> <li>Avoid Async Requests in <strong>componentWillMount()</strong> </li> <li> <strong>Bind Function</strong> Early in Constructor</li> <li> <strong>Arrow Functions</strong> vs <strong>Binding</strong> in Constructors</li> <li> <strong>Avoid Using Inline Style</strong> Attribute</li> <li>Optimize <strong>Conditional Rendering</strong> in React</li> <li> <strong>Don’t Derive Data</strong> in the Render Method</li> <li> <strong>Create Error Boundaries</strong> for the Components</li> <li> <strong>Immutable Data Structures</strong> for Components</li> <li>Using a <strong>Unique Key</strong> for Iteration</li> <li> <strong>Throttling</strong> and <strong>Debouncing</strong> Events</li> <li>Using <strong>CDNs</strong> for <strong>External Resources</strong> </li> <li> <strong>CSS Animation</strong> Instead of JavaScript Animation</li> <li>Enable <strong>gzip Compression</strong> on the Web Server</li> <li>Use <strong>Web Workers</strong> for CPU Extensive Tasks</li> <li> <strong>Server-Side Rendering</strong> of the React Component</li> </ul> <h1> Some Videos To Refer <br><br><br> </h1> <p><iframe width="710" height="399" src="https://www.youtube.com/embed/o-alRbk_zP0"> </iframe> </p> <h1> Some article's and Links To Refer </h1> <p><code>10 Ways to Optimize Your React App’s Performance</code><br> </p> <div class="ltag__link"> <a href="https://blog.bitsrc.io/10-ways-to-optimize-your-react-apps-performance-e5e437c9abce" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--iqdITSYR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://miro.medium.com/fit/c/96/96/1%2AWSdkXxKtD8m54-1xp75cqQ.jpeg" alt="Chidume Nnamdi 🔥💻🎵🎮"> </div> </a> <a href="https://blog.bitsrc.io/10-ways-to-optimize-your-react-apps-performance-e5e437c9abce" class="ltag__link__link"> <div class="ltag__link__content"> <h2>10 Ways to Optimize Your React App’s Performance | by Chidume Nnamdi 🔥💻🎵🎮 | Bits and Pieces</h2> <h3>Chidume Nnamdi 🔥💻🎵🎮 ・ <time>Apr 13, 2021</time> ・ <div class="ltag__link__servicename"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ze5yh_2q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/medium_icon-90d5232a5da2369849f285fa499c8005e750a788fdbf34f5844d5f2201aae736.svg" alt="Medium Logo"> blog.bitsrc.io </div> </h3> </div> </a> </div> <div class="ltag__link"> <a href="/sagar" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--UQE8fxUB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--07AkXJ7f--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/81664/c08a6b5d-14ae-48ba-b808-2d977d9cc358.jpg" alt="sagar"> </div> </a> <a href="/sagar/things-should-be-considered-while-writing-your-react-components-3n4a" class="ltag__link__link"> <div class="ltag__link__content"> <h2>React Performance Optimization</h2> <h3>Sagar ・ Apr 26 '20 ・ 4 min read</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#react</span> <span class="ltag__link__tag">#javascript</span> </div> </div> </a> </div> <div class="ltag__link"> <a href="/harshdand" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--h9h8reWa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--OKOi5Qlu--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/248522/82dbf0d0-ec4a-4188-b29d-f91147e9001b.png" alt="harshdand"> </div> </a> <a href="/harshdand/react-performance-optimization-tips-4238" class="ltag__link__link"> <div class="ltag__link__content"> <h2>React Performance Optimization Tips</h2> <h3>Harsh ・ Dec 27 '20 ・ 5 min read</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#react</span> <span class="ltag__link__tag">#javascript</span> <span class="ltag__link__tag">#performance</span> <span class="ltag__link__tag">#webdev</span> </div> </div> </a> </div> sohel1718 Mon, 28 Jun 2021 08:56:08 +0000 https://dev.to/sohel1718/improve-seo-in-react-sits-s-3anc https://dev.to/sohel1718/improve-seo-in-react-sits-s-3anc <p>When using React-JS in web development we face issue in SEO because of react is rendered on client side.<br> So when a crawler or a bot visit are site. It does not find any html code. <br> Because crawler's ignore JS code.<br> So we have to render are site on server so that crawler's can see the html.</p> <p>For that we can use Next.js and If are site is in production then we can use some tools like react-helmet for dynamic head component and we can render the site on server.</p> <h1> Some links to refer </h1> <div class="ltag__link"> <a href="https://blog.bitsrc.io/improving-seo-of-react-apps-with-react-helmet-7b79fb8774f4" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Ov_HhMlD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://miro.medium.com/fit/c/96/96/2%2AFG4lpTG6MxKsIj_BBTqwRg.jpeg" alt="John Au-Yeung"> </div> </a> <a href="https://blog.bitsrc.io/improving-seo-of-react-apps-with-react-helmet-7b79fb8774f4" class="ltag__link__link"> <div class="ltag__link__content"> <h2>Improving SEO with React Helmet. To make our web app or website visible… | by John Au-Yeung | Bits and Pieces</h2> <h3>John Au-Yeung ・ <time>Jun 4, 2020</time> ・ <div class="ltag__link__servicename"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ze5yh_2q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/medium_icon-90d5232a5da2369849f285fa499c8005e750a788fdbf34f5844d5f2201aae736.svg" alt="Medium Logo"> blog.bitsrc.io </div> </h3> </div> </a> </div> <ul> <li><p><a href="https://www.peerbits.com/blog/build-seo-friendly-web-apps-using-reactjs-redux-nextjs.html"><code>ABOUT SEO IMPROVEMENT</code></a></p></li> <li><p><a href="https://www.digitalocean.com/community/tutorials/react-react-router-ssr"><code>React-Router SSR</code></a></p></li> </ul> <div class="ltag__link"> <a href="/joelvarty" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mLmZavdY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--pOfFa0EG--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/216132/136e5b4a-be5c-46ec-899b-f015693c3497.jpg" alt="joelvarty"> </div> </a> <a href="/joelvarty/prerender-your-spa-using-netlify-for-better-seo-3h87" class="ltag__link__link"> <div class="ltag__link__content"> <h2>Prerender your SPA using Netlify For Better SEO</h2> <h3>Joel Varty ・ Aug 22 '19 ・ 2 min read</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#javascript</span> <span class="ltag__link__tag">#webdev</span> <span class="ltag__link__tag">#react</span> <span class="ltag__link__tag">#cms</span> </div> </div> </a> </div> <div class="ltag__link"> <a href="/colbyfayock" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xlv1dTkX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--VO7FWp_z--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/186511/c8cb9a0a-e3bb-4f6e-a332-c45617c1455a.png" alt="colbyfayock"> </div> </a> <a href="/colbyfayock/crafting-a-react-next-js-single-page-application-optimized-for-seo-54fk" class="ltag__link__link"> <div class="ltag__link__content"> <h2>Crafting a React/Next.js Single Page Application Optimized for SEO</h2> <h3>Colby Fayock ・ Jun 10 ・ 16 min read</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#react</span> <span class="ltag__link__tag">#nextjs</span> <span class="ltag__link__tag">#seo</span> </div> </div> </a> </div> <p><iframe width="710" height="399" src="https://www.youtube.com/embed/-B58GgsehKQ"> </iframe> </p>