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

Handling API calls using useEffect vs using useCallback

This is very likely a dumb question -- I have the understanding that anything that triggers a side-effect should be handled with useEffect. I was wondering if that understanding is correct. Particularly in the context of making an API call -- is it…
Eddie Lam
  • 579
  • 1
  • 5
  • 22
8
votes
2 answers

Redirect shows the sign in page partially before redirecting in next js react

I have a simple app where if a user is signed in and if the user manually tries to go to /signin page he is redirected to the index page. I'm using nextjs and to achieve this is I run a function in useEffect where boolean is checked true if so I use…
sriram hegde
  • 2,301
  • 5
  • 29
  • 43
8
votes
1 answer

How to test react useContext useReducer dispatch in component

hope someone can point me the right direction with this. Basically I've created a react app which makes use of hooks, specifically useContext, useEffect and useReducer. My problem is that I can't seem to get tests to detect click or dispatch…
Noelt
  • 111
  • 1
  • 5
8
votes
2 answers

How can React useEffect watch and update state?

Example code export function useShape (){ const [state, setState] = useState({ shape: 'square', size: { width: 100, height: 100 } }) // Change shape name while size update useEffect(()=>{ const {size: {width,…
Yokiijay
  • 711
  • 2
  • 7
  • 18
8
votes
3 answers

How to fetch data without useEffect hooks in React function component?

I know the conventional way when using hooks is to fetch the data using the useEffect hook. But why can't I just call axios in the functional component instead of a hook and then set the data. Basically, I am asking what is wrong with doing…
programmer123
  • 111
  • 1
  • 2
8
votes
4 answers

React setInterval in useEffect with setTimeout delay

I want to run an interval with a delay for the first time it fires. How can I do this with useEffect? Because of the syntax I've found it difficult to achieve what I want to do The interval function useEffect(()=>{ const timer = setInterval(()…
ionush
  • 323
  • 2
  • 6
  • 12
8
votes
2 answers

Multiple times render in react functional component with hooks

Actually I am not getting the right point of this problem. So seeking help. I have this state full functional component. The thing I have noticed here is that when I fetch data using useEffect hook then I get the response properly. The problem is,…
Nahid Islam
  • 193
  • 1
  • 5
  • 15
8
votes
1 answer

React Hooks: Handling Objects as dependency in useEffects

UPDATE: Yes for use case 1, if I extract search.value outside the useEffect and use it as a dependency it works. But I have an updated Use case below Use Case 2: I want to pass a searchHits Object to the server. The server in turn return it back to…
Stallion V
  • 83
  • 1
  • 1
  • 3
8
votes
1 answer

How can I access current redux state from useEffect?

I have a list of objects ("Albums" in my case) fetched from the database. I need to edit these objects. In the editing component in the useEffect hook I fire up the action for getting the needed album using it's ID. This action works. However in…
ysvet
  • 163
  • 1
  • 1
  • 10
8
votes
1 answer

Correct/Incorrect to ignore some React useEffect dependency warnings?

Here's some sample code I've written that works fine: useEffect(() => { if (!rolesIsLoading && rolesStatus === 200) { customer.roles = rolesData.roles; } }, [rolesIsLoading, rolesStatus]); I'm getting this warning in the console: React…
robertwerner_sf
  • 1,091
  • 4
  • 21
  • 35
8
votes
1 answer

React hook useEffect() under the hood. Does an effect scheduled with useEffect block the main thread?

In React DOCs, about the useEffect() hook, we get that: "Effects scheduled with useEffect don’t block the browser from updating the screen." Tip Unlike componentDidMount or componentDidUpdate, effects scheduled with useEffect don’t block the…
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
7
votes
1 answer

Avoid parent component re-rendering when Child component updates parent state,

In our react application, We have parent-child component. Child component calls parent method to update parent state values. Here is sample code //Parent component const parent = ({ items }) => { const [information, setInformation] =…
Alex
  • 1,406
  • 2
  • 18
  • 33
7
votes
2 answers

Can I use the UseEffect hook inside getStaticProps?

I have a doubt.. can I use a useEffect inside getStaticProps? I'm trying to run a function inside getStaticProps... it works.. but I don't know if it is the recommended thing to do. useEffect(() => { remarkBody() }, [body,…
user13680445
7
votes
2 answers

React Hooks API call - does it have to be inside useEffect?

I'm learning React (with hooks) and wanted to ask if every single API call we make has to be inside the useEffect hook? In my test app I have a working pattern that goes like this: I set the state, then after a button click I run a function that…
jjcreator
  • 73
  • 1
  • 5
7
votes
2 answers

React component sometimes renders twice with unchanged state

I am using Redux to subscribe to a store and update a component. This is a simplified example without Redux. It uses a mock-up store to subscribe and dispatch to. Please, follow the steps below the snippet to reproduce the problem. Edit: Please skip…
Tigran
  • 2,800
  • 1
  • 19
  • 19
1 2 3
…
99 100