Avoid All Possible Unnecessary Re-renders

Author: zonayedpca

src/App.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import axios from 'axios';
 import { BrowserRouter, Route } from 'react-router-dom';
+import { BeatLoader } from 'react-spinners';
 
 import './App.css';
 
@@ -12,7 +13,7 @@ class App extends Component {
     tops: '',
     data: '',
     searchResult: '',
-    singleData: ''
+    loading: true
   }
 
   getData() {
@@ -29,7 +30,7 @@ class App extends Component {
     const data = this.getData();
     const tops = this.topData();
     const getAllData = await Promise.all([data, tops]);
-    this.setState({data: getAllData[0].data, tops: getAllData[1].data});
+    this.setState({data: getAllData[0].data, tops: getAllData[1].data, loading: false});
   }
 
   componentDidMount() {
@@ -45,8 +46,14 @@ class App extends Component {
 
   render() {
     const { searchAItem } = this;
-    const { tops, searchResult, data } = this.state;
-    
+    const { tops, searchResult, data, loading } = this.state;
+
+    if(loading) {
+      return <div className="loader">
+        <BeatLoader color={'#333'} />
+      </div>;
+    }
+
     return (
       <BrowserRouter>
         <div className="App">

src/components/Card.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 export default({id, title, style = {}}) => (
-  <div key={id} className="card c-card" style={style}>
+  <div key={id} className="card c-card" style={style} log={console.log('Card')}>
     <Link to={`/${id}`}>
       <h4>{title}</h4>
     </Link>

src/components/HeaderContent.js

@@ -1,20 +1,26 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 
 import NavBar from './NavBar';
 import SocialShare from './SocialShare';
 
-export default({title, description}) => (
-  <header className="header-area">
-    <div className="header">
-      <NavBar />
-      <div className="intro">
-        <h1>{title}</h1>
-        <p>{description}</p>
-        <div className="print no-print">
-          <button className="btn btn-print" onClick={() => window.print()}>প্রিন্ট করুন</button>
+export default class HeaderContent extends PureComponent {
+  render() {
+    const {title, description} = this.props;
+
+    return (
+      <header className="header-area">
+        <div className="header">
+          <NavBar />
+          <div className="intro">
+            <h1>{title}</h1>
+            <p>{description}</p>
+            <div className="print no-print">
+              <button className="btn btn-print" onClick={() => window.print()}>প্রিন্ট করুন</button>
+            </div>
+            <SocialShare title={title} description={description} />
+          </div>
         </div>
-        <SocialShare title={title} description={description} />
-      </div>
-    </div>
-  </header>
-)
+      </header>
+    )
+  }
+}

src/components/HeaderHome.js

@@ -1,16 +1,22 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 
 import NavBar from './NavBar';
 
-export default({searchAItem}) => (
-  <header className="header-area">
-    <div className="header">
-      <NavBar />
-      <div className="intro">
-        <h1>ডেভেলপার চিটশিট</h1>
-        <input onChange={(e) => searchAItem(e.target.value)} placeholder="কিসের উপর চিটশিট চাচ্ছেন?" />
-        <p>বাংলা চিটশিটের ভান্ডার। নিজের মাতৃভাষায় চিটশিটের ভান্ডার সমৃদ্ধ করতে আপনিও যোগ দিন</p>
-      </div>
-    </div>
-  </header>
-)
+export default class HeaderHome extends PureComponent {
+  render() {
+    const { searchAItem } = this.props;
+
+    return (
+      <header className="header-area">
+        <div className="header">
+          <NavBar />
+          <div className="intro">
+            <h1>ডেভেলপার চিটশিট</h1>
+            <input onChange={(e) => searchAItem(e.target.value)} placeholder="কিসের উপর চিটশিট চাচ্ছেন?" />
+            <p>বাংলা চিটশিটের ভান্ডার। নিজের মাতৃভাষায় চিটশিটের ভান্ডার সমৃদ্ধ করতে আপনিও যোগ দিন</p>
+          </div>
+        </div>
+      </header>
+    )
+  }
+}