From b28c923a50b2fc9001fdff69e18506ea02470fe5 Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Mon, 8 Jun 2020 19:10:52 -0700
Subject: [PATCH] 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.
---
 empathy/empathy.jsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

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 = {
-- 
2.43.0