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

React useCallback with debounce works with old value, how to get actual state value?

I can not fulfill all the conditions: I need some function inside useCallback, because I set it as props to child component (for re-render preventing) I need to use debounce, because my function is "end point" and can be called ~100times/sec I need…
mixalbl4
  • 3,507
  • 1
  • 30
  • 44
5
votes
1 answer

Using useEffect() hook to test a function in Jest

I'm learning Jest basically, I have to write a test case for the useEffect() hook which renders based on a flag[counter], and which internally checks if a localStorage value is present for a field. function sample(props) { const counter = props; …
MK6
  • 67
  • 1
  • 2
  • 7
5
votes
2 answers

Replace of setState callback in react hook with useEffect hooks for complicated scenario not working

Hi I have a scenario where i need to replace setState callback after setting new state in react hooks with React_hooks in a particular scenario. The current code is:: const ThemeOptions = () => { const [previewType, setPreviewType] =…
user12893845
  • 176
  • 2
  • 13
5
votes
2 answers

Can different cleanups be done conditionally in useEffect?

So, I have an useEffect like this: useEffect(()=>{ if(foo) { // do something return () => { // cleanup function } } }, [foo]) Here, the cleanup function is never called, even if if block is executed. But if I modify the…
tsuki
  • 155
  • 1
  • 3
  • 9
5
votes
1 answer

Custom hook with useEffect (on mount) is executing more than once

I have this hook, that calls a redux action on mount. So my guess is that it should be executed one time. But it is not the case. useCategories.js const useCategories = () => { /* Hook to call redux methods that will fetch the categories …
Gonzalo
  • 752
  • 8
  • 23
5
votes
1 answer

Scrolling to a position in an element on page load with React useEffect

I'd like to scroll to a given horizontal position in an element immediately after it's rendered by React. For context, I'm using Next.js with server-side rendering, so useLayoutEffect isn't an option. export default function WideElement () { const…
Kieran
  • 2,554
  • 3
  • 26
  • 38
5
votes
3 answers

useEffect is missing a dependency, but when I add it I get a 'maximum update depth exceeded' error

I'm trying to wrap my head around using hooks and I'm running into a repeating problem. In the example I've linked below, I have a useEffect hook that's sorting an array. The sorting order is determined by a state value and I have a button that…
Nic Bernard
  • 55
  • 4
5
votes
2 answers

How do I keep state persistant using local storage, react hooks, and Context Provider

I'm implementing authentication into my app, the issue I am having is on refresh the state is not persistent so I get redirected back to the login screen. How can I use React Hooks to check if there is an authToken in local storage to keep me logged…
EzJS
  • 219
  • 1
  • 4
  • 12
5
votes
3 answers

What is the right way to cancel all async/await tasks within an useEffect hook to prevent memory leaks in react?

I am working on a react chap app that pulls data from a firebase database. In my "Dashboard" component I have an useEffect hook checking for an authenticated user and if so, pull data from firebase and set the state of a an email variable and chats…
daniel
  • 189
  • 1
  • 2
  • 7
5
votes
1 answer

Optimistic rendering & useEffect

TL'DR: Is there a way to pessimistically operate state changes while using useEffect for API calls? Lets say you wrote a component that displays a paginated / sorted grid of data and you wrote a useEffect for that component similar to this fake…
Stewart Anderson
  • 333
  • 2
  • 14
5
votes
1 answer

How to use useEffect() inside a child component to fetch data?

I wonder if it make sense (or possible) to use useEffect inside a child component to load data only when the child component is included in the parent compnent. Inside the child component I have the following code: useEffect(() => { if…
renakre
  • 8,001
  • 5
  • 46
  • 99
4
votes
1 answer

Is it a good practice to use optional chaining inside reacts useMemo/useEffect dependencies?

I'm working on a large react app where performance matters. At first I avoided using objects properties inside useMemo dependencies (I was avoiding dot notation inside dependencies). But I have seen this in react's documentation so I think it is…
gkpo
  • 2,623
  • 2
  • 28
  • 47
4
votes
2 answers

The useEffect hook is loading the data two time, I mean it is running twice

I am trying to load data to my App.js file in react from the backend. I have used redux to build the whole data fetching and storing pipeline from backend to frontend. Here is the code : function App() { const dispatch = useDispatch(); …
Prajwal Raj
  • 43
  • 4
4
votes
1 answer

useEffect does not go to if statements

Do not actually understand why this code part not working as it should. This useEffect block re-renders on every scrollY position. Also, I see that this code part: console.log(wrapperRef.current.style.opacity); should call if and else if statements,…
Mantofka
  • 206
  • 1
  • 12
4
votes
1 answer

Randomize an array using useEffect in Nextjs

I'd like to randomize an array everytime the page is loaded. I'm using Nextjs and the first issue is that client and server don't match, so I've been advised I need to put the randomize code inside a useEffect hook, but I'm obviously doing it…
Afx Crush
  • 183
  • 2
  • 14
1 2 3
…
99 100