Tengo una aplicación React, el estado se administra con Redux.

El usuario puede buscar un juego y una multitud de resultados, cuyos títulos coinciden vagamente con la consulta, aparecerán al enviar. Cada vez que el usuario ingresa otra consulta, los resultados anteriores son reemplazados por los nuevos.

Después de 5-6 búsquedas, la aplicación se ralentiza considerablemente. Después de la séptima búsqueda, deja de funcionar por completo y Chrome muestra un aviso de "página que no responde".

La porción redux se ve así:

 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'; import rawg from '../../apis/rawg'; const initialState = { results: [], }; export const fetchGames = createAsyncThunk( 'gamesSearch/fetchGames', async (query) => { const response = await rawg.get('/games', { params: { search: query, }, }); return response.data.results; } ); const gamesSearchSlice = createSlice({ name: 'gamesSearch', initialState, reducers: {}, extraReducers: { [fetchGames.fulfilled]: (state, action) => { const results = action.payload; const parsedResults = results.map((result) => { return { name: result.name, slug: result.slug, backgroundImage: result.background_image, genres: result.genres.map((genre) => genre.name).join(', '), id: result.id, released: result.released ? `${result.released.split('-')[2]}.${ result.released.split('-')[1] }.${result.released.split('-')[0]}` : null, }; }); }, }, }); export default gamesSearchSlice.reducer; export const selectResults = (state) => state.gamesSearch.results;

Y el componente desde el que se envía la búsqueda se ve así:

 import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { fetchGames } from './gamesSearchSlice'; const SearchBar = () => { const [query, setQuery] = useState(''); const dispatch = useDispatch(); const onSubmit = (e) => { e.preventDefault(); if (!query) return; dispatch(fetchGames(query)); }; return ( <div className="searchbar"> <form onSubmit={onSubmit}> <input className="searchbar__input" type="text" placeholder="Search for a game..." value={query} onChange={(e) => setQuery(e.target.value)} /> </form> </div> ); }; export default SearchBar;

¿Me estoy perdiendo algún detalle sobre cómo funcionan juntos React y Redux, o hay algún problema con mi código desde una perspectiva fundamental (es decir, no estoy manejando los datos de manera suficientemente eficiente con JavaScript)?