Eliminate needless state/effects to highlight comments

web/components/feed/feed-answer-comment-group.tsx

@@ -1,7 +1,7 @@
 import { Answer } from 'common/answer'
 import { FreeResponseContract } from 'common/contract'
 import { ContractComment } from 'common/comment'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
@@ -27,15 +27,9 @@ export function FeedAnswerCommentGroup(props: {
   const { username, avatarUrl, name, text } = answer
 
   const [replyTo, setReplyTo] = useState<ReplyTo>()
-  const [highlighted, setHighlighted] = useState(false)
   const router = useRouter()
   const answerElementId = `answer-${answer.id}`
-
+  const highlighted = router.asPath.endsWith(`#${answerElementId}`)
-  useEffect(() => {
-    if (router.asPath.endsWith(`#${answerElementId}`)) {
-      setHighlighted(true)
-    }
-  }, [answerElementId, router.asPath])
 
   return (
     <Col className="relative flex-1 items-stretch gap-3">

web/components/feed/feed-comments.tsx

@@ -1,6 +1,6 @@
 import { ContractComment } from 'common/comment'
 import { Contract } from 'common/contract'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { useUser } from 'web/hooks/use-user'
 import { formatMoney } from 'common/util/format'
 import { useRouter } from 'next/router'
@@ -94,13 +94,8 @@ export function FeedComment(props: {
     money = formatMoney(Math.abs(comment.betAmount))
   }
 
-  const [highlighted, setHighlighted] = useState(false)
   const router = useRouter()
-  useEffect(() => {
+  const highlighted = router.asPath.endsWith(`#${comment.id}`)
-    if (router.asPath.endsWith(`#${comment.id}`)) {
-      setHighlighted(true)
-    }
-  }, [comment.id, router.asPath])
 
   return (
     <Row