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

React Native fetch before render components

I am creating a Reat Native app which connects to an API from which it gets data. I am using React Navigation to handle navigation. The app has a Stack Navigator and a Bottom Tab Navigator. The StackNavigator has 4 screens: SignupScreen which…
franciscofcosta
  • 833
  • 5
  • 25
  • 53
1
vote
2 answers

React Hooks: setState, when does it actually take effect?

So I'm trying to understand React Hooks and how to use them. I can make a fetch inside a component as follows: var [pages,setPages] = useState(); var [page,setPage] = useState(); async function fetchData() { await…
yahms23
  • 326
  • 2
  • 11
1
vote
1 answer

Why is this useEffect dependency (which is being used) unnecessary? (Eslint log)

I'm working on this React app which uses websockets, first off, some background information: I got a fooArray which the user can change with a hook, I got a socket which changes on mount. Now, I got the following code, the // foo array change…
Thimma
  • 1,343
  • 7
  • 33
1
vote
1 answer

useEffect is in infinite loop

I have a component which once once it rendered I need to redirect a user to another path and I'm using useEffect hook of react but it's getting rendered over and over and over without stopping: const App: FunctionComponent<{}> = () => { const…
Errand
  • 121
  • 9
1
vote
1 answer

useEffect() React Hook Dependency Array lint rule

The lint rules force me to include 'dispatch' also as a dependency for useEffect(). (If I don't add dispatch as dependency, it throws warning that "React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the…
Ganesh Krishna
  • 714
  • 1
  • 7
  • 13
1
vote
1 answer

If suppose 2nd Render is same as 1st Render then 1st Render will unmounts or not?

I'm a beginner in React and stuck with some problem.If suppose 2nd Render is same as 1st Render(means that next setState() calls won't cause any change to state) then 1st Render will unmounts or not as we know the React only updates the changes to…
Abhijeet
  • 588
  • 1
  • 4
  • 18
1
vote
2 answers

Data fetching with useDispatch inside useEffect (code work but with error)

I tried to use useEffect for fetching data from API with useDispatch hook: const dispatch = useDispatch(); useEffect(() => {dispatch(actions.fetchSearch(submitValue))}, [submitValue, dispatch]); Where submitValue - it is an input value for…
andrrrrrre
  • 115
  • 1
  • 7
1
vote
1 answer

Why the interval callbacks belongs to first render is not capable of sending the update instruction(count +1) to React everytime the interval fires?

I'm a beginner in React and stuck with some problem. As below we can able to see that useEffect can be called for only once for the Counter Functional component below(as in the dependency array I haven't specify the count state). But why the…
Abhijeet
  • 588
  • 1
  • 4
  • 18
1
vote
1 answer

problem with rendering content using useEffect hook

I am showing list of coupons based on category selected using useEffect and saga. const initialState = { is_loading: true, coupon_data: [], error_msg: '', } This is my initial state state. is_loading set to true default so that…
Paritosh Mahale
  • 1,238
  • 2
  • 14
  • 42
1
vote
1 answer

is there anyway to avoid dependency array in react hook?

I have a functional component lets say Offers.This component on load calls an api say api_1. once the response of api_1 is received and is success I want to trigger another api call say api_2 and based on the response of api_2 want to show success…
Ashish Sharma
  • 117
  • 6
1
vote
1 answer

Using hooks in inner Component

I'm trying to create component with Hook, but I'm faced with a strange problem. I use mapbox-gl in my code. In order to init mapbox-gl, I have to wait until dom component is loaded. (useLayoutEffect or useEffect) There is no problem in the initial…
Michihito Osanai
  • 13
  • 2
1
vote
2 answers

Why does the setTimeOut not being cleared by using clean up function in React (useEffect)?

I want to have all of the setTimeOut cleared when the component is unmounted. Even though I have use clearTimeOut as a clean up function but the error still persis: "Warning: Can't perform a React state update on an unmounted component. This is a…
JadenB
  • 57
  • 2
  • 9
1
vote
1 answer

In React, what's the difference between a setState callback and using useEffect on a state variable?

I'm confused about whether I should be using a setState callback or the useEffects hook when updating state in my application. On my dashboard, I have a loggedInUser object, which has these fields cashAssets stockASsets bondAssets From my…
satish
  • 703
  • 5
  • 23
  • 52
1
vote
1 answer

Access variables in a `useEffect` without triggering the effect when they get updated

I need to access variables in a useEffect but only trigger the method when SOME of them get updated. For example: I want to call useEffect when data changes, but NOT when saveTimeout or saveMethod change. In the same fashion, I want to call…
Ryan Pergent
  • 4,432
  • 3
  • 36
  • 78
1
vote
2 answers

Inifinite loop when saving an object from async await

When I create and object out of async/await operation... export const getData = async datas => { const a1 = await getData1(datas); return { a1 }; }; ...and then save it with useState... import { useState, useEffect } from "react"; import {…
Michał J. Gąsior
  • 1,457
  • 3
  • 21
  • 39
1 2 3
…
99 100