Stack Overflow
Stack Overflow

Questions tagged [use-effect]

Questions related to the use of 'useEffect', which is a reactjs hook.

The hook useEffect, available in React since v16.8, is used to trigger functions after component renders, either for the first time, every time, or when one of the listed dependencies changes.

This can be seen as a loose replacement for componentDidMount and componentDidUpdate, however be aware that useEffect fires after rendering, not after mounting.

Optionally, useEffect can return a function that runs on unmounting the component.

3547 questions
1
vote
1 answer

How do I correctly implement setState() within useEffect()?

If this useEffect() runs once (using [] as the second parameter), setTicket(response.data) does not update the value of ticket with data. If I run useEffect() with [ticket] as the parameter, it updates the value of ticket with data, but useEffect…
tonytone
  • 37
  • 1
  • 5
1
vote
0 answers

React not updating state properly

I am creating a simple chance dice game using jsx functional components, however when I click a button that creates a roll it displays the post state. Here is my code for the component (reduced un-necessary code), fairly new to coding so excuse if…
Shimsho
  • 107
  • 9
1
vote
1 answer

useEffect hook not triggered when state is updated somewhere else

I`m having some problems trying to listen to state changes in this application. Basically I was expecting a useEffect hook to be fired after some state changed, but nothing at all is happening. This is what I got index.jsx // this is a…
Victor Ferreira
  • 6,151
  • 13
  • 64
  • 120
1
vote
0 answers

React / Gatsby - Same useEffect code isn't working in different components

UPDATE: I changed the cart, setCart variable to arr, setArr and with the same code, it works fine. I have a weird issue using useEffect in different components, it works as expected in my functional component that's imported on the home page of my…
Darren
  • 37
  • 6
1
vote
3 answers

How to use an `onClick` event to stop calling a function which is called by the useEffect hook?

How to use an onClick event to stop a recurring function call? The function call is recurring due to using useEffect, setInterval and clearInterval. An example shown in this article, the below code will run forever. How to stop the function from…
Greg
  • 8,175
  • 16
  • 72
  • 125
1
vote
0 answers

How can I detach a firebase listener in the useEffect hook cleaning function if the App component does not unmount

the useEffect cleanup function is not being triggered when I sign-out using (firebase) and I get the error Uncaught Error in onSnapshot: FirebaseError: Missing or insufficient permissions. once I get redirected to the sign-in/ sign-up page. I…
AziCode
  • 2,510
  • 6
  • 27
  • 53
1
vote
2 answers

React Hooks and Fetch: How to update a table based on a user input from an API search

I'm new to react/hooks I'm having a bit of trouble getting my head around updating a search on an API based on a user input. I currently have an API that im hitting to get a table of stocks. I then draw this table. I have created some radio buttons…
Jane Doe
  • 187
  • 1
  • 12
1
vote
0 answers

React Hooks: useState not updating state on first click of handler

When I click the button the handler runs but it takes another click to actually push the state value into the array: Here is my total code, with breaks of what I tried: import { Button, Header, Message, Table, TextArea } from…
Antonio Pavicevac-Ortiz
  • 7,239
  • 17
  • 68
  • 141
1
vote
1 answer

Update list after request react hooks

I have a list of items stored in state. Upon form submission i add another item to the list and then save that as the new state. This newly added item has the status "pending." At the same time i send a post request and if the post request fails i…
mdc29
  • 21
  • 2
  • 5
1
vote
0 answers

React useEffect doesn't have updated state data from Context API

Why does my app not get the latest data from state within useEffect? I have a component. Article.js that imports the context with useContext. Codesandbox import React, { useContext, useEffect } from "react"; import ArticleContext from…
arkhamDev
  • 1,028
  • 1
  • 15
  • 32
1
vote
1 answer

Edit data when using a custom data fetching React Hook?

I've been trying to make a chart with data fetched from an API that returns data as follows: { "totalAmount": 230, "reportDate": "2020-03-05" }, { "totalAmount": 310, "reportDate": "2020-03-06" } ... The date string is too long when…
George Huang
  • 27
  • 5
1
vote
1 answer

Can't perform a React state update on an unmounted component with useEffect hook

I have useEffect(() => { setLoading(true); axios .get(url, {params}) .then(data => { setData(data || []); setLoading(false); }) .catch(() => { …
Royalty
  • 463
  • 1
  • 4
  • 10
1
vote
2 answers

Can't access Array in UseEffect return statement

I am fetching data in React using axios inside a useEffect hook. When I console log the data from inside the useEffect hook everything is fine, but when I attempt to access it in the return statement, it returns Cannot read property 'Con' of…
Scott Green
  • 13
  • 5
1
vote
3 answers

React refresh the page after delete button

The delete function of my app is working fine, however it requires the user to manually refresh the page after the user click the delete button in order to see the new list of elements in my database. I would like to automatically refresh after the…
babla19830
  • 77
  • 1
  • 1
  • 10
1
vote
1 answer

Re-calling an async function in useEffect inside of another async function after a failed api fetching request

This is a bit tricky to explain, but here is what I'm doing: Trying to get json data from an async function called getJsonData() until data is fetched. After getting the data correctly, I want to get another set of json data from…
usersina
  • 1,063
  • 11
  • 28
1 2 3
…
99 100