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
7
votes
5 answers

UseEffect - Use state to create an external Link

I have a method getUrl() calling an API endpoint useEffect(() => { getUrl() .then(x => x.json()) .then(x => { const { result } = x; }); }); I can see in the Console the call in my page as you can see in the…
Koala7
  • 1,340
  • 7
  • 41
  • 83
7
votes
2 answers

asynchronous context with useEffect in React

im trying to create an api request with the header value, that is received from a context component. However, as soon as the page component is loaded, it throws an Cannot read property '_id' of null exception. Is there a way to run the useEffect…
Tony Caterev
  • 127
  • 1
  • 2
  • 13
7
votes
2 answers

React useEffect dependency of useCallback always triggers render

I have a mystery. Consider the following custom React hook that fetches data by time period and stores the results in a Map: export function useDataByPeriod(dateRanges: PeriodFilter[]) { const isMounted = useMountedState(); const [data,…
John Reilly
  • 5,791
  • 5
  • 38
  • 63
7
votes
2 answers

How to use variable declared in useEffect() in another function?

p.s solved the problem i was having, but i would still like to hear your thoughts on this and my code, if you have time :) I can only assign a value to that variable ONLY after render has been completed, so i assume i must declare that variable in…
Irakli Tchigladze
  • 693
  • 2
  • 7
  • 13
7
votes
3 answers

Cancel all subscriptions in a useEffect cleanup function created by Context.Consumer

Each time when onClick executes I received a warning message about memory leak. How component can be can unsubscribed from the Context.Consumer in my functional component with useEffect hook? I did not find a way how to unsubscribe from the…
kusha
  • 151
  • 1
  • 4
  • 6
7
votes
1 answer

React Hooks useEffect, adding dependency triggers infinite loop

Inside of my useEffect, I have a props dependency (setIsValid). When I add this dependency to the useEffect, it lands in an infinite loop. Parent when Calling Child Component: const setIsValid = (bool) => { const tmpStateCopy = Object.assign({},…
Emre
  • 163
  • 2
  • 10
6
votes
4 answers

Why is localStorage getting cleared whenever I refresh the page?

Like the title says, the localStorage I set registers the changes made to the todoList array and JSON.stringifys it; however, whenever I refresh the page the array returns to the default [] state. const LOCAL_STORAGE_KEY = "task-list" function…
TheCryptoChad
  • 85
  • 1
  • 1
  • 4
6
votes
1 answer

What is the difference between defining a function outside useEffect and calling that function inside of it and defining a function inside useEffect?

I have few scenarios and I'd like to understand the differences in regards to rendering and performance. The example shown below is for a simple function but please consider a more complex one too as well as an async function. Scenario 1: Defining…
mongonoob
  • 103
  • 1
  • 5
6
votes
2 answers

How to listen the state changes in svelte like useEffect

I have read some article about state change listener, As I am a very beginner to the svelte environment I can't figure out what is the most efficient way to listen to the state change. Let us take state variable as X and Y Method 1: $: if (X||Y)…
Naveen DA
  • 4,148
  • 4
  • 38
  • 57
6
votes
2 answers

useEffect not running on refresh

I'm having an issue with the useEffect hook on this blog site I'm building. Im trying to fetch all the blogs from the backend so I can use them to populate this section with the latest five blogs. When I use the code below, the empty array in the…
David Fertitta
  • 95
  • 1
  • 1
  • 6
6
votes
3 answers

Is `useLayoutEffect` preferable to `useEffect` when reading layout?

One difference about useLayoutEffect vs useEffect is that useLayoutEffect will be fired synchronously after DOM mutation and before the browser paint phase. (Reference) However, I've came across some articles and they all seem to recommend to use…
dongnhan
  • 1,698
  • 9
  • 12
6
votes
5 answers

ClickAwayListener doesn't fire when clicking on a link/button to navigate to other route

I'm using Material-UI ClickAwayListener component with the existing code that used react-router. The button is outside of the ... and so I expected the onClickAway to fire before navigating to other route.…
kunquan
  • 1,127
  • 1
  • 10
  • 24
6
votes
1 answer

React: Prevent infinite Loop when calling context-functions in useEffect

In my react app, I am rendering different instances of Components and I want them to register/unregister in a Context depending if they are currently mounted or not. I am doing this with two Contexts (ItemContext provides the registered…
Giraphi
  • 1,383
  • 1
  • 11
  • 26
6
votes
7 answers

Cannot destructure property of object from context

Re-posting a similar question to my last because of a new issue. I'm trying to use context with hooks to manage authentication in my react app. I'm getting the error TypeError: Cannot destructure property 'isAuthenticated' of 'Object(...)(...)' as…
userNick
  • 503
  • 4
  • 7
  • 25
6
votes
3 answers

Can't set props to state using useState React

I'm new to react. I've read through react documentation. I've no idea why it is not working. So, I come up here. I'm trying to create pagination in react. Below is my table component. const Table = (props) => { const { description, itemCount,…
Htet Phyo Naing
  • 464
  • 7
  • 20
1 2 3
…
99 100