React JS : this page is slowing down firefox, to speed up the browser , stop this page

so I have a react movie website which fetches data from tmbd , on home page it shows all trending movies data , and on the favorites page it shows all favorite movies , i routed these two pages but when i try to access favorites my browser gets really slow and tells me to stop the webpage , only after reloading the page , i get redirected to favorites page any solution in this ?

this is my nav bar where the links are , when i try to access the favourites page its shows that the page is slowing down

import React, { Component } from 'react'
import { Link } from "react-router-dom";

export default class Navbar extends Component {

  render() {
    return (
      <div style={{display:'flex', padding:'0.5'}}>

        <Link to="/" style={{textDecoration:'none'}}>
        <h1 style={{marginTop:'1rem',marginLeft:'1rem'}}>Movies App</h1>
        </Link>

        <Link to='/favourites' style={{textDecoration:'none'}}>
        <h2 style={{marginLeft :'5rem',marginTop:'2rem'}}>Favorites</h2>
        </Link>
      
     
      </div>
    )
  }
}

Here is my APP.js

import logo from './logo.svg';
import './App.css';
import React, { Component }  from 'react';
import Navbar from './Components/Navbar';
import Banner from './Components/Banner';
import Movies from './Components/Movies';
import Favourite from './Components/Favourite';
import {Switch,Route, BrowserRouter,Routes} from 'react-router-dom';

function App() {
  return (
    // <>
    // <Navbar></Navbar>
    // <Banner></Banner>
    // <Movies></Movies>
    // </>
    <BrowserRouter>
      <Navbar/>
      <Routes>
      
      <Route exact path="/" element={<HomePage/>}/>
      <Route exact path="/favourites" element={<Favourite/>}/>
      
      </Routes>
    
    </BrowserRouter>
  );
}

function HomePage() {
  return (
    <>
      <Banner />
      <Movies />
    </>
  );
}

export default App;

when i try to access the individual file without routing it works fine ,but when i try to access this with routing my browser starts to slow down and the data isnt fetched untill i reload the page

my Github repo link: https://github.com/faizxmohammad/React-MovieApp/tree/master/src

I am expecting to fetch data of favorites pages without slowing down the browser

I cloned your code.
The problem is in the file Favorites.js, line 45. You are changing the state, inside the render method. This causes loops. Move any state change, outside render method. Why? This is the workflow:
State change -> renders the component
You are changing your state, inside render component, so it becomes:
state change -> render (state change inside so leads to state change) -> state change -> render render (state change inside so leads to state change) ... infinite loop.