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

How to push a new value into the current array using the react hooks?

This is the source code. import React, { useState } from "react" import ReactDOM from "react-dom" import "./styles.css" function App() { const [arr, setArr] = useState([1,2,3]) return (

…

Yuji
  • 371
  • 1
  • 6
  • 22
1
vote
1 answer

How exactly does useEffect's return work? Why is the code preforming like it does?

I'm practicing react hooks and I'm creating a very simple stopwatch app. Currently, my code is doing exactly what I want it to do but I do not understand why it works. When I hit start, the setTimeouts run and constantly update the time state. When…
Timothy Jao
  • 13
  • 1
  • 3
1
vote
1 answer

useEffect in React not update component after update store

I don't understand why React not update my object. In another component through the dispatch I update the state. In this (in code below) code in mapStateToProps categories are changing (console log show one more category). But component not…
Billizzard
  • 472
  • 6
  • 15
1
vote
1 answer

React can't set state with hooks in useEffect()

I'm fairly new to react and decided to develop a simple weather app.Once the page loads I want the app to ask the user for geoloacaion and then display weather data accordingly. function App() { const [weather, setWeather] = useState(null); …
Olga Kedel
  • 101
  • 1
  • 6
1
vote
1 answer

How to properly combine these two useEffects

Here is my problem: I have two useEffects that I want to run to initialize my form values. I need help figuring out the proper way to do this. Here are the effects: useEffect(() => { if (fetchedIssue !== null) { setIssueUpdateArray(()…
The Riccardo
  • 49
  • 6
1
vote
2 answers

In React useEffect doesn't update after the value has changed from other component

I am trying to do some kind of online shop for myself and I got a problem. I want to render my shopping cart size in the NavBar component (which is on every page). I created a Cart Items service where I put all my added items, and it also has…
Dignity Dignity
  • 151
  • 2
  • 11
1
vote
0 answers

JS / React Carousel with useEffect & Hooks - Horizontal scrolling to tags in carousel?

I have built the following Carousel / Image Slider that treats the children provided to it as Slides. So far I am not using much JS, it's all pretty much HTML & CSS (apart from the styled-components and the fact the whole thing is a function) import…
R. Kohlisch
  • 2,823
  • 6
  • 29
  • 59
1
vote
1 answer

react: Should I put all side effect logic inside useEffect

I want to track when user click the button, and send the record to server. and I am thinking where should I put the "send the record to server" logic in my component to put it inside onClick handler or move it to useEffect first version: function…
Littlee
  • 3,791
  • 6
  • 29
  • 61
1
vote
2 answers

Jest test case for UseEffect hooks in react JS

I am trying to write the Jest-enzyme test case for useEffect react hooks, and I am really lost, I want to write test case for 2 react hooks, one making the async call and another sorting the data and setting the data using usestate hooks, my file is…
Suman
  • 33
  • 1
  • 1
  • 5
1
vote
1 answer

React with firebase cloud firestore- presenting data from the database

I am trying to figure out how to get data out of my cloud firestore. I have given up trying to figure out how to do it with react-firestore-hooks and am just trying to get to the same place as I was able to get to before starting with hooks. In my…
Mel
  • 2,481
  • 26
  • 113
  • 273
1
vote
1 answer

Passing in Redux Actions into useEffect's dependencies

I have the predicament of passing in Redux actions into useEffect's dependencies list. For example, import { someReduxAction } from '../actions/greatestPathEverMade' const mapDispatchToProps = () => ({ someReduxAction }) const DummyComponent =…
kdizzle
  • 577
  • 1
  • 11
  • 23
1
vote
1 answer

Are eslint warnings for missing dependencies in React hooks always correct?

I'm wondering if eslint rule for mising dependencies in React hooks is always correct. In my example I have calendarIds object in the state. When the query is current-day I initialize the calendarIds object to some data. If the page query params…
hitchhiker
  • 1,099
  • 5
  • 19
  • 44
1
vote
0 answers

How to handle Promise in custom react useEffect

I have two components which i am working with. In the first component, i made a custom useEffect hook that retrieves data from my server. Please see the code below: Code snippet One import {useState, useCallback} from 'react'; import {stageQuizApi}…
Aniefiok
  • 31
  • 1
  • 5
1
vote
1 answer

Omit function props from the dependencies list in React.useEffect?

I have the following block of code: function foo({ bar, func }) { useEffect(() => { func(bar) }, [func, bar]) .... } Is this an anti pattern to include func within the dependencies list for React.useEffect? I'm under the impression that…
kdizzle
  • 577
  • 1
  • 11
  • 23
1
vote
1 answer

useEffect to only update a specific key updates

I have a scenario where our application has multiple functions that sit within componentDidUpdate. In each of the functions they check to see if their specific data is updated. For example: componentDidUpdate(prevProps) { this.handleFoo(prevProps) …
Grant Herman
  • 923
  • 2
  • 13
  • 29
1 2 3
…
99
100