From 4f9e7451e331e87eb9e0ba729a2ad718d9710fcd Mon Sep 17 00:00:00 2001
From: Sahil Dahekar <dahekar30sahil@gmail.com>
Date: Mon, 16 Dec 2024 16:34:32 +0530
Subject: [PATCH] refactor: removed unnecessary state use for hover effect
 (#3419)

Co-authored-by: asyncapi-bot <bot+chan@asyncapi.io>
---
 pages/community/tsc.tsx | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/pages/community/tsc.tsx b/pages/community/tsc.tsx
index 755652736f1..03040adfa4b 100644
--- a/pages/community/tsc.tsx
+++ b/pages/community/tsc.tsx
@@ -1,5 +1,4 @@
 import { sortBy } from 'lodash';
-import React, { useState } from 'react';
 
 import type { Tsc } from '@/types/pages/community/Community';
 
@@ -66,11 +65,9 @@ function addAdditionalUserInfo(user: Tsc) {
  * @returns The Twitter SVG component.
  */
 function TwitterSVG() {
-  const [isHovered, setIsHovered] = useState(false);
-
   return (
-    <div className='size-5' onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
-      <IconTwitter className={isHovered ? 'hover:fill-black' : ''} />
+    <div className='size-5'>
+      <IconTwitter className='hover:fill-black' />
     </div>
   );
 }
@@ -81,11 +78,9 @@ function TwitterSVG() {
  * @returns The GitHub SVG component.
  */
 function GitHubSVG() {
-  const [isHovered, setIsHovered] = useState(false);
-
   return (
-    <div className='size-5' onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
-      <IconGithub className={isHovered ? 'hover:fill-black' : ''} />
+    <div className='size-5'>
+      <IconGithub className='hover:fill-black' />
     </div>
   );
 }
@@ -96,12 +91,9 @@ function GitHubSVG() {
  * @returns The LinkedIn SVG component.
  */
 function LinkedInSVG() {
-  const [isHovered, setIsHovered] = useState(false);
-
   return (
-    <div className='size-5' onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
-      {/* Use the imported SVG icon component */}
-      <IconLinkedIn className={isHovered ? 'hover:fill-linkedin' : ''} />
+    <div className='size-5'>
+      <IconLinkedIn className='hover:fill-linkedin' />
     </div>
   );
 }