Okay, so basically I am working with reactjs using vite and trying to make a chat App.
There are few files
FirebaseConfig, firebaseConetxt(my context)
App.jsx->mainPage.jsx->currentChat.jsx & sidebar.jsx
Its all wrapped in firebaseContextProvider.
When I send Message my currentChat variable which is defined inside firebaseContext.jsx rerender 4 times. I don’t want to rerender it’s again and again
Plz don’t confuse there is one currenChat.jsx file and currentChat array. I am uploading firebaseContextProvider as image file .
enter image description here
CurrentChat.jsx file is here
import React, { useState } from 'react';
import { MdPermMedia } from 'react-icons/md';
import { BsFillSendFill } from 'react-icons/bs';
import { useFirebaseContext } from '../../context/firebaseContext';
const CurrentChat = () => {
// Using context and state from Firebase context
const { userSelected, currentUser, createFriend, sendMessage, currentChat } = useFirebaseContext();
const [input, setInput] = useState("");
// Function to send a message
const inputSender = async () => {
await createFriend(input);
await sendMessage(input);
};
// Render the component only if a user is selected
if (userSelected) {
return (
<div className="relative bg-purple-300 h-full md:w-3/4 w-2/3 overflow-x-hidden">
{/* Top Bar */}
<div className="sticky w-full bg-purple-300 top-0">
<div className="w-full h-12 flex items-center justify-between px-2 py-2">
<div className="h-full flex items-center gap-2 cursor-pointer">
<img className="h-9 w-9 object-cover rounded rounded-full" src={userSelected.profileImage} alt="" />
<h2 className="text-xl">{userSelected.name}</h2>
</div>
</div>
<div className="h-[.3px] w-full bg-gray-400"></div>
</div>
{/* Chats */}
<div className="h-full w-full p-2 mb-6 flex flex-col">
{/* Add your chat UI here */}
{currentChat && currentChat.map((message,index)=>(
<div key={index} className={`my-2 w-fit md:max-w-[60%] max-w-[90%] break-words p-2 rounded-xl bg-blue-500
${message.sender == currentUser.uid ? 'rounded-tr-none self-end' : 'rounded-tl-none' }`}>
<p>{message.message}</p>
</div>
))
}
</div>
{/* Input Bar */}
<div className="md:w-3/4 w-2/3 fixed h-12 bottom-0 bg-red-400 flex items-center justify-center">
<div className="w-full h-10 my-2 mx-1 flex items-center justify-center gap-2">
<input className="h-full w-full outline-none rounded rounded-xl p-2 text-xl" type="text" onChange={(e) => setInput(e.target.value)} value={input} />
<input className="w-full hidden" id="fileSender" type="file" />
<label className="cursor-pointer text-2xl" htmlFor="fileSender">
<MdPermMedia />
</label>
<button onClick={inputSender} className="cursor-pointer text-xl">
<BsFillSendFill />
</button>
</div>
</div>
</div>
);
} else {
// If no user is selected, render nothing
return null;
}
};
export default CurrentChat;
Also my chat div show me from top so I have to scroll function if there any solution for that.
