Questions tagged [use-effect]
Questions related to the use of 'useEffect', which is a reactjs hook.
3,474
questions
1
vote
2
answers
31
views
Including function in React useEffect Dependency Array causes Unwanted Function Runs
In my React Typescript app, I am using a useEffect to call eventTracker whenever wallet.address changes.
const wallet = useWallet();
const eventTracker = useAnalyticsEventTracker();
useEffect(() =>...
0
votes
2
answers
27
views
JS Filter is not filtering out element from array of objects based on !== conditional
Not sure what I am doing wrong here - it could be to do with how I am using useEffect() but I'm not clear on how to fix it. Essentially, I am running .filter over an array of objects and trying to ...
0
votes
1
answer
24
views
update UI components when the prop changes in React
I am trying to make an motor cycle social media using React.
when user search for a motorCycle model, it will show all the specs, as well as people who own the motor cycle, so that an user can reach ...
0
votes
0
answers
25
views
Confusion around useEffect dependency and how to re-design this approach
I happen to be using two different effects that are almost identical.
relevant state:
const [selectedId, setSelectedId] = React.useState("");
const [refreshData, setRefreshData] = ...
0
votes
1
answer
27
views
How to Resolve "Can't perform a React state update on an unmounted component". React Native
ERROR Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous ...
0
votes
1
answer
27
views
Why it shows getting previous data whenever I navigate to details screen using react navigation, useeffect, and axios
I am trying to build a movie details react native app with expo and whenever I'm trying to navigate from home to details page, every time it shows me previous data on movie details page. How to solve ...
0
votes
1
answer
43
views
React js useState&useEffect array duplicates elements after a change
I am a beginner in react js programming. I'm trying to do the todo project, which is a classic project. When I delete or add an element from the list, the newly formed list appears on the screen by ...
2
votes
2
answers
24
views
Postscribe window not defined
I am trying to implement a form solution from formstack into my React/Gatsby website. To do so, I need to use postscribe to inject an external script. I've followed a couple other people and I have a ...
-1
votes
1
answer
30
views
Console log in useEffect prints nothing
I can't seem to figure out why this piece of React code isn't console logging any of the values...
const [href, setHref] = useState("");
const [whatever, setWhatever] = useState("&...
1
vote
2
answers
26
views
React componentWillUnmount hook (useEffect) with react hook (useState) array comes out empty?
Upon componentWillUnmount I want to send an array inside a useState to a postRequest function.
My useState array:
const [array, setArray] = useState([]);
My componentWillUnmount function:
...
2
votes
1
answer
24
views
Initializing component with parameter from local storage in react/nextjs
I have a component provided by an external library which I need to provide an access token to. This access token is saved in localStorage at this point and I would like to read it and pass it to the ...
0
votes
1
answer
44
views
React updating state needs 2 clicks in order to update
Let me start off by saying that I did look for other topics but I haven't found a solution yet so I'd like to walk through this with you guys.
I have a simple website with a search bar, a search ...
0
votes
1
answer
16
views
React component is not loading with latest state returned by multiple independent async-await requests
I'm creating a travel related form using React-typeScript. The first component
TravelForm
uses multiple async-await request within useEffect hook for updating state of the second component
...
2
votes
4
answers
69
views
UseEffect stop working after refreshing the site
I'm working in ReactJS. I have a form that is suppossed to be the configuration of another form. This specif form kind of looks like this:
const [startingDate, setStartingDate] = useState();
const ...
0
votes
1
answer
13
views
Directly using several states included in useEffect's dependency array
Considering an useEffect with 2 different states in the dependency array. The useEffect hook will run whenever any of those two states are updated, but if i update one of them, will i have access to ...
1
vote
1
answer
57
views
Why does useEffect only working properly once?
I'm having big problems that are getting me hella confused with React useEffect & States.
I have this following component, everything in it looks to work normally until I redirect to my app main ...
0
votes
1
answer
39
views
Javascript: array as useEffect depencendy
useEffect(() => {
changeColumnsState(mapOrder({array: columnsState, order: columnOrder, key: 'name'}))
}, [JSON.stringify(columnOrder)])
What is the best way to check if array changed? Not ...
2
votes
1
answer
33
views
Configuring private routes with react-router-dom v6
When the visitor goes to / (home), I want him to be redirected to /connexion" if he is not connected. I created Private routes for that, which works fine. Now, I want to implement the logic that ...
-1
votes
2
answers
28
views
My API request works but I can't access the content
I made a API request:
const [animes, setAnimes] = useState([]);
useEffect(() => {
axios
.get("https://api.jikan.moe/v4/anime/38000/characters")
.then((response) => ...
-1
votes
1
answer
26
views
How to trigger an useEffect hook in React?
I am trying to make an app that receives an ID for a product from the user, then finds the product from the database and updates the product on the screen. I receive the ID by using an useState and an ...
0
votes
2
answers
24
views
Why, despite pushing the elements, does my temp array contain no elements in the second useEffect?
I'm attempting to get the subtopics data, so first I have to get the courses in which a user has registered, then for each course I get the chapters, then for each chapter, I get the topics, and ...
1
vote
2
answers
31
views
My use effect is not firing when expected
I have an "Inbox" page. Depending on the current screen size, I render either a mobile friendly version of the inbox or a desktop version.
Currently my page doesn't render the messages every ...
0
votes
1
answer
25
views
Is setting two states in the same function or in the same useEffect harmful? My function component keeps rendering itself
//ChatProvider.tsx
import { useRouter } from 'next/router'
import React, { createContext, ReactNode, useEffect, useState } from 'react'
export interface IUser {
name: string
email: string
...
0
votes
0
answers
17
views
How can I change text color of dropdown after switching to/from dark mode. The change is happening after restarting the application
I want the text color of the dropdown to change just after switching to/from dark mode. My code is changing the color of the text by switching to/from dark mode but for that, I have to restart the ...
1
vote
2
answers
33
views
UseEffect is too slow and dont do my check in React
I have a problem with the following useEffect:
useEffect(() => {
getOrder();
}, []);
With getOrder i recover a row of my DB.
And then i have this:
if (order.tableId === tableID) {
...
0
votes
3
answers
40
views
Why my useEffect runs infinitely when promise gets rejected but only once when it gets fulfilled?
I am trying to fetch data from a mock backend created using JSON-server with the help of Axios. Now when the response status is 200 i.e., data fetched successfully the state of my success variable ...
0
votes
0
answers
20
views
ReactJS - infinite loop when dispatch the redux action
i got some problem for a couple hours, i really dont know why useeffect give me infinite loop when i dispatch the redux action ? because i want my page is will refresh after i change the value from ...
0
votes
1
answer
42
views
useEffect is not getting called
Please anyone help me. Thanks in advance.
while working, I got stuck on a problem. My useEffect is not getting called. I have changed dependencies several times, but in vain.
Here is my code:
import ...
0
votes
1
answer
20
views
ReactJS duplicate component when dispatch the redux action with useeffect
im new on react. im using react 18, so my problem is.. i dont know what just happen, when i dispatched the action and call it with useeffect, react just render the component twice, it will solve if i ...
0
votes
2
answers
41
views
Why do I get infinite requests using useEffect
I am trying to create a custom hook function to do data request, but when I call it after creating the hook, the result of infinite request occurs, how can I solve it
this is request hook
export const ...
0
votes
1
answer
12
views
Firestore get single document using usEffect doesntt work
I am trying to get a single document using useEffect but I don't know why when I'm trying to console log the data i don't get anything in browser console. But when I do it outside of useEffect then it ...
0
votes
0
answers
19
views
Memory leak or wrapped your action with act with jest and react-testing library
I'm testing an component who has 2 useEffect inside an component. Each fetch asynchronously some data.
// Pour récupérer les types de Flux
useEffect(() => {
// AbortController permet d'...
0
votes
2
answers
37
views
setState doesn't set immidaltly after a fetch API method
I've read in here a lot of the same question and I apply what works for everybody but it not seems to work for me . I try to fetch data from my API but even with the UseEffect hook my setList don't ...
0
votes
1
answer
18
views
How to prevent the router.asPath useEffect from rendering twice on load while using NextJs and getServerSideProps? [duplicate]
I am building an explore page with url query parameters (NextJs page with getServerSideProps)
If an external user goes onto this url domain.com/explore?type=actions&category=food it will fetch on ...
-1
votes
3
answers
48
views
React useEffect keeps fetching
I'm using useEffect to fetch data from DB and later the code displays that list of data.
useEffect(() => {
console.log("triggered")
fetch("http://localhost:8080/group/...
0
votes
0
answers
21
views
UseEffect Not Triggering Until I Refresh For AOS
I could not find an answer here AOS Library not working except for on refresh
I am making a react app and wanted to use AOS for animating https://michalsnik.github.io/aos/.
I have a functional ...
0
votes
1
answer
15
views
How can I use the filter method on a React component prop?
I'm trying to filter through an array to pull out all the objects that match a specific month. I've passed the month in from the parent component, and when I console.log(month) it successfully returns ...
0
votes
1
answer
33
views
useState isn't updating
I'm fetching an api and want to change useState when the api is returned. However, it simply isn't updating.
Any suggestions?
const fictionApi = "http://localhost:3000/fiction"
const ...
1
vote
1
answer
50
views
React useEffect delayed only with file upload
My file upload feature involves two components, ViewProjectAttachment to view list of attachments related to the project and AddAttachment, a form for uploading files. My files are stored in server ...
1
vote
2
answers
40
views
JSON.stringfy(ArrayData) change is not being subscribed in UseEffect in Nextjs
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faSearch,
faAmbulance,
faAnchor,
faPlus,
faFloppyDisk,
} from '@fortawesome/free-solid-svg-icons';
import {
Input,...
2
votes
2
answers
43
views
reactjs useEffect cleanup function after fetching data
I've read some good practices in reactjs using useEffect. I have a situation which I separated my function to fetch the data and call it on the useEffect hook. How could I make some cleanup functions ...
0
votes
2
answers
27
views
How to solve React rerenderign issue
have sum function and sum as dependency of useEffect. whenever the input change console.log("sum is") printed. console.log("sum is") is not printed when there is no dependency in ...
1
vote
3
answers
50
views
React useEffect non-stop fetching
I'm trying to fetch some data from the backend and display those data in a dropdown menu.
const[allGroups, setAllGroups] = useState([])
useEffect(() => {
console.log("useEffect")
...
0
votes
3
answers
50
views
useEffect doesn't want to update my display
I'm new here so take it easy :-)
I have a feeling I'm using useEffect incorrectly. Basically I have a few radio buttons on the page. When they are change/clicked I call a function that sets a variable ...
0
votes
1
answer
22
views
I would like to use an input field with values coming from a different place
I'm trying to display a fixture football games and enable the user to predict the scores. There are two arrays, one is the called FIXTURES, the other is called SAVED_PREDICTIONS and shows what the ...
0
votes
1
answer
48
views
UseEffect only works after refresh the page
I am using an useEffect inside a Context. I think the useEffect should run after load the page, but it does not work, but if I refresh the page(F5) then it works.
I am new Using React, but I think it ...
1
vote
1
answer
26
views
Whether the array should render four times?
Hi the following code renders the retrieved array 4 times in the console. It seems to me that in the development version this is normal behavior due to StrictMode. Am I right?
import {useState, ...
1
vote
2
answers
36
views
enlighten me about UseEffect Loop when data not changing
Hello i have this component and after some reading i have undestand that the useEffect is called again when data in array change but in my case that's not change and i get into a loop.
export default ...
1
vote
2
answers
40
views
React useEffect to fetch data not finished yet when try to sort data using React Router useSearchParams
I have a React component that try to load movies first from tmdb API. Then, I create a button to sort the movies using query params. I want to use query params because I want to preserve the URL so ...
-1
votes
0
answers
9
views
Identical API call works in one component of a React app but throws error in another - issue with mapping over the array where response is stored
I was able to successfully get a response from the wordpress API with the following code
import React, { useState, useEffect } from 'react';
const Blog = () => {
const [posts, setPosts] = ...