Making the HeaderAndFooter be shared across screens to prevent re-render

client/src/components/Game.jsx

@@ -13,6 +13,7 @@ import GamePanel from "./screens/GamePanel";
 import RoundSummary from "./screens/RoundSummary";
 import PlayerScores from "./screens/PlayerScores";
 import { useGameState, dispatch } from "../domain/gameStore";
+import HeaderAndFooter from "./util/HeaderAndFooter";
 
 const componentMap = {
   [PRE_GAME]: HomePage,
@@ -23,6 +24,15 @@ const componentMap = {
   [ERROR]: () => <p>Application encountered unrecoverable error, please refresh the page.</p>,
 }
 
+const needsHeaderFooter = {
+  [PRE_GAME]: true,
+  [PRE_ROUND]: true,
+  [IN_ROUND]: false,
+  [POST_ROUND]: false,
+  [POST_GAME]: true,
+  [ERROR]: true,
+}
+
 const paramRouter = {
   join: dispatch.goToLobby,
   summary: dispatch.goToSummary,
@@ -45,7 +55,9 @@ const Game = () => {
   }, []);
 
   const Screen = componentMap[gameState];
-  return <Screen />
+  return needsHeaderFooter[gameState]
+    ? <HeaderAndFooter><Screen /></HeaderAndFooter>
+    : <Screen />;
 }
 
 export default Game;

client/src/components/screens/HomePage.jsx

@@ -1,10 +1,5 @@
 import React from 'react';
-import HeaderAndFooter from '../util/HeaderAndFooter';
 import GameCreationForm from '../util/GameCreationForm';
 import { dispatch } from '../../domain/gameStore';
 
-export default () => (
-  <HeaderAndFooter>
-    <GameCreationForm afterCreate={gameId => dispatch.goToLobby(gameId)}/>
-  </HeaderAndFooter>
-);
+export default () => <GameCreationForm afterCreate={gameId => dispatch.goToLobby(gameId)}/>;

client/src/components/screens/Lobby/Lobby.jsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import ms from "pretty-ms";
 import LobbyPlayerList from "./LobbyPlayerList";
-import HeaderAndFooter from "../../util/HeaderAndFooter";
 import ClickToCopy from "../../util/ClickToCopy";
 import { useGameId } from "../../../domain/gameStore";
 import JoinForm from "./JoinForm";
@@ -59,22 +58,20 @@ const Lobby = ({ onStart }) => {
   }
 
   return (
-    <HeaderAndFooter>
-      <PageContainer>
-        <InfoContainer>
-          <Label>Game will run for {rounds} rounds, each with a {ms(timer * 1000)} time limit</Label>
-          <FormContainer>
-            {
-              joined
-                ? <StartGame onStart={onStart}/>
-                : <JoinForm onJoined={() => setJoined(true)}/>
-            }
-          </FormContainer>
-          <Label><ClickToCopy text={getUrl(gameId)}>Click here to copy an invite link!</ClickToCopy></Label>
-        </InfoContainer>
-        <LobbyPlayerList playerNames={players?.map(({ name }) => name) ?? []} />
-      </PageContainer>
-    </HeaderAndFooter>
+    <PageContainer>
+      <InfoContainer>
+        <Label>Game will run for {rounds} rounds, each with a {ms(timer * 1000)} time limit</Label>
+        <FormContainer>
+          {
+            joined
+              ? <StartGame onStart={onStart}/>
+              : <JoinForm onJoined={() => setJoined(true)}/>
+          }
+        </FormContainer>
+        <Label><ClickToCopy text={getUrl(gameId)}>Click here to copy an invite link!</ClickToCopy></Label>
+      </InfoContainer>
+      <LobbyPlayerList playerNames={players?.map(({ name }) => name) ?? []} />
+    </PageContainer>
   )
 };
 

client/src/components/screens/PlayerScores/PlayerScores.jsx

@@ -5,7 +5,6 @@ import Button from "../../util/Button";
 import PlayerScoreTile from "./PlayerScoreTile";
 import useGameInfo from '../../../hooks/useGameInfo';
 import ClickToCopy from '../../util/ClickToCopy';
-import HeaderAndFooter from '../../util/HeaderAndFooter';
 import { useGameId, dispatch } from '../../../domain/gameStore';
 import { linkGame } from '../../../domain/apiMethods';
 import GameCreationForm from '../../util/GameCreationForm';
@@ -61,27 +60,25 @@ export default () => {
   }
 
   return (
-    <HeaderAndFooter>
-      <Container>
-        <ScoreBoard>
-          {
-            players
-              .filter(({ currentRound }) => currentRound === null)
-              .sort((p1, p2) => p1.totalScore > p2.totalScore ? -1 : (p1.totalScore < p2.totalScore ? 1 : 0))
-              .map((data) => <PlayerScoreTile key={data.name} {...data} />)
-          }
-        </ScoreBoard>
-        <LinkedGameContainer>
-          {
-            linkedGame
-              ? <StyledButton onClick={() => dispatch.goToLobby(linkedGame)}>
-                  Continue to Linked Game Lobby
-                </StyledButton>
-              : <GameCreationForm afterCreate={linkId => linkGame(gameId, linkId)}/>
-          }
-        </LinkedGameContainer>
-        <Label><ClickToCopy text={getUrl(gameId)}>Click here to copy a link to this summary!</ClickToCopy></Label>
-      </Container>
-    </HeaderAndFooter>
+    <Container>
+      <ScoreBoard>
+        {
+          players
+            .filter(({ currentRound }) => currentRound === null)
+            .sort((p1, p2) => p1.totalScore > p2.totalScore ? -1 : (p1.totalScore < p2.totalScore ? 1 : 0))
+            .map((data) => <PlayerScoreTile key={data.name} {...data} />)
+        }
+      </ScoreBoard>
+      <LinkedGameContainer>
+        {
+          linkedGame
+            ? <StyledButton onClick={() => dispatch.goToLobby(linkedGame)}>
+                Continue to Linked Game Lobby
+              </StyledButton>
+            : <GameCreationForm afterCreate={linkId => linkGame(gameId, linkId)}/>
+        }
+      </LinkedGameContainer>
+      <Label><ClickToCopy text={getUrl(gameId)}>Click here to copy a link to this summary!</ClickToCopy></Label>
+    </Container>
   );
 }