Too Many Re-Renders ReactJs - reactjs

Question

Well Im Trying To Basically Use Speech To Text With React-Speech-Recognition Package, I Tried To Make a Button Icon Which Stops onClick When The Mic Was Off or Turns on When Earlier it Was off
I Tried a Lot To Fix the Issue,
here's My Code.
import React, { Component, useRef } from "react";
import firebase from "../firebase";
import { createSpeechlySpeechRecognition } from "#speechly/speech-recognition-polyfill";
import SpeechRecognition, {
useSpeechRecognition,
} from "react-speech-recognition";
var axios = require("axios").default;
export default function Chat() {
let messages = [{ main: "Hey there! Wassop", class: "left" }];
let messageRef = useRef();
const appId = "I_HAVE_MY_KEY_HERE";
const SpeechlySpeechRecognition = createSpeechlySpeechRecognition(appId);
SpeechRecognition.applyPolyfill(SpeechlySpeechRecognition);
const {
transcript,
listening,
browserSupportsSpeechRecognition,
isMicrophoneAvailable,
} = useSpeechRecognition();
const startListening = () =>
SpeechRecognition.startListening({ continuous: true });
function Mic() {
if (listening) {
return SpeechRecognition.stopListening()
} else {
return SpeechRecognition.abortListening()
}
}
function onSend(e) {
let message = messageRef.current.value;
e.preventDefault();
document.getElementById("messages").innerHTML +=
"<div class='right'>" + message + "</div>";
if (message == "") {
alert("Field shall not be empty!");
}
var options = {
---API REQUEST----
};
axios
.request(options)
.then(function (response) {
messageRef.current.value = "";
messages.push({
main: response.data.cnt,
class: "left",
});
document.getElementById("messages").innerHTML +=
"<div class='left'>" + response.data.cnt + "</div>";
console.log(messages);
})
.catch(function (error) {
console.error(error);
});
}
return (
<div className="card">
<h1 className="text-2xl text-center font-bold">Chat Box</h1>
<p>Microphone: {listening ? "on" : "off"}</p>
<p>{transcript}</p>
<br />
<div id="messages">
{messages.map((message) => (
<div key={message.main} className={message.class}>
{message.main}
</div>
))}
</div>
<br />
<form onSubmit={onSend}>
<div class="relative flex w-2/4 flex-wrap items-stretch mb-3">
<span class="z-10 h-full leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
<img src="https://img.icons8.com/external-flatart-icons-flat-flatarticons/64/000000/external-message-contact-flatart-icons-flat-flatarticons.png" />
</span>
<input
type="text"
ref={messageRef}
placeholder="Message"
class="px-3 py-3 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border-0 shadow outline-none focus:outline-none focus:ring w-full pl-10"
/>
<span class="z-10 h-full leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 right-0 pr-3 py-3 mic">
<img
src="https://img.icons8.com/material-rounded/24/000000/microphone.png"
onClick={Mic()}
/>
</span>
</div>
<button
type="submit"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
Button
</button>
</form>
</div>
);
}
I Get The Error Of Too Many Renders Which Im Not Able To Figure Out How To Fix I Tried Loooking a lot But Nothing Helped, Im Not Even Able To Understand Someone Please Help Me.

Answer 1

Reason for too much re-render
If you are binding your onClick functions like this:
onClick={Mic()}
React will call the function, without the need of an actual click. You should use onClick={Mic} or onClick={() => Mic()}
There are a couple of other issues with your code:
1. Using ref
You are using a useRef variable to hold the messageuseRef update will not trigger a re-render. Instead try to use a useState hook to bind the variable to a state variable
2. Creating the object inside the functional component
You are creating messages object inside the functional component. On every re-render, this messages object will be initialized to the same array. Bind this to a state variable to reflect changes made to the messages object.
import {useState} from 'react'
const [messages, setMessages] = useState([{ main: "Hey there! Wassop", class: "left" }])
3. DOM Manipulation
You should avoid DOM manipulation like:
document.getElementById("messages").innerHTML += "<div class='right'>" + message + "</div>";
if possible. You can use refs in this case and bind it to the JSX.
const messageRef = useRef('')
return(
...
<div id="message" ref={messageRef}> ...
...
)
I will strongly suggest reading more about React lifecycle and hooks:
Docs