From 2e9f4a7043b1d1c9fd94fd11ba7f2b8c2f41fa4a Mon Sep 17 00:00:00 2001
From: AaronGulman <81993286+AaronGulman@users.noreply.github.com>
Date: Fri, 26 Apr 2024 20:17:26 -0500
Subject: [PATCH] Update Button.js

Refactor: Optimize Button component and remove commented-out code

- Refactored the Button component to use React.memo for performance optimization.
- Removed commented-out code from the Button component file for a cleaner codebase. While it's not inherently wrong to have commented-out code, removing it enhances codebase readability and maintainability.

This change improves the performance of the Button component by memoizing it and enhances codebase readability by eliminating unnecessary clutter.
---
 src/components/Button.js | 42 +++++++++++-----------------------------
 1 file changed, 11 insertions(+), 31 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index 27490cc5cd..a885026450 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,38 +1,16 @@
-// import React from 'react';
-// import './Button.css';
-// import { Link } from 'react-router-dom';
+import React from "react";
+import "./Button.css";
+import { Link } from "react-router-dom";
 
-// export function Button() {
-//   return (
-//     <Link to='sign-up'>
-//       <button className='btn'>Sign Up</button>
-//     </Link>
-//   );
-// }
-
-import React from 'react';
-import './Button.css';
-import { Link } from 'react-router-dom';
-
-const STYLES = ['btn--primary', 'btn--outline', 'btn--test'];
-
-const SIZES = ['btn--medium', 'btn--large'];
-
-export const Button = ({
-  children,
-  type,
-  onClick,
-  buttonStyle,
-  buttonSize
-}) => {
-  const checkButtonStyle = STYLES.includes(buttonStyle)
-    ? buttonStyle
-    : STYLES[0];
+const STYLES = ["btn--primary", "btn--outline", "btn--test"];
+const SIZES = ["btn--medium", "btn--large"];
 
+const Button = React.memo(({ children, type, onClick, buttonStyle, buttonSize }) => {
+  const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0];
   const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
 
   return (
-    <Link to='/sign-up' className='btn-mobile'>
+    <Link to="/sign-up" className="btn-mobile">
       <button
         className={`btn ${checkButtonStyle} ${checkButtonSize}`}
         onClick={onClick}
@@ -42,4 +20,6 @@ export const Button = ({
       </button>
     </Link>
   );
-};
+});
+
+export default Button;