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

"arrow function expected no return value" with clean-up function in useEffect

Here is my useEffect with a simple clean-up function () => { inbox?.destroy(); }, but it raises a warning when I let the clean-up function there. Why is that, isn't the clean-up function a legit syntax? How to fix it (of course without removing the…
Loi Nguyen Huynh
  • 8,492
  • 2
  • 29
  • 52
15
votes
6 answers

useEffect not being called and not updating state when api is fetched

I'm fetching data from a weather api using useEffect hook and declaring the dependency correctly as well. My state is still not being updated and I get errors in my render function because of that. I've pretty much tried everything from getting rid…
Navjeet Kaur
  • 153
  • 1
  • 1
  • 6
14
votes
3 answers

When React functional component re-render, does it reassign assigned values & functions?

If a code like this re-render by useEffect's dependency, // ... const Test = () => { // ... const value1 = "test1" const func1 = () => { // do something1 } useEffect(() => { const value2 = "test2" const func2 = ()…
Psychopomp
  • 293
  • 4
  • 9
13
votes
2 answers

React 18 - destroy is not a function

My application was working fine, then I updated it to react 18, now it is throwing "destroy is not a function" when I navigate from one route to another if the current route is using useEffect to call some APIs on load. I searched the internet in…
Shehzad Ahmed
  • 172
  • 1
  • 1
  • 13
13
votes
3 answers

Jest failing with TypeError: (0 , _user.default) is not a function

I am trying to test App.jsx import getUserInfo from './services/user'; const App = () => { const [isLoading, setIsLoading] = useState(true); const [user, setUser] = useState({ firstName: 'First Name', lastName: 'Last Name', }); …
yalpsid eman
  • 3,064
  • 6
  • 45
  • 71
13
votes
4 answers

React Hooks - 0 vs. empty array as second argument in useEffect

I saw someone use 0 instead of an empty array for the second argument in useEffect. So instead of useEffect(() => { console.log('Run once'); }, []); it was useEffect(() => { console.log('Run once'); }, 0); It seems to have the same effect…
StefanBob
  • 4,857
  • 2
  • 32
  • 38
13
votes
2 answers

useEffect hook not being mocked by jest.spyOn

I'm new to React Hooks and what I'm trying to achieve is to test a React component (called CardFooter) that contains a call to useEffect hook that gets triggered a global context variable is modified. CardFooter.js: const CardFooter = props => { …
otto
  • 161
  • 1
  • 1
  • 6
11
votes
1 answer

why does the useEffect hook even with no dependecies still "run" on the client side even though the page has been pre-rendered by next-js

I thought that the pre-rendering process would mean that hooks like useEffect will already be executed on the server. I read something about hydration, don't know if it explains this occurrence but couldn't understand it clearly from the blogs that…
one_timer
  • 113
  • 1
  • 6
11
votes
4 answers

Why is useEffect running twice?

import { useContext, useEffect, useState } from 'react'; const Log = () => { useEffect(() => { console.log('Running ...') },[]) return(

here

) } export default Log; Whenever this code runs, I get Running... messages…
Shu.T
  • 439
  • 1
  • 6
  • 12
11
votes
1 answer

Why is a state variable's setter needed as a dependency with useEffect when passed in through props?

Compare the following two components: Child.js import React, { useEffect } from "react"; function Child({ count, setCount }) { // Note: Has parameter useEffect(() => { setInterval(() => { setCount(prevCount => prevCount + 1); },…
Webucator
  • 2,397
  • 24
  • 39
11
votes
2 answers

Where should I declare functions that are called inside a useEffect() hook?

So I have the following situation when using a useEffect that calls a functions that depends on state. Example: // INSIDE APP COMPONENT const [someState, setSomeState] = React.useState(0); const [someTrigger, setSomeTrigger] =…
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
10
votes
1 answer

useEffect getting called twice in react v18

I created an all-new react app to test this myself because one of my friend was facing this issue. App.js code -> function App() { useEffect(() => { console.log('on init gets called'); }, []); return ( <> Hello my first react…
Anubhav Gupta
  • 212
  • 2
  • 8
10
votes
1 answer

Vue 3's equivalent to useEffect (React)

This code is working, but I'm new to Vue.js and I can't help but think there's a cleaner way of doing this. In particular I mean the parts that set the data upon entrance and update (of store state) in case it's the first page you visit (or reload).…
ImDino
  • 113
  • 1
  • 2
  • 7
10
votes
3 answers

useEffect dependencies when using NextJS router

I have a NextJS project, using the NextJS router to route the user to a page based on a certain state variable. I looked up how to do what I want using the NextJS router documents which has this example: const useUser = () => ({ user: null, loading:…
adrian
  • 2,786
  • 2
  • 18
  • 33
10
votes
2 answers

React: How to wait until ref is available when inserted (rendered) within a second container

EDIT: better explanation The context: I receive some plain HTML code from a 3rd server, which I want to insert in my React app modify it The vanilla JS approach I can modify the string with regex and add any HTML tag with an id Then I can modify…
GWorking
  • 4,011
  • 10
  • 49
  • 90
1 2
3
…
99 100