From: Carl Worth <cworth@cworth.org>
Date: Tue, 9 Jun 2020 02:10:52 +0000 (-0700)
Subject: Empathy: Let React now I'm a good boy and I won't mutate state
X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=commitdiff_plain;h=b28c923a50b2fc9001fdff69e18506ea02470fe5;hp=dee335da95357a8993a22aab01809d5bbd3e9b57

Empathy: Let React now I'm a good boy and I won't mutate state

By using React.memo() and PureComponent, React can avoid doing any
re-rendering of components that haven't changed at all.
---

diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index b69ce6f..959c3fe 100644
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -80,7 +80,7 @@ function copy_to_clipboard(id)
   document.body.removeChild(tmp);
 }
 
-function GameInfo(props) {
+const GameInfo = React.memo(props => {
   if (! props.id)
     return null;
 
@@ -97,9 +97,9 @@ function GameInfo(props) {
       >Copy Link</button>
     </div>
   );
-}
+});
 
-function PlayerInfo(props) {
+const PlayerInfo = React.memo(props => {
   if (! props.player.id)
     return null;
 
@@ -115,7 +115,7 @@ function PlayerInfo(props) {
       ))}
     </div>
   );
-}
+});
 
 function fetch_method_json(method, api = '', data = {}) {
   const response = fetch(api, {
@@ -136,7 +136,7 @@ async function fetch_put_json(api = '', data = {}) {
   return fetch_method_json('PUT', api, data);
 }
 
-class CategoryRequest extends React.Component {
+class CategoryRequest extends React.PureComponent {
   constructor(props) {
     super(props);
     this.category = React.createRef();
@@ -210,7 +210,7 @@ class CategoryRequest extends React.Component {
   }
 }
 
-function PromptOptions(props) {
+const PromptOptions = React.memo(props => {
 
   function handle_click(id) {
     fetch_post_json(`vote/${id}`);
@@ -251,9 +251,9 @@ function PromptOptions(props) {
       })}
     </div>
   );
-}
+});
 
-class Game extends React.Component {
+class Game extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {