improve performance

src/App.js

@@ -12,6 +12,8 @@ class App extends Component {
             search_text: null,
             flow_render_key: +new Date(),
         };
+        this.show_sidebar_bound=this.show_sidebar.bind(this);
+        this.set_search_text_bound=this.set_search_text.bind(this);
     }
 
     show_sidebar(title,content) {
@@ -34,10 +36,10 @@ class App extends Component {
                 <div className="bg-img" style={{
                     backgroundImage: 'url('+(localStorage['REPLACE_ERIRI_WITH_URL'] || 'static/eriri_bg.jpg')+')'
                 }} />
-                <Title callback={this.show_sidebar.bind(this)} set_search_text={this.set_search_text.bind(this)} />
+                <Title callback={this.show_sidebar_bound} set_search_text={this.set_search_text_bound} />
                 <div className="left-container">
                     <Flow key={this.state.flow_render_key}
-                        callback={this.show_sidebar.bind(this)} search_text={this.state.search_text}
+                        callback={this.show_sidebar_bound} search_text={this.state.search_text}
                     />
                     <br />
                 </div>

src/Common.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {Component, PureComponent} from 'react';
 
 import TimeAgo from 'react-timeago';
 import Linkify from 'react-linkify';
@@ -36,19 +36,21 @@ export function TitleLine(props) {
     )
 }
 
-export function HighlightedText(props) {
-    let parts=[].concat.apply([], props.text.split(PID_RE).map((p)=>p.split(NICKNAME_RE)));
-    return (
-        <Linkify properties={{target: '_blank'}}>
-            <pre>
-                {parts.map((p,idx)=>(
-                    <span key={idx}>{
-                        PID_RE.test(p) ? <a href={'##'+p} target="_blank">{p}</a> :
-                        NICKNAME_RE.test(p) ? <span style={{backgroundColor: props.color_picker.get(p)}}>{p}</span> :
-                        p
-                    }</span>
-                ))}
-            </pre>
-        </Linkify>
-    )
-}
+export class HighlightedText extends PureComponent {
+    render() {
+        let parts=[].concat.apply([], props.text.split(PID_RE).map((p)=>p.split(NICKNAME_RE)));
+        return (
+            <Linkify properties={{target: '_blank'}}>
+                <pre>
+                    {parts.map((p,idx)=>(
+                        <span key={idx}>{
+                            PID_RE.test(p) ? <a href={'##'+p} target="_blank">{p}</a> :
+                            NICKNAME_RE.test(p) ? <span style={{backgroundColor: props.color_picker.get(p)}}>{p}</span> :
+                            p
+                        }</span>
+                    ))}
+                </pre>
+            </Linkify>
+        )
+    }
+}

src/Flows.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {Component, PureComponent} from 'react';
 import {ColorPicker} from './color_picker';
 import {Time, TitleLine, HighlightedText} from './Common.js';
 import './Flows.css';
@@ -46,7 +46,7 @@ function FlowItem(props) {
     );
 }
 
-class FlowItemRow extends Component {
+class FlowItemRow extends PureComponent {
     constructor(props) {
         super(props);
         this.state={
@@ -156,7 +156,7 @@ function FlowChunk(props) {
     );
 }
 
-export class Flow extends Component {
+export class Flow extends PureComponent {
     constructor(props) {
         super(props);
         this.state={
@@ -222,8 +222,8 @@ export class Flow extends Component {
                             chunks: [{
                                 title: 'Result for "'+this.state.search_param+'"',
                                 data: json.data,
-                                mode: finished ? 'search_finished' : 'search',
                             }],
+                            mode: finished ? 'search_finished' : 'search',
                             loading_status: 'done',
                         });
                     })

src/Title.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {Component, PureComponent} from 'react';
 import './Title.css';
 
 const HELP_TEXT=(
@@ -39,7 +39,7 @@ const HELP_TEXT=(
     </div>
 );
 
-class ControlBar extends Component {
+class ControlBar extends PureComponent {
     constructor(props) {
         super(props);
         this.state={