diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index e0e5031..444691b 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useMemo } from "react"; import PropTypes from "prop-types"; /** @@ -9,7 +9,7 @@ import PropTypes from "prop-types"; * @returns A JSX button object representing a Footer. */ function Footer({ gameStatus, challengeSecondsLeft, secondsLeft, onClick }) { - const displayMessage = () => { + const displayMessage = useMemo(() => { switch (gameStatus) { case "challenge": return messages.start; @@ -19,39 +19,36 @@ function Footer({ gameStatus, challengeSecondsLeft, secondsLeft, onClick }) { return messages.lost; case "won": return messages.won; - default: return messages.initial; } - }; + }, [gameStatus]); - const displayTimer = () => { + const displayTimer = useMemo(() => { if (gameStatus === "challenge") { return challengeSecondsLeft; } - return secondsLeft; - }; + }, [gameStatus, challengeSecondsLeft, secondsLeft]); return ( - <> -
-
{displayMessage()}
- {gameStatus !== "challenge" && gameStatus !== "active" ? ( - - ) : ( -
- {displayTimer()} -
- )} -
- +
+
{displayMessage}
+ {gameStatus !== "challenge" && gameStatus !== "active" ? ( + + ) : ( +
+ {displayTimer} +
+ )} +
); }