I developed an application where I get an api (pokeAPI) with pokemons, and basically I have a global array with "myPokemons", so I want to display all my pokemons except the ones in that array, so I created the function "filterMyPokemons" that I filter the pokemons that should be displayed, and then I call this function in useEffect so that it is updated along with the page, putting a dependency array from the API list. The problem is that I now have an infinite loop that hurts the performance of the application.
import * as C from './styles';
import logo from '../../assets/pokelogo.png';
import { useContext, useState } from 'react';
import { useApi } from '../../hooks/useApi';
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import Pokelist from '../../components/PokeList';
import CatchingPokemonIcon from '#mui/icons-material/CatchingPokemon';
import CatchContext from '../../context/Context';
const Homepage = () => {
const api = useApi();
const { showMyPokemons } = useContext(CatchContext);
const navigate = useNavigate();
const [pokemonList, setPokemonList] = useState([]);
const [loading, setLoading] = useState(false);
const [text, setText] = useState('');
const [myPokemonsList, setMyPokemonsList] = useState([]);
const [pokemonListFiltered, setPokemonListFiltered] = useState([]);
useEffect (() => {
const getAllPokemons = async () => {
const myPokemons = await showMyPokemons();
const pokemon = await api.getAllPokemon();
setLoading(true);
setPokemonList(pokemon);
setMyPokemonsList(myPokemons);
setLoading(false);
}
filterMyPokemons();
getAllPokemons();
}, [myPokemonsList]);
const filterMyPokemons = async () => {
const filteredList = await pokemonList.filter(pokemons => !myPokemonsList.includes(pokemons.name))
return setPokemonListFiltered(filteredList);
};
const lowerSearch = text.toLocaleLowerCase();
const filteredPokemons = pokemonListFiltered.filter(pokemon => pokemon
.name.toLowerCase().includes(lowerSearch)
);
const handleHome = () => {
navigate('/')
}
const handleMyPokemons = () => {
navigate('/mypokemons')
}
return (
<C.Container>
<C.Logo>
<img src={logo} alt="" />
</C.Logo>
<C.Navbar>
<input
type="text"
placeholder='Busque um pokémon...'
onChange={(e) => setText(e.target.value)}
value={text}
/>
</C.Navbar>
<C.Pokedatabase onClick={handleMyPokemons}>
<button>Meus pokémons <i><CatchingPokemonIcon /></i></button>
</C.Pokedatabase>
<C.Pokelist>
{filteredPokemons.map(pokemon => {
return (
<Pokelist
name={pokemon.name}
/>
)
})}
</C.Pokelist>
</C.Container>
)
}
export default Homepage;
If I leave useEffect's dependency array empty, the items are not displayed, but if I leave any dependencies it causes an infinite loop. How to solve this problem?
The problem comes with updating the myPokemonsList array within the useEffect hook that depends on that array.
useEffect (() => {
const getAllPokemons = async () => {
const myPokemons = await showMyPokemons();
const pokemon = await api.getAllPokemon();
setLoading(true);
setPokemonList(pokemon);
setMyPokemonsList(myPokemons); // Here's the infinite loop
setLoading(false);
}
filterMyPokemons();
getAllPokemons();
}, [myPokemonsList]); // Here's the infinite loop
You should have another use effect for updates on the myPokemonList in order to avoid updating and depending on the same list.
Related
**the code below is my context which I am using useFetch **
**when i change the url with changing the searchTerm **
** i am getting an infinite loop **
import React, { useContext, useState, useEffect } from "react";
import { useFetch } from "../hooks/useFetch";
const context = React.createContext();
const AppProvider = ({ children }) => {
let url = " https://www.thecocktaildb.com/api/json/v1/1/search.php?s=";
let [searchTerm, setSearchTerm] = useState("a");
useFetch(`${url}${searchTerm}`);
setSearchTerm('s');
return <context.Provider value={"hello"}>
{children}
</context.Provider >
}
const useGlobal = () => {
return useContext(context);
}
export { AppProvider, useGlobal };
** the code below is my custom hook useFetch**
`
import { useEffect, useState } from "react";
export const useFetch = (url) => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const getData = async () => {
try {
const response = await fetch(url);
const jsonResponse = await response.json();
setData(jsonResponse);
setLoading(false);
} catch (err) {
console.log(err);
}
}
useEffect(() => {
getData();
}, [url])
return { data, loading };
}
`
I tried to change the search Term like this
searchTerm="h"
and it works perfectly but when i change searchTerm with setSearchTerm it gives me infinite loop
setSearchTerm('s'); inside a useEffect
const [url] = useState(" https://www.thecocktaildb.com/api/json/v1/1/search.php?s=");
const [searchTerm, setSearchTerm] = useState("a");
const { data, loading } = useFetch(`${url}${searchTerm}`);
useEffect(() => {
setSearchTerm('s');
}, [])
import { useState, useEffect } from "react";
import LoginModal from "./LoginModal";
import { NavLink, useLocation, useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { userLogout } from "../Features/User/userSlice";
import decode from "jwt-decode";
const Header = ({ toggleModalShow, showModal }) => {
const [burgerAnimation, setBurgerAnimation] = useState(false);
const [user, setUser] = useState();
const location = useLocation();
const dispatch = useDispatch();
const navigate = useNavigate();
// for showing login/sign up modal
const showModalButton = () => {
toggleModalShow();
};
const handleBurgerAnimation = () => {
setBurgerAnimation(!burgerAnimation);
};
const handleLogout = async (id) => {
await dispatch(userLogout({ id, navigate, dispatch }));
setUser(null);
};
const burgerListItemAnimation = ...
const burgerIconAnimation = ...
const guestHeader = (
<ul>
...
</ul>
);
const userHeader = (
<ul>
...
</ul>
);
useEffect(() => {
if (localStorage.getItem("user") && !user) {
setUser(JSON.parse(localStorage.getItem("user")));
}
const accessToken = user?.accessToken;
if (accessToken) {
const decodedAccessToken = decode(accessToken);
if(decodedAccessToken.exp * 1000 < new Date().getTime()){
handleLogout(user.user._id);
}
console.log(decodedAccessToken);
}
}, [location, user]);
return (
<header className="header">
...
</header>
);
};
export default Header;
Hi all.I just wanted to try to log out the user when the expiration date is over. If i put 'handleLogout' to useEffect dependicies warning doesnt change. Why am i getting this warning ? What kind of warning may i get if i dont fix that ? And finally, if you have time to review the repo, would you give feedback ?
repo : https://github.com/UmutPalabiyik/mook
If you keep handleLogout external to the useEffect hook it should be listed as a dependency as it is referenced within the hook's callback.
If i put handleLogout to useEffect dependencies warning doesn't
change.
I doubt the warning is the same. At this point I would expect to you to see the warning change to something like "the dependency handleLogout is redeclared each render cycle, either move it into the useEffect hook or memoize with useCallback..." something to that effect.
From here you've the 2 options.
Move handleLogout into the useEffect so it is no longer an external dependency.
useEffect(() => {
const handleLogout = async (id) => {
await dispatch(userLogout({ id, navigate, dispatch }));
setUser(null);
};
if (localStorage.getItem("user") && !user) {
setUser(JSON.parse(localStorage.getItem("user")));
}
const accessToken = user?.accessToken;
if (accessToken) {
const decodedAccessToken = decode(accessToken);
if (decodedAccessToken.exp * 1000 < new Date().getTime()) {
handleLogout(user.user._id);
}
console.log(decodedAccessToken);
}
}, [location, user, id, navigate, dispatch]);
Memoize handleLogout with useCallback so it's a stable reference and add it to the effect's dependencies.
const handleLogout = useCallback(async (id) => {
await dispatch(userLogout({ id, navigate, dispatch }));
setUser(null);
}, [id, navigate, dispatch]);
...
useEffect(() => {
if (localStorage.getItem("user") && !user) {
setUser(JSON.parse(localStorage.getItem("user")));
}
const accessToken = user?.accessToken;
if (accessToken) {
const decodedAccessToken = decode(accessToken);
if (decodedAccessToken.exp * 1000 < new Date().getTime()) {
handleLogout(user.user._id);
}
console.log(decodedAccessToken);
}
}, [location, user, handleLogout]);
when i use fetch to bring the list of notes and consol.log it nothing shows up. The url is not wrong i have carefully checked it. Here is the code:
import React, { useState, useEffect } from 'react'
const NotesListPage = () => {
let [notes, setNotes] = useState([])
useEffect(() => {
}, [])
let getNotes = async () => {
let response = await fetch('http://127.0.0.1:8000/api/notes/')
let data = await response.json()
console.log(data)
setNotes(data)
}
return (
<div>
</div>
)
}
export default NotesListPage
here is the api part:
#api_view(['GET'])
def getNotes(request):
notes = Note.objects.all()
serializer = NoteSerializer(notes, many=True)
return Response(serializer.data)
import React, { useState, useEffect } from 'react'
const NotesListPage = () => {
let [notes, setNotes] = useState([])
useEffect(() => {
getNotes();
}, [])
let getNotes = async () => {
let response = await fetch('http://127.0.0.1:8000/api/notes/')
let data = await response.json()
console.log(data)
setNotes(data)
}
return (
<div>
</div>
)
}
export default NotesListPage
You are not calling your function 'getNotes'
The way I would do it, it to fetch your data in the Effect hook and set it in your state hook there.
import React, { useState, useEffect } from 'react'
const NotesListPage = () => {
let [notes, setNotes] = useState([])
useEffect( async () => {
const response = await fetch('http://127.0.0.1:8000/api/notes/')
.then(response => response.json())
setNotes(response)
}, [])
console.log(notes)
return (
<div>
</div>
)
}
export default NotesListPage
*Edit
Cleaner would be to have the fetch in a seperate function doing the same thing and just calling that function in your effect hook (see other answer above*)
I tried destructuring only the props that I wanted from the state used to store the JSON data, and then use a state for a counter value so I can have some next/prev buttons and display only 1 image at a time (using as the index for the array, the counter value, therefore it would be 1 item at a time and the next/prev buttons would incremend/decrement by 1 ). I have done this on a previous project and it worked but for some reason now it does not.
Any ideas why not working, or perhaps some insight for a different approach ?
import React, { useEffect, useState } from "react";
import Loading from "./loading";
const key = "#!$!#$!#$#!$!#$#!#$!$#!$!#$!$#!$";
const url = `https://api.unsplash.com/photos/?client_id=${key}`;
console.log(url);
//main Component
function App() {
//states
const [loading, setLoading] = useState(true);
const [images, setImages] = useState([]);
const [counter, setCounter] = useState(0);
const fetchImages = async () => {
setLoading(true);
try {
const response = await fetch(url);
const image = await response.json();
setLoading(false);
setImages(image);
} catch (error) {
console.log(error);
setLoading(true);
}
};
useEffect(() => {
fetchImages();
}, [url]);
//loading
if (loading) {
return (
<main>
<Loading></Loading>
</main>
);
}
//primary return
const { id, created_at, description, urls } = images[counter];
return (
<main>
{urls.map((image) => {
return <img src={image.full}></img>;
})}
</main>
);
}
export default App;
How can I use LocalStorage in a functional component like this
I know how do this in a class component but can I solve this problem in this case?
ERROR: TypeError: repositories is not a function
export default function Main() {
const [newRepo, setNewRepo] = useState('');
const [repositories, setRepositories] = useState([]);
const [clearInput] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
repositories(localStorage.getItem('repositories'));
if (repositories) {
setRepositories(JSON.parse(repositories));
}
}, [repositories]);
useEffect((_, prevState) => {
if (prevState.repositories !== repositories) {
localStorage.setItem('repositories', JSON.stringify(repositories));
}
});
In your first useEffect, the repositories is your state which an array. Not a function.
Also, in your second useEffect you need to make correction to the way you access the prevState in hooks.
Fix for 1st useEffect
export default function Main() {
const [newRepo, setNewRepo] = useState('');
const [repositories, setRepositories] = useState([]);
const [clearInput] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
const localRepoItems = localStorage.getItem('repositories');
if (localRepoItems) {
setRepositories(JSON.parse(localRepoItems));
}
}, []); // do not give the dependency as repositories as it will go to infinite loop
});
To obtain previous state in hooks, you can write a little custom hook:
Like this:
export const usePrevious = value => {
const ref = React.useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}
Usage in your component:
const prevRepositories = usePrevious(repositories);
useEffect(() => {
if (prevRepositories.length !== repositories.length) {
localStorage.setItem('repositories', JSON.stringify(repositories));
}
}, [repositories]);