reactjs - แอป Next.JS ค้างในเบราว์เซอร์เมื่อเพิ่มฟิลด์อินพุต

ฉันกำลังใช้ Next.JS เพื่อสร้างฟอร์ม ฉันมีช่องป้อนข้อมูลสองช่องและฉันได้ใช้วิธีทั่วไปของ React ในการอ่านและตรวจสอบข้อความในช่องป้อนข้อมูล

"use client"
import { firebaseApp } from '@/app/firebase';
import React, { useCallback, useEffect, useState } from 'react'
import { collection, getDocs, getFirestore } from "firebase/firestore";

export default async function skills() {
    const [title, settitle] = useState("");
    const [tags, setTags] = useState("");
 
  return (
    <div>
        <form >
            <input type="text" name='title' id="title" placeholder='title'/>
            <input type="text" name='tags' id="tags" placeholder='tags(, seperated)' value={tags} onChange={e=>setTags(e.target.value)} />
            <button>+</button>
        </form>
    </div>
  )
}

ฉันได้ลองใช้โค้ดนี้บน Brave และ Chrome แล้วและมันทำให้หน้าเว็บค้าง ทั้งสองเบราว์เซอร์ หน้าเว็บค้างจนเครื่องมือสำหรับนักพัฒนายังไม่ตอบสนอง ฉันรู้สึกว่ามันอาจเกี่ยวข้องกับการรั่วไหลของหน่วยความจำบางประเภท แต่ฉันไม่สามารถแน่ใจได้

ฉันคิดว่านี่อาจเป็นปัญหากับวิธีที่ฉันได้ใช้งานการล็อกอินด้วย Firebase Auth แต่แม้แต่การข้ามขั้นตอนนั้น โค้ดนี้ก็ค้างอยู่ดี

นี่เป็นครั้งแรกที่ฉันใช้ Next.JS และฉันไม่แน่ใจว่าสิ่งนี้เกิดจากอะไร

แก้ไข: ฉันสามารถรวบรวมตัวอย่างการแสดงที่บันทึกไว้ได้

ฉันคิดว่า onChange อาจทำให้เกิดการเรนเดอร์ซ้ำหลายครั้ง บางทีฉันเห็นการทำงานของ GC เล็ก ๆ ดังนั้นบางทีตัวฟัง onChange อาจไม่ได้ถูกตั้งค่าอย่างถูกต้อง ฉันไม่แน่ใจนัก

ส่วนสุดท้ายที่หน่วยความจำมีรูปแบบการพุ่งขึ้นที่ไม่สม่ำเสมอคือเมื่อฉันเริ่มเพิ่มค่าลงในช่องแท็ก

คำตอบ #1

คุณจำเป็นต้องลบคีย์เวิร์ด async ออกจากคอมโพเนนต์ฝั่งไคลเอ็นต์ของคุณ คอมโพเนนต์แบบ Async ขณะนี้รองรับเฉพาะบนเซิร์ฟเวอร์เท่านั้น