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

Prop change not triggering useEffect

I have a react component with a useEffect that is not being fired when the props change. I would like this component to update what it is displaying based on the prop. However, when the prop changes nothing happens. For debugging I added a button…
Lenny Meerwood
  • 61
  • 2
  • 10
6
votes
1 answer

Communicate up component's initial state without useEffect warning

I have a simple date picker component with buttons for preset date ranges. The problem is in my useEffect: I'm using it to communicate initial state up on render, but of course React issues a warning ("useEffect has missing dependencies"). Is…
montrealist
  • 5,593
  • 12
  • 46
  • 68
6
votes
3 answers

Set State only once

I am using a function (getActorInfo()) in react to grab info from an api and set that in a State. It works but the function wont stop running. export default function ActorProfile({ name, img, list, id, getActorInfo }) { const [showList,…
Jkaram
  • 611
  • 2
  • 7
  • 13
6
votes
2 answers

How to fix React Redux and React Hook useEffect has a missing dependency: 'dispatch'

React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhaustive-deps I use useDispatch() Hook from React Redux on a functional component like this: const Component = () => { …
Ignacio
  • 83
  • 1
  • 4
6
votes
2 answers

React hooks - useEffect method keeps fetching

In many of my components, I have to use token from store to get data and represent it (header menu, footer menu, products on page, slider images, etc.). What I am trying to do is to get this data only if I don't have it, but React keeps sending…
LotusFlower
  • 135
  • 1
  • 6
6
votes
1 answer

Check which dependency in useEffect was updated

I have this useEffect hook: useEffect(() => { setTop(t => t + (controller.position.y * tileSize)) setLeft(l => l + (controller.position.x * tileSize)) }, [controller.position]) I want it to only do the addition if the position changes. If the…
dan-klasson
  • 13,734
  • 14
  • 63
  • 101
6
votes
2 answers

Cannot read property of undefined when using react hooks

I'm getting the error "Cannot read property 'map' of undefined" but can't work out why - map will not work because 'movies' is undefined. Can you see what I'm doing wrong? Many thanks. const Dashboard = () => { const discoverUrl =…
Tommmm
  • 65
  • 1
  • 1
  • 6
6
votes
3 answers

Is it wrong to fetch an API without using the useEffect Hook?

I've been doing it this way but some colleges told me that I should use the useEffect Hook instead. The problem is that I don't see the benefit of that approach and I think that my approach is cleaner. import React, { useState, useEffect } from…
elpopisencio
  • 63
  • 2
  • 7
5
votes
2 answers

Does the return function of useEffect run when the component is mounted?

This is my code import { useEffect } from "react"; import { Link } from "react-router-dom"; export const PageOne = () => { useEffect(() => { return () => {console.log("PageOne")} }, []); return ( <> …
Miguel Angel GEQ
  • 75
  • 4
5
votes
1 answer

React child component state is lost after parent component re-renders

I am using a React hook for parent/child component. Now I have state in my parent component (companyIcon), which I need to update based on some validation in the child component. I pass validationCallback as a callback function to the child…
copenndthagen
  • 49,230
  • 102
  • 290
  • 442
5
votes
3 answers

React state not giving correct value on useEffect()

I'm trying to build a factorization algorithm using react. I would like to add results to LocalStorage based on results from factorization. However, LocalStorage sets previous results not current ones. I think this is happening because useEffect…
Gibberish
  • 48
  • 12
5
votes
3 answers

How to stop making api call on re-rendering in React?

In my homepage, I have code something like this {selectedTab===0 && } {selectedTab===1 && } Now, In XList, I have something like this: {props.allItemList.map(item =>
Unknown
  • 427
  • 5
  • 9
5
votes
1 answer

React conditional action - useEffect vs an if statement

Relatively new to React and ran into something that I wasn't sure the answer about. If you have a conditional action, is there a difference between useEffect and just having the if statement? function Items() { [setItemAdded, itemAdded] =…
Andrew
  • 73
  • 5
5
votes
2 answers

Missing dependencies in useEffect() really cause stale data?

I'm asking this question to confirm my understanding of some concept. The React doc is emphatic about including all dependencies used in the useEffect() callback. As explained in the doc: Otherwise, your code will reference stale values from…
Zhengquan Bai
  • 1,057
  • 3
  • 14
  • 31
5
votes
3 answers

Consequences of using computed variables vs useState/useEffect

If I have a variable whose value can be fully derived based on the value of another property, is there any consequence/pitfall to initializing a computed variable vs using a combination of useState/useEffect to track the variable? Let me illustrate…
jrnxf
  • 744
  • 8
  • 22
1 2 3
…
99 100