Page does not re-render.

[real arrow]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[topaz quiver]

Global variable can be found in variables.jsx

[warped flume]

Can you simplify your code? or Send snippets of relevant code?

[topaz quiver]

ill send some snippets;

//StatContainer.jsx
"use client";
import StatBox from "./Stat";
import { CharacterInfo } from "@/utils/Variables";
import { useEffect, useState } from "react";


export default function StatsContainer() {
 const [EventCallback,setEventCallback] = useState(false);
  const HandleEvent = ()=>{
    setEventCallback(true);
  }
  useEffect(() => {
    document.addEventListener("CharacterFileUpdated",HandleEvent);
  }, []);
  useEffect(()=>{console.log(CharacterInfo)},[EventCallback]);

return(
//my html stuff. 
)
}

variables.js

 let playerInfo = {
  "PlayerName": "",
  "CharacterName": "",
  "Race": "",
  "Class": "",
  "SubClass": "",
  "Background":"",
  "Alignment": "",
  "Experience": "",
};
 let playerStats = {
    "Health": 0,
    "MaxHealth": 0,
    "Proficiency": 0,
    "Strength": 10,
    "Constitution":10,
    "Dexterity":10,
    "Intelligence":10,
    "Wisdom":10,
    "Charisma":10,
  };
 let playerInventory;

export let CharacterInfo = {
  playerInfo,
  playerStats,
  playerInventory
}

//SaveSystem.jsx
"use client";
import { CharacterInfo } from "./Variables";

function SaveFile() {
  localStorage.setItem("Storage", JSON.stringify(CharacterInfo));
}

function LoadFile() {
  const doc = JSON.parse(localStorage.getItem("Storage"));
  if (doc) {
    Object.assign(CharacterInfo, doc);
  }
  document.dispatchEvent(new Event("CharacterFileUpdated"))
}

export { SaveFile, LoadFile};

[topaz quiver]

I have figured out my issue though. I did get a page reload but it doesnt reload the childcomponents. So i had to introduce a forcereload to the script.

But that adds a whole new problem. as i now have to apply this to every child.. Is there an easier way of doing this?