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
10
votes
9 answers

defaultValue of Input not working correctly on ant design

I am using ant design on my project. I get data from redux store with useEffect like this; const settingsRedux = useSelector(state => state.SETTINGS) after that I use this data for defaultValue of Input
mehmetdemiray
  • 976
  • 4
  • 13
  • 32
10
votes
1 answer

React-testing-library not rendering computed styles from stylesheet

Basic scenario is such: I have a component which has width: 100% as defined in a stylesheet. Therefore it should retain the width of its parent component. I want to calculate the width of my component and apply it to my child component because I am…
graffic
  • 111
  • 1
  • 5
10
votes
4 answers

React Hook delayed useEffect firing?

I am trying to use useEffect() in my react hook to update the state when my props change. but there is a delay and the useEffect is only firing after I click again on an element in my hook. Im fairly new to using hooks and any help would be…
Robert Templeton
  • 139
  • 1
  • 2
  • 9
10
votes
6 answers

React Hook "useState" is called in function "setResults" which is neither a React function component or a custom React Hook function

I am trying to make an API call in a functional component which is a react-hook and based on the result, re-render the component's content. Here is the code: Component which is calling the API- function IntegrationDownshift() { render( …
beta programmers
  • 513
  • 2
  • 8
  • 23
9
votes
2 answers

Why doesn't useEffect hook work on page refresh?

I'm working on a react project. I have my own API to fetch information. I'm using the useEffect hook to fetch profile information from API. My problem is when page mounts for the first time i can fetch the data with no problem but if i refresh the…
hakanAkdogan
  • 223
  • 2
  • 3
  • 10
9
votes
3 answers

useEffect not getting trigger after state change

I'm making a custom dropdown, that allows for pushing new items in the dropdown. For some reason the useEffect is not being triggered on state change, but it being triggered on initial render. I'm pretty sure I'm missing something small, but can't…
benishky
  • 901
  • 1
  • 11
  • 23
9
votes
1 answer

useEffect only if state changed

I have useEffect which calls an action from redux to fetch uploads useEffect(() => { getUploads() }, [getUploads]) However, I only want to fetch when the state changes, not fetch everytime the component renders. I have mapped the state…
Lokesh Bajracharya
  • 457
  • 2
  • 8
  • 19
9
votes
2 answers

React hooks. Periodic run useEffect

I need periodically fetch data and update it to the screen. I have this code: const [temperature, setTemperature] = useState(); useEffect(() => { fetch("urlToWeatherData") .then(function(response) { if (response.status !== 200) { …
Illya Yushchenko
  • 115
  • 1
  • 5
9
votes
3 answers

React - useEffect hook - componentDidMount to useEffect

I would like to convert this to an useEffect hook: CODE componentDidMount () { this.messagesRef.on('child_added', snapshot => { const message = snapshot.val(); message.key = snapshot.key; this.setState({messages:…
mph85
  • 1,276
  • 4
  • 19
  • 39
8
votes
3 answers

typeError: destroy is not a function nextjs

When I upgraded nextjs application from 9 to 12. There were some errors shown, that were not being taken take care of in previous version. One of them was: typeError: destroy is not a function In the console I could see it mentioned…
haris khan
  • 131
  • 1
  • 4
8
votes
1 answer

Why isn't react-native-onboarding-swiper working on my splash screen?

I have an application created doing my React Native studies. Once finished I have added some presentation screens and added 'react-native-onboarding-swiper' which seemed to me the easiest way that I found. I have also added…
Miguel Espeso
  • 194
  • 1
  • 7
  • 26
8
votes
1 answer

React Hook useEffect has missing dependencies: xxx. Either include them or remove the dependency array react-hooks/exhaustive-deps

I am making an api call from useEffect hook function ChangePassword(props) { const token = props.match.params.token; const [state, setState] = useState({ password: "", confirmPassword: "", }); const [status,…
Parag Katoch
  • 111
  • 1
  • 2
  • 4
8
votes
1 answer

Are React useEffect hooks guaranteed to execute in order?

Let's say I have this: function Example(props) { const { prop1, prop2 } = props; const latestProp1 = useRef(prop1); useEffect(() => { latestProp1.current = prop1; }, [prop1]); useEffect(() => { console.log(latestProp1.current); …
wisha
  • 643
  • 1
  • 6
  • 12
8
votes
1 answer

Use of useEffect with useLocation

I want to know what is the biggest difference between using (or not) useEffect to update useLocation. I usually find people set useLocation inside useEffect to update the state whenever the URL's path changes, but I found I don't need to do this to…
Jonathan Sandler
  • 323
  • 3
  • 17
8
votes
2 answers

How to clean up a Redux "useDispatch" action inside useEffect?

I found a lot of examples for this, but none uses Redux and useDispatch, so here's the situation ... I have an action file with an async action like this ... //postsActions.tsx export const asyncGetPostById = (postId: string) => { return async…
Ruby
  • 2,207
  • 12
  • 42
  • 71
1 2 3
…
99 100