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 hook useEffect failed to read new useState value that is updated with firebase's firestore realtime data

I have an array of data object to be rendered. and this array of data is populated by Firestore onSnapshot function which i have declared in the React hook: useEffect. The idea is that the dom should get updated when new data is added to firestore,…
Capt Weiss
  • 61
  • 5
1
vote
1 answer

Circular dependency in useEffect

I'm trying to build a custom hook that has to alter values before using Formik's setFieldValue(). Here is how to hook looks like: export const useCount = (tab) => { const { values, setFieldValue } = useFormikContext(); const { count} =…
tdranv
  • 1,140
  • 11
  • 38
1
vote
1 answer

React component that takes state variable as a parameter not rendering on update

I have a React component that makes an AJAX call, sets a state variable and then passes that state variable into a component. Main component: export default function MyView({ assetId }) { const [asset, setAsset] = useState(); const…
MSOACC
  • 3,074
  • 2
  • 29
  • 50
1
vote
1 answer

why is the value of state evaluated only once in asynchronous function?

Why is the value of count evaluated only once if called like setCount(count + 1) if the code is asyonchronous? When you press the button Increment Count Twice Async Naive it triggers two timeOut(), one with 500ms delay and other with 1000ms delay.…
zakaria
  • 79
  • 1
  • 6
1
vote
1 answer

is this what is happening in this react code?

this is an experimental code to represent probable misunderstanding of how react works https://jsfiddle.net/Dr_Coder/h6da2jku/78/ const App = () => { const { useState, useEffect } = React; const…
Code Eagle
  • 1,293
  • 1
  • 17
  • 34
1
vote
1 answer

Clickable ticker in React

I have literally tried for a few hours to replicate a clickable ticker, much like they have at the very top of this site: https://www.thebay.com/ I'm confused about what triggers useEffect and long story short, I can't come up with a solution that…
algojedi
  • 57
  • 1
  • 4
1
vote
1 answer

multiple useEffect in a component doesn't work

When I call API from single useEffect, it works perfectly. But when I am trying to call another API from another useEffect in the same component its shows a error. If it's possible, please have a look at my project on codesandbox. import React, {…
Sajeeb M Ahamed
  • 111
  • 8
1
vote
1 answer

How to use a sass $ declaration in useEffect (jsx?)

I have different styles set in a _variables.scss file. like $secondary: #ffc500; $tertiary: #ffdd69; $quartiary: #fffbed; I want to use different body colors so I want to change the body background in different pages like so: …
Ruben Bardok
  • 23
  • 3
1
vote
1 answer

react hooks - useEffect not called after action is dispatched

I have a button that can like/dislike a car. The state stores usersLikedCars which is an array. When the user clicks the like/dislike button (same button), an API call is made which is either a POST or DELETE which updates db and returns 1 more or 1…
asus
  • 1,427
  • 3
  • 25
  • 59
1
vote
1 answer

Why won't react modal input value populate when state is updated?

I have a modal that is triggered on a button click that needs to be populated with an input value that can be edited by the user. When the button is clicked, modal state is updated, but the input either: a. doesn't reflect the updated state as its…
Mark Reed
  • 88
  • 5
1
vote
1 answer

How to trigger useEffect to re-render again after update request

import React, { useState, useEffect } from "react"; import axios from "axios"; import styled from "styled-components"; import Form from "react-bootstrap/Form"; import Col from "react-bootstrap/Col"; import Button from…
Jonathan Akwetey Okine
  • 1,295
  • 2
  • 15
  • 18
1
vote
0 answers

Merging two objects with useContext and state?

So i have this problem where it doesn't merge the two objects since refsContext is empty when useEffect gets called after render. It ends with only one of the refs in the object. useEffect(() => {setRef(something)}, [ref]); results in an infinite…
Henrik
  • 392
  • 2
  • 13
1
vote
0 answers

Timer component keeps going when time over

I rewrote my class component to a functional component but I this I made a mistake somewhere. I can find out what it is. The timer keeps going when the time is up. I think its the useEffect that i use wrong? The class componed worked fine but I need…
Heis
  • 606
  • 5
  • 25
1
vote
1 answer

Retrieve params and set params as argument in fetch request within useEffect Hook

I am developing a MERN application. Presently I working on my Password Reset Emails, Validate ResetToken, Reset and Update password. So far, I have been able to complete All at the backend. On the front-end, I have completed the ForgotPassword…
Adeola Oni
  • 55
  • 1
  • 9
1
vote
2 answers

React useEffect doesn't reload my component after state update

I know this problem has been asked several times on stackoverflow but i can't make this work even after trying during several hours ... I am working with React.js for a year now but I recently moved to React hooks and stateless components so I…
olivier dumas
  • 148
  • 2
  • 6
1 2 3
…
99 100