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
29
votes
2 answers

useEffect dependency array and ESLint exhaustive-deps rule

I have a component that looks like this: const MyComponent = props => { const { checked, onChange, id } = props; const [isChecked, setChecked] = useState(false); useEffect(() => { onChange && onChange({ isChecked: !!checked, id }); …
Will Jenkins
  • 9,507
  • 1
  • 27
  • 46
28
votes
3 answers

How to setInterval for every 5 second render with React hook useEffect in React Native app?

I have React Native app and I get data from API by fetch. I created custom hook that get data from API. And i need to re-render it every 5 seconds. For it I wrapped my custom hook to setInterval and after my app become work very slowly and when I…
jocoders
  • 1,594
  • 2
  • 19
  • 54
27
votes
7 answers

How to Formik setFieldValue in useEffect hook

I have a Formik form that needs to dynamically change based on information passed via the router. I need to run a graphQL query to retrieve some data and populate the form with that retrieved data. I am able to set up the form and retrieve the data…
Ben Riga
  • 904
  • 1
  • 9
  • 16
26
votes
6 answers

TypeError: func.apply is not a function

I'm trying to use useEffect function like that: const [data, setData] = useState({ courses: [] }); useEffect(async () => { const result = await axios.get( "http://example.com/api/v1/categories/" ); …
sundowatch
  • 3,012
  • 3
  • 38
  • 66
25
votes
4 answers

How to access state when component unmount with React Hooks?

With regular React it's possible to have something like this: class NoteEditor extends React.PureComponent { constructor() { super(); this.state = { noteId: 123, }; } componentWillUnmount() { …
laurent
  • 88,262
  • 77
  • 290
  • 428
25
votes
3 answers

variable in useState not updating in useEffect callback

I'm having an issue while using useState and useEffect hooks import { useState, useEffect } from "react"; const counter = ({ count, speed }) => { const [inc, setInc] = useState(0); useEffect(() => { const counterInterval =…
Abhay Sehgal
  • 1,603
  • 2
  • 15
  • 21
25
votes
4 answers

useEffect runs infinite loop despite no change in dependencies

I have Function Component that utilizes hooks. In the useEffect hook, I simply want to fetch data from my back end and store the results in state. However, despite adding the data variable as a dependency, useEffect still fires on an infinite loop -…
Trevor
  • 423
  • 1
  • 4
  • 10
24
votes
2 answers

Why my nextjs component is rendering twice?

This is a component that render data from firebase storage and make it listed. What the function has to do is set the videos extracted from firebase storage to the useState. That way I can call videos and map into a new component, which happens to…
Diesan Romero
  • 1,292
  • 4
  • 20
  • 45
24
votes
1 answer

setState in React's useEffect dependency array

What's the idea behind defining the setState values inside useEffect's dependency array? const [someState, setSomeState] = useState(); ... useEffect(() => { // Do something setSomeState('some value'); }, [setSomeState]); React Hook useEffect…
Joseph K.
  • 1,055
  • 3
  • 23
  • 46
24
votes
4 answers

Stop useEffect from running on mount

I only want useEffect to run when my dependency list changes, it is also running every time the component is mounted, is there any way to not fire on mount? You can tell React to skip applying an effect if certain values haven’t changed between…
user210757
  • 6,996
  • 17
  • 66
  • 115
22
votes
5 answers

How to trigger useEffects before render in React?

I have a prop being passed from a parent component to a child component which changes based on the user's input. I want to trigger a data fetch in the child component when that prop changes before the child component is rendered. How can I do it? I…
NamanD
  • 473
  • 1
  • 4
  • 12
21
votes
4 answers

Why can't useEffect access my state variable in a return statement?

I don't understand why my useEffect() React function can't access my Component's state variable. I'm trying to create a log when a user abandons creating a listing in our app and navigates to another page. I'm using the useEffect() return method of…
Davis Jones
  • 1,504
  • 3
  • 17
  • 25
21
votes
8 answers

react-native-testing-library: how to test useEffect with act

I am using react-native-testing-library to test my react-native component. I have a component (for the purpose of this post, it has been over simplified): export const ComponentUnderTest = () => { useEffect(() => { …
TheSoul
  • 4,906
  • 13
  • 44
  • 74
20
votes
3 answers

React batch updates for multiple setState() calls inside useEffect hook

On this answer by Dan Abramov here on SO, I've found out the following: Does React keep the order for state updates? Currently (React 16 and earlier), only updates inside React event handlers are batched by default. There is an unstable API to…
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
19
votes
6 answers

How to run useEffect once even if there're dependencies? And why ESLint is complaining about it?

Consider the following example: const userRole = sessionStorage.getItem('role'); const { data, setData, type, setTableType } = useTable([]); useEffect(() => { const getData = async () => { // fetch some data from API const fetchedData =…
Mohamed Wagih
  • 1,246
  • 6
  • 17
1
2
3
…
99 100