I'm having trouble with component re-rendering in Firefox, it works perfectly fine in all other browsers (Chrome, Brave, Edge, Opera). I'm getting prop played which is a boolean and it is in dependencies in useEffect. played is updated in another component. So once the value of played is changed, Panel component should re-render. I tried writing console.log in all possible places, it all works fine, I'm getting correct played value but the component does not re-render in Firefox..
I guess this is because of Gecko engine works in a different way but can't figure it out..
Could you please help me with this or at least give me a hint?
export default function Panel({played, PORT, mod}) {
const [fromServer, setFromServer] = useState([]);
useEffect(() => {
async function getApiData() {
const requestOptions = {
method: 'GET',
mode: 'cors',
headers: { 'Content-Type': 'application/json' },
};
let response = await fetch(`${PORT}/api/games/?mod=${mod}`, {requestOptions});
if (response.ok) {
let json = await response.json();
setFromServer(json.history);
}
};
getApiData();
}, [played])
return(
<div>{fromServer}{played}</div>
)
}