useEffect doesn't trigger rerender on component in FireFor

Viewed 184

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>
    )
}
0 Answers
Related