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,7 +36,8 @@ export function TitleLine(props) {
     )
 }
 
-export function HighlightedText(props) {
+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'}}>
@@ -52,3 +53,4 @@ export function HighlightedText(props) {
             </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={