1.5.1: use class properties for arrow funcs in <Tweet>

CHANGELOG.md

@@ -1,3 +1,5 @@
+# 1.5.1
+- use class properties rather than redefining arrow funs on render, for slight performance improvement
 # 1.5.0
 - Reply support! New reply icon under tweets opens a reply composer under it.
 # 1.4.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dodo",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "A simple, lightweight Twitter client for Chrome",
   "scripts": {
     "build": "webpack --config webpack.production.js",

src/js/popup/components/Tweet.jsx

@@ -102,10 +102,10 @@ class Tweet extends React.Component {
 
     return ReactHtmlParser(text);
   }
-  toggleComposeReply() {
+  toggleComposeReply = () => {
     this.setState(state => ({composeReply: !state.composeReply}));
   }
-  toggleShowReply() {
+  toggleShowReply = () => {
     this.setState((state, props) => {
       let showing_reply = !state.showing_reply;
       if(showing_reply && !state.reply_tweet) {
@@ -117,7 +117,7 @@ class Tweet extends React.Component {
       return {showing_reply}
     });
   }
-  toggleRT() {
+  toggleRT = () => {
     this.setState((state, props) => {
       let id_str = props.data.id_str;
       let retweeted = !state.retweeted;
@@ -134,7 +134,7 @@ class Tweet extends React.Component {
       };
     });
   }
-  toggleFav() {
+  toggleFav = () => {
     this.setState((state, props) => {
       let id_str = props.data.id_str;
       let favorited = !state.favorited;
@@ -195,22 +195,22 @@ class Tweet extends React.Component {
           {tweet.quoted_status ? <Tweet data={tweet.quoted_status} /> : ""}
         </div>
         <div className="buttons">
-          <button className="replyButton" onClick={() => this.toggleComposeReply()}><span className="Icon Icon--medium Icon--reply"></span></button>
-          <button className="rtButton" className={this.state.retweeted ? "retweeted" : ""} onClick={() => this.toggleRT()}><span className="Icon Icon--medium Icon--retweet"></span></button>
+          <button className="replyButton" onClick={this.toggleComposeReply}><span className="Icon Icon--medium Icon--reply"></span></button>
+          <button className="rtButton" className={this.state.retweeted ? "retweeted" : ""} onClick={this.toggleRT}><span className="Icon Icon--medium Icon--retweet"></span></button>
           <span className="retweetCount">{tweet.retweet_count > 0 ? tweet.retweet_count : ""}</span>
-          <button className="favoriteButton" className={this.state.favorited ? "favorited" : ""} onClick={() => this.toggleFav()}><span className="Icon Icon--heart Icon--medium"></span></button>
+          <button className="favoriteButton" className={this.state.favorited ? "favorited" : ""} onClick={this.toggleFav}><span className="Icon Icon--heart Icon--medium"></span></button>
           <span className="favoriteCount">{tweet.favorite_count > 0 ? tweet.favorite_count : ""}</span>
         </div>
         <span className="footer">
           <a className="timestamp" href={`https://twitter.com/${user.screen_name}/status/${tweet.id_str}`} target="_blank" title={tweet.created_at}>
             {formatDate(tweet.created_at)}
           </a>
           {is_quote ? <a className="quote_by" href={"https://twitter.com/" + tweet.quoted_status.user.screen_name} target="_blank"> quoting @{tweet.quoted_status.user.screen_name}</a> : ""}
-          {is_reply ? <a className="reply_by" onClick={() => this.toggleShowReply()}> in reply to @{tweet.in_reply_to_screen_name}</a> : ""}
+          {is_reply ? <a className="reply_by" onClick={this.toggleShowReply}> in reply to @{tweet.in_reply_to_screen_name}</a> : ""}
           {is_rt ? <a className="rt_by" href={"https://twitter.com/" + source_user.screen_name} target="_blank"> retweeted by @{source_user.screen_name}</a> : ""}
         </span>
         {reply}
-        {this.state.composeReply ? <TweetComposer close={() => this.toggleComposeReply()} inReplyTo={this.props.data} /> : ""}
+        {this.state.composeReply ? <TweetComposer close={this.toggleComposeReply} inReplyTo={this.props.data} /> : ""}
       </div>
     );
   }