Adding an example of using ShouldComponentUpdate

Author: brenda-jimenez

lib/components/App.js

@@ -27,21 +27,18 @@ class App extends React.Component {
 
     state = this.props.store.getState();
 
-    onStoreChange=()=>{
+    onStoreChange = () => {
         this.setState(this.props.store.getState);
     }
 
-    componentDidMount(){
+    componentDidMount() {
         //we need to update the component state so the app component state is in sync to the store state
-        if(this.subsciptionId) {
-            this.subsciptionId = this.props.store.subscribe(this.onStoreChange);
-        }
+        this.subsciptionId = this.props.store.subscribe(this.onStoreChange);
         this.props.store.startClock();
     }
 
-    componentWillUnmount(){
+    componentWillUnmount() {
         this.props.store.unsubscribe(this.subscriptionId);
-        this.subscriptionId = null;
     }
 
     //In react we cannot return two elements unless
@@ -72,22 +69,22 @@ class App extends React.Component {
     // or manage subscriptions in the same object
 
     render() {
-        let { articles , searchTerm}=this.state;
+        let {articles, searchTerm} = this.state;
         //making the search case insensitive
         const searchRegex = new RegExp(searchTerm, 'i');
-        if(searchTerm){
-            articles= pickBy(articles, (value) => {
+        if (searchTerm) {
+            articles = pickBy(articles, (value) => {
                 return value.title.match(searchRegex) ||
-                     value.body.match(searchRegex);
+                    value.body.match(searchRegex);
             });
         }
         return (
             <div>
-                <Timestamp />
-                <SearchBar key="searchBar" />
+                <Timestamp/>
+                <SearchBar key="searchBar"/>
                 <ArticleList key="articleList"
                              articles={articles}
-                             />
+                />
             </div>
         );
     }

lib/components/Article.js

@@ -31,25 +31,27 @@ const dateDisplay = (dateString) => new Date(dateString).toDateString();
 
 //********** Presentational Component ****************
 //Reads the context from props so It is easy to shallow test it
-const Article = (props) => {
-    const {article, author} = props;
-
+class Article extends React.PureComponent {
 
     //Ideally there should not be operations or functions here
-    return (
-        <div style={styles.article}>
-            <div style={styles.title}>{article.title}</div>
-            <div style={styles.date}>
-                {dateDisplay((article.date))}
-                {article.date}
+    render() {
+        const {article, author} = this.props;
+        return (
+            <div style={styles.article}>
+                <div style={styles.title}>{article.title}</div>
+                <div style={styles.date}>
+                    {dateDisplay((article.date))}
+                    {article.date}
+                </div>
+                <div style={styles.author}><a href={author.website}>
+                    {author.firstName} {author.lastName}
+                </a></div>
+                <div style={styles.body}>{article.body}</div>
             </div>
-            <div style={styles.author}><a href={author.website}>
-                {author.firstName} {author.lastName}
-            </a></div>
-            <div style={styles.body}>{article.body}</div>
-        </div>
-    );
-};
+        );
+    }
+}
+
 
 Article.propTypes = {
     article: PropTypes.shape({
@@ -59,12 +61,12 @@ Article.propTypes = {
     })
 };
 
-function extraProps (store, originalProps){
+function extraProps(store, originalProps) {
     return {
         author: store.lookupAuthor(originalProps.article.authorId)
     };
 }
 
 //This is similar as connect in Redux
-const ArticleContainer = storeProvider (extraProps)(Article);
+const ArticleContainer = storeProvider(extraProps)(Article);
 export default ArticleContainer;

lib/components/ArticleList.js

@@ -1,15 +1,19 @@
 import React from 'react';
 import Article from './Article';
 
-const ArticleList = (props) => {
-    return (
-       <div>
-           {Object.values(props.articles).map( (article) =>
-                            <Article key={article.id}
-                                     article={article}/>
-           )}
-       </div>
-    );
-};
+class ArticleList extends React.PureComponent
+{
+    render()
+    {
+        return (
+            <div>
+                {Object.values(this.props.articles).map((article) =>
+                    <Article key={article.id}
+                             article={article}/>
+                )}
+            </div>
+        );
+    }
+}
 
 export default ArticleList;

lib/components/SearchBar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import debounce from 'lodash.debounce';//NOTE: we are just importing the debounce function from lodash not the whole package
 import storeProvider from './storeProvider';
 
-class SearchBar extends React.Component{
+class SearchBar extends React.PureComponent{
 
     state={
         searchTerm: ''
@@ -21,6 +21,19 @@ class SearchBar extends React.Component{
 
     };
 
+    //In this case we can just convert this to a PureComponent which does the job described below for us.
+    // shouldComponentUpdate(nextProps, nextState){
+    //     //if we just pass FALSE it will render but does not allow us to type anything as the component is not connected with teh tree
+    //     //return false;
+    //     //If we pass TRUE it will rerender everysecons as our state with the tick interval is updating the state and a normal component re-renders every time the state is updated.
+    //     //return true;
+    //     //To solve the issue we should compare current and next props as well as current and previosu state
+    // }
+
+    componentWillUpdate(nextProps, nextState)
+    {
+        console.log('Updating SearchBar');
+    }
 
     //Option 1. We could read the value of the text typed by ref (getting the current DOM node)
     // ref={(input) => this.searchInput = input}

lib/components/Timestamp.js

@@ -2,9 +2,29 @@
 import React from 'react';
 import storeProvider from './storeProvider';
 
-class Timestamp extends React.Component{
+class Timestamp extends React.PureComponent{
+
+    timeDisplay =  (timestamp) => timestamp.toLocaleTimeString([],{hour: '2-digit', minute:'2-digit'});
+
+    //We will do a custom should component update so it just updates based on the time and minutes update
+    shouldComponentUpdate(nextProps, nextState){
+        //const currentTimeDisplay= this.props.timestamp.toLocaleTimeString([],{hour: '2-digit', minute:'2-digit'});
+        //const nextTimeDisplay= nextProps.timestamp.toLocaleTimeString([],{hour: '2-digit', minute:'2-digit'});
+        //So if it is different re render just every minute not every second
+        //return currentTimeDisplay !== nextTimeDisplay;
+
+        //Simplified version
+        return (this.timeDisplay(this.props.timestamp) !=
+                this.timeDisplay(nextProps.timestamp));
+    }
+
+    componentWillUpdate(nextProps, nextState)
+    {
+        console.log('Updating TimeStamp');
+    }
+
     render(){
-        return(<div>{this.props.timestamp.toString()}</div>);
+        return(<div>{this.props.timestamp.toLocaleTimeString([],{hour: '2-digit', minute:'2-digit'})}</div>);
     }
 }
 

lib/components/storeProvider.js

@@ -15,17 +15,24 @@ const storeProvider = (extraProps = () =>({})) => (Component) => {
         static displayName = `${Component.name}Container`;
         static contextTypes = {store: PropTypes.object};
 
+        usedState = () => {
+            return extraProps(this.context.store, this.props);
+        };
+
+        state = this.usedState();
+
 
         onStoreChange=()=>{
-            //Give the component the signal that it needs to re-render
-            this.forceUpdate();
+            if(this.subsciptionId) {
+                //Give the component the signal that it needs to re-render
+                //this.forceUpdate();
+                this.setState(this.usedState());
+            }
         }
 
         componentDidMount(){
             //we need to update the component state so the app component state is in sync to the store state
-            if(this.subsciptionId) {
-                this.subsciptionId = this.context.store.subscribe(this.onStoreChange);
-            }
+            this.subsciptionId = this.context.store.subscribe(this.onStoreChange);
         }
 
         componentWillUnmount(){
@@ -36,7 +43,7 @@ const storeProvider = (extraProps = () =>({})) => (Component) => {
         render(){
            return <Component
                {...this.props}
-               {...extraProps(this.context.store, this.props)}
+               {...this.usedState()}
                store={this.context.store}/>;
         }
     };