Merge pull request #6 from itReverie/improvingPerformance

Improving performance with react-addons-perf, PureComponents, etc

Author: itReverie

lib/components/App.js

@@ -3,12 +3,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import pickBy from 'lodash.pickby';
+import Perf from 'react-addons-perf';
+
+if(typeof window !== 'undefined') {
+    window.Perf = Perf;
+}
 
 import ArticleList from './ArticleList';
 import SearchBar from './SearchBar';
 import Timestamp from './Timestamp';
 
-class App extends React.Component {
+class App extends React.PureComponent {
 
     //****** I need the following lines to expose the CONTEXT
     //to make the context api work we need to define the context type
@@ -22,26 +27,46 @@ class App extends React.Component {
             store: this.props.store
         };
     }
-
     //********
 
-    state = this.props.store.getState();
 
-    onStoreChange=()=>{
-        this.setState(this.props.store.getState);
+    //**** Subscribing to a portion of the state,
+    //pretty much just returning what we really need as a state for this particular component
+    appState =()=>{
+        const {articles, searchTerm} = this.props.store.getState();
+        return  {articles, searchTerm};
+    };
+
+    state = this.appState();
+    //****
+
+
+    onStoreChange = () => {
+        //this.props.store.getState....we dont need to read directly from the props state but our own implementation
+        this.setState(this.appState);
     }
 
-    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();
+
+
+        //TODO: Leaving this purposely uncommented. Be aware that in production this has to be commented.
+        //We need consistent measures that's why we need to add this lines so we messure the components at the same point
+        //Those numbers need to be the same every time we refresh
+        setImmediate(()=>{Perf.start();});
+        setTimeout(()=>{ Perf.stop();
+        Perf.printWasted();},5000);
     }
 
-    componentWillUnmount(){
+    componentWillUnmount() {
         this.props.store.unsubscribe(this.subscriptionId);
-        this.subscriptionId = null;
+    }
+
+    componentWillUpdate(nextProps, nextState)
+    {
+        console.log('Updating TimeStamp');
     }
 
     //In react we cannot return two elements unless
@@ -71,23 +96,32 @@ class App extends React.Component {
     // we can  make a StateApi an event emmiter (Flux)
     // or manage subscriptions in the same object
 
+
+    //To solve rendering the articles if the properties have not changed
+    //Just re-render if you need to
+    //Downside is that we will have to update this method if we have another property
+    // shouldComponentUpdate(nextProps, nextState){
+    //     return (nextState.articles !== this.state.articles ||
+    //             nextState.searchTerm !== this.state.searchTerm);
+    // }
+
     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,13 @@ Article.propTypes = {
     })
 };
 
-function extraProps (store, originalProps){
+//We are using props that do not use the state
+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

@@ -3,15 +3,41 @@ import React from 'react';
 import storeProvider from './storeProvider';
 
 class Timestamp extends React.Component{
+
+    static timeDisplay =  (timestamp) => timestamp.toLocaleTimeString([],{hour: '2-digit', minute:'2-digit'});
+
+
+    //This logic is causing the Timestamp component to render every minute, in order to avoid that we
+    //will move the ShouldComponentUpdate one level up to the Container Component
+
+
+    // //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));
+    // }
+
+
+
     render(){
-        return(<div>{this.props.timestamp.toString()}</div>);
+        return(<div>{this.props.timestampDisplay}</div>);
     }
 }
 
+//We are using props that use the state (Contrary to articles List )
 function extraProps(store)
 {
+    //This is the only component that is actually making use of the state
+    //timestamp: store.getState().timestamp
     return {
-        timestamp: store.getState().timestamp
+
+        timestampDisplay: Timestamp.timeDisplay(store.getState().timestamp)
     };
 }
 

lib/components/__tests__/ArticleList.js

@@ -3,7 +3,7 @@ import React from 'react';
 //import renderer from 'react-test-renderer';
 import ArticleList from '../ArticleList';
 import { configure, shallow } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from 'enzyme-adapter-react-15';
 
 configure({ adapter: new Adapter() });
 

lib/components/storeProvider.js

@@ -16,27 +16,38 @@ const storeProvider = (extraProps = () =>({})) => (Component) => {
         static contextTypes = {store: PropTypes.object};
 
 
+        //only the properties of the state that have been used for the warp component
+        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(){
             this.context.store.unsubscribe(this.subscriptionId);
             this.subscriptionId = null;
         }
 
+
+
         render(){
            return <Component
                {...this.props}
-               {...extraProps(this.context.store, this.props)}
+               {...this.usedState()}
                store={this.context.store}/>;
         }
     };

lib/state-api/lib/index.js

@@ -7,12 +7,33 @@ class StateApi{
             authors: this.mapIntoObject(rawData.authors),
             searchTerm :'',
             timestamp: new Date()};
-
         this.subscriptions ={};
-
         this.lastSubscriptionId=0;
 
-
+        //Simulating adding an article every minute
+        setTimeout(() => {
+            const fakeArticle = {
+                ...rawData.articles[0],
+                id: 'fakeArticleId',
+            };
+            //This line mutates the state and that wont be recognized by the PureComponent
+            // this.data.articles[fakeArticle.id] = fakeArticle;
+
+            //Hence instead of mutating the state we will copy
+            //We are copying the current state and modifying that copy of the current state
+            //So for the previous object and current object are different
+            //Copying current data
+            //Change the articles object
+            //add new article
+            this.data = {
+                ...this.data,
+                articles: {
+                    ...this.data.articles,
+                    [fakeArticle.id]: fakeArticle,
+                },
+            };
+            this.notifySubscribers();
+        }, 1000);
     }