React UI is not updating - reactjs

Question

On every action I am pushing new array of object in the local storage. After that I am mapping over the localstorage data. Now the problem is the UI is not updating autometicaly on every new data inserted to the array of object. But I can see new data on every manual refresh.
Hare is the data I am inserting into the local storage:
const handleSubmit = (e) => {
e.preventDefault();
const input = e.target.input.value;
chatLog.push({ user: "Me", text: `${input}` });
localStorage.setItem("chatLog", JSON.stringify(chatLog));
}
Here I have mapped the data in anorther component:
const chatLog = JSON.parse(localStorage.getItem("chatLog"));
return (
<div>
{chatLog.map((message) => (
<div
className={`chat ${
message.user === "Me" ? "chat-end" : "chat-start"
}`}
>
<div className="chat-image avatar">
<div className="w-10 rounded-full">
<img
src={message.user === "Me" ? Me : Rakib}
alt={message.user === "Me" ? "user" : "rakib"}
/>
</div>
</div>
<div className="chat-header">{message.user}</div>
<div className="chat-bubble">{message.text}</div>
</div>
))}
</div>
);
Now I want that, Everytime the localStorage get new data. Then the UI will update autometicaly.

Answer 1

When new data is added to the localStorage, you need to use some state management solution like React's state or a third-party library like Redux.
One way to achieve this is to use React's state to store the chatLog data and update it whenever a new message is added to the localStorage. Example:
import { useState, useEffect } from "react";
function ChatLog() {
const [chatLog, setChatLog] = useState(JSON.parse(localStorage.getItem("chatLog")) || []);
useEffect(() => {
const handleStorageChange = (e) => {
if (e.key === "chatLog") {
setChatLog(JSON.parse(e.newValue));
}
};
window.addEventListener("storage", handleStorageChange);
return () => {
window.removeEventListener("storage", handleStorageChange);
};
}, []);
const handleSubmit = (e) => {
e.preventDefault();
const input = e.target.input.value;
const newMessage = { user: "Me", text: `${input}` };
chatLog.push(newMessage);
localStorage.setItem("chatLog", JSON.stringify(chatLog));
setChatLog([...chatLog, newMessage]);
e.target.reset();
};
return (
<div>
{chatLog.map((message, index) => (
<div
key={index}
className={`chat ${
message.user === "Me" ? "chat-end" : "chat-start"
}`}
>
<div className="chat-image avatar">
<div className="w-10 rounded-full">
<img
src={message.user === "Me" ? Me : Rakib}
alt={message.user === "Me" ? "user" : "rakib"}
/>
</div>
</div>
<div className="chat-header">{message.user}</div>
<div className="chat-bubble">{message.text}</div>
</div>
))}
<form onSubmit={handleSubmit}>
<input type="text" name="input" />
<button type="submit">Send</button>
</form>
</div>
);
}