Next.JS app freezing in browser when adding an input field

June 30, 2023

I’m using Next.JS to build a form. I have two inputs and I have used the general react way of reading and validating text in the input.

"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>
  )
}

I have tried this code on Brave and Chrome and it freezes the page on both. The page freezes so hard that even the dev tools stop resoponding. I have a feeling it might be linked to some sort of memory leak but I cannot be sure.

I thought that this could be an issue with the way I’ve implemented the login using firebase auth but even bypassing that this code freezes.

This is my first time using Next.JS and I’m not sure what could be causing this.

Edit: I was able to gather a preview of the performance recording

I think the onChange is causing multiple re-renders maybe, I see the minor GC kicking in so maybe the onChange listener is not properly set up. I’m not so sure.

The last part where the memory has an erratic spike pattern is when I started adding values to the tags field.