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 to fetch async data from Higher Order Components in React

How can I make an API call (possibly async) to fetch data to be able to use it further. The class does not render anything by itself. I am new to functional components and am trying to - fetch data in AppForm and - send it over as an argument to…
vv1129
  • 37
  • 1
  • 1
  • 6
1
vote
0 answers

Testing Mock Async Deta Fetching in React Components with useEffect and useState

I have a component that fetches some data in useEffect and sets state with the response using useState functions. This seems like a pretty idiomatic pattern but I'm not having much luck figuring out how to test it. In this case,…
ItsGeorge
  • 2,060
  • 3
  • 17
  • 33
1
vote
2 answers

React custom hooks state change but useeffect not rerendering

I build custom hook for updating filter state that is shared between two component. Even when adding the filter as dependency on the useEffect the other component does not accept the state change. Why is that happening? later edit: I'm building a…
Eden G
  • 60
  • 8
1
vote
2 answers

value of state is always default. React js 16.12.0

I have two useEffect-s. One is used to fetch data from api and save it in the state and second is called only once and it starts listening to websocket event. In the websocket event handler I log the fetched data but it always has the default…
mister_giga
  • 560
  • 1
  • 15
  • 37
1
vote
2 answers

React useEffect, dependency list not working

I'm sure I have got the wrong understanding on this. I have the following component const Comp = () => { const filter = 'a'; useEffect(() => { console.log('executing effect'); loadFriends(); }, [filter]); return ( …
tmp dev
  • 8,043
  • 16
  • 53
  • 108
1
vote
1 answer

How to prevent race condition from throwing off API call?

I'm trying to make an axios.get call and set a const called movies held in the component state with the data that comes back from that call. However, it appears that the API call is not working. The data from the API call never populates the movies…
Jevon Cochran
  • 1,565
  • 2
  • 12
  • 23
1
vote
3 answers

Why wrap code into "useEffect" without second parameter and nothing to clean up?

In most react examples I have seen, people seem to avoid placing code directly into a functional component's body but instead are wrapping it into useEffect(() => {...}). E.g. in the official docs: function Example() { const [count, setCount] =…
Giraphi
  • 1,383
  • 1
  • 11
  • 26
1
vote
1 answer

Can't set scrollTop of HTMLElement in useEffect without timeout function

I have a text log component that I want to scroll to the bottom whenever it receives a new log entry, so I have it set the parent's scrollTop to it's scrollHeight in useEffect(). However, this has no effect: const Log = ({ entries }: LogProps) => { …
RoboticWater
  • 21
  • 2
1
vote
1 answer

React useEffect: setState in return function does not update state in time

I have made an example here: https://codesandbox.io/s/cocky-brattain-de5r4 I'm making a tabbed interface when switching from one to another, a component should first unregister itself (clearing some values from parent state) through the useEffect…
Xun Yang
  • 4,209
  • 8
  • 39
  • 68
1
vote
2 answers

React class does not update when state changes

I am making a game where I need different style for selected (pressed) item. I am trying to attach "selected" class to div if that div is clicked. In other words, I have a state: const [pressedGifId, gifPressed] = useState(null); and when…
vytaute
  • 1,260
  • 4
  • 16
  • 36
1
vote
2 answers

React warning useEffect missing dependency

In my React application I have a redux store that contains a user with the following model: { id: "", name: "", email: "", isAdmin: false, client: { id: undefined }, token: "", tokenExpiry: null }; On a simple page, I am querying a…
Sheixt
  • 2,546
  • 12
  • 36
  • 65
1
vote
1 answer

Automated Slider with React useState and UseEffect

How do I make my carousel to slide automatically without the use of left and right arrow. The left and right Method is working already. This is the code I have so far: function Slider() { let Arry = [ ,
Ayomikun
  • 27
  • 4
1
vote
1 answer

using Materialize CSS initializations within React's useEffect doesn't work like it does in componentDidMount

using componentDidMount() to initialize materialize js works fine as shown in the documentation componentDidMount() { document.addEventListener("DOMContentLoaded", function() { var elems = document.querySelectorAll(".sidenav"); …
alkhatim
  • 353
  • 1
  • 10
1
vote
3 answers

values.map is not a function reactjs

i am fetchin details from database wanted to display that into the table, but for initial purpose i wanted to just display on browser without table and stuff.. am getting values.map is not a function but i could the see values printed in…
Logesh P
  • 209
  • 4
  • 18
1
vote
1 answer

Multiple React components relying on the same UseEffect() condition

Let's say I have two React components, A and B. Both components have a useEffect that 'listens' to the same condition (condition1, which could be a global variable, as in some React Context). When the context variable changes, which component's…
Jorge
  • 21
  • 2
1 2 3
…
99
100