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

[lmno.games] / empathy / empathy.jsx

diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index b69ce6f15c3d090e178b27e78e89686a2e7051a1..959c3feaea8f685f42dd60af38fc6b086d8326ab 100644 (file)
--- 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 = {