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
5
votes
1 answer

Is it bad practice to use an object property instead of the object as a dependecy in the useEffect hook?

I use the following code in my functional component. I want this component only to re-render when game._id changes. But React keeps giving me the warning: React Hook useEffect has a missing dependency: 'game'. Either include it or remove the…
NickTheTramp
  • 185
  • 1
  • 10
5
votes
3 answers

How do I fire React useEffect hook only once after state change?

I am new to React hooks and I am not sure how to achieve following goal. Let's say I have state1 and state2, and I use useEffect hook to call asyncFn1 and update state1. Now I want to wait for state1 change and use state1 value to call asyncFn2 and…
Orio Ryo
  • 132
  • 1
  • 2
  • 8
5
votes
1 answer

access useState variable in cleanup/return method of useEffect

I have a field like so const SimpleReactComponent = (props) => { const [title, setTitle] = useState('DEFAULT') useEffect(() => { return () => { // unmount console.log(`[${title}] while unmounting`) } }, []) return…
Anand Rockzz
  • 6,072
  • 5
  • 64
  • 71
5
votes
1 answer

React Lazy Load useEffect

I have a problem getting clientWidth from useEffect. There is a lazyLoad which loads a page with users. import {Suspense, lazy} from 'react'; const UsersContainer = lazy (() => import ('./ users / users-container')); const Index = (props) => { …
TilikWebDeloper
  • 219
  • 3
  • 7
5
votes
1 answer

react-query: is there a callback that get trigger regardless of whether getQuery is cached or not?

I want to do some side effects like setState and update context after the data is fetched. However, the onSuccess will not be executed when the data is in cache. Also useEffect doesn't work because if the data is cached, it doesn't change from…
XINDI LI
  • 625
  • 2
  • 7
  • 16
5
votes
1 answer

how to use fresh state inside the useeffect, but execute cleanup on unmount only

AFAIK, in the React Function Component, one has to use useEffect for componentWillUnmount functionality like below: useEffect(()=>{ return console.log("component unmounting"); },[]) I am making a form page, and want to submit the progress when…
Hyunwoong Kang
  • 530
  • 2
  • 9
5
votes
1 answer

React testing library: An update inside a test was not wrapped in act(...) & Can't perform a React state update on an unmounted component

In my test, the component receives its props and sets up the component. This triggers a useEffect to make an http request (which I mock). The fetched mocked resp data is returned, but the cleanup function inside the useEffect has already been called…
blomster
  • 768
  • 2
  • 10
  • 27
5
votes
2 answers

useCallBack react-hooks/exhaustive-deps warning

This is part of my code in React js: export default function Registration() { const [email, setEmail] = useState(null); const [password, setPassword] = useState(null); const [passwordRepeat, setPasswordRepeat] = useState(null); const…
Naor
  • 337
  • 1
  • 3
  • 11
5
votes
2 answers

What are the consequences of using extra dependencies in useEffect?

Say I have this code: useEffect(() => { makeBreakfast(pig) }, [pig, chicken]) makeBreakfast is called on pig, and it makes sense that it's in the dependencies. However in this dummy example, we also want to make breakfast with the pig whenever…
AncientSwordRage
  • 7,086
  • 19
  • 90
  • 173
5
votes
2 answers

How to reset React hook state with setTimeout in useEffect

I have a simple component that copies a link to the clipboard, and would like to swap the link icon with a checkmark. I have the logic setup to do so, but having an issue getting the state reset after 3 seconds to reset the button back to the link…
Matt
  • 1,561
  • 5
  • 26
  • 61
5
votes
1 answer

Is the "useEffect has a missing dependency" warning sometimes wrong?

I've been using hooks for a while and I never fully understand why React is forcing me to includes some dependencies that I don't want on my useEffect. The way I understand the 'dependencies' of a useEffect hook Add the values you want to 'listen'…
NullPointer
  • 63
  • 4
5
votes
3 answers

Use useState value in useEffect without making the state update useEffect

I'm working on a function that manages a string array based on object keys. Let's say it looks like this: import React, { useState, useEffect } from "react"; import FieldContext from "../contexts/FieldContext"; import io from…
Thimma
  • 1,343
  • 7
  • 33
5
votes
2 answers

when is the useEffect hook clean up function get called in react

I want to know when is the useEffect hook clean up function get called in react, Does it get called on dependency change or it get called when component is unmounted. For example in my component if i have useEffect useEffect(()=>{ return ()=>{ …
user8989
  • 580
  • 2
  • 6
  • 21
5
votes
5 answers

React Promise asynchronous tasks order not correct

I am making multiple calls with Promise. My API endpoints to fetch…
Koala7
  • 1,340
  • 7
  • 41
  • 83
5
votes
3 answers

How to listen to navigation state params changes in React Native?

I'm developing a Mobile Application using React Native. There, I'm passing something when navigating to the second page. So, assume my first screen has something like this. export default function firstScreen(props) { return( //data is a…
Sennen Randika
  • 1,566
  • 3
  • 14
  • 34
1 2 3
…
99 100