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

Protecting pages in react, without blocking a route

Following issue: I am trying to create an authentication system in react, which let's a user login, sign up and reset the password. The problem is, I want to let the user go certain routes such as /profile, but display the content if he is logged…
aron fischer
  • 91
  • 1
  • 9
1
vote
1 answer

'dataURI' variable from inside React Hook useEffect will be lost after each render

I would like to translate the function below written in vanilla javascript to a react function. The function below allows a user to click on the image input and append the image to the textarea which holds a class ".editor" function getImage() { …
user3574939
  • 819
  • 3
  • 17
  • 34
1
vote
2 answers

Custom react dropdown menu not open close properly

Currently, I have a 3 rows in a table. Each row has two column: file name and a button file name is just a dummy link. button will hide show a menu. My requirements are following: Click a button, it will toggle the menu. i.e. if prev it is close,…
kenpeter
  • 7,404
  • 14
  • 64
  • 95
1
vote
0 answers

in useCallback is not updated state value

I am try to set a callback in child component, but when call this callback function, state is not updated, that is state in initial state. Why this is that and how to resolve this problem ? // calback const resizeColumn = useCallback(nextWidth => { …
Tahir Dev
  • 11
  • 2
1
vote
1 answer

LOOKUP property of MATERIAL-TABLE doesn't change initialValue

Hello friends good afternoon Excuse me, I'm trying to update the LOOKUP property of my column CARD_ID in the material-table library, since I have to consult this data from an API, I created a hook called setObj which I use to update the status of…
Marco Nacianceno
  • 11
  • 2
1
vote
1 answer

Data not displaying when going to previous page next js application

I'm working on a headless wordpress website using nextjs. The site displays a list of posts and lets you see details of each post in a new page when you click on them. When you are in the individual post's page, you can either click a "BACK" button…
Carlos G
  • 479
  • 1
  • 8
  • 19
1
vote
2 answers

How can I make useEffect react hook rerender based on a variable value?

So I got this component: export default function () { const [todos, setTodos] = useState([]); useEffect(() => { function populateTodos () { axios.get(`http://localhost:8000/api/all-todos`) .then(res =>…
code_dude
  • 951
  • 2
  • 15
  • 28
1
vote
2 answers

Unable to access/manipulate data from weather API using axios with useEffect in React.js

I am using axios to fetch weather api data with useEffect. import React, { useEffect, useState } from 'react'; import axios from 'axios'; import { Header } from './Header'; export const CurrentCity = () => { const [weather, setWeather] =…
JongHyeok Lee
  • 29
  • 3
1
vote
1 answer

Understanding the behaviour of useEffect() and useState() hooks

So I have this bit of code that does not work as expected. Current focus has been set using useState() on the parent component, hence its a state variable. However, when the currentFocus value changes in the parent, focus variable here itself is not…
ssaquif
  • 300
  • 2
  • 13
1
vote
1 answer

resolving race condition on API call

I'm having a problem that seems to be due to an async call. I have an action that makes an API call and pushes to a Dashboard page. That API call also updates state.account.id based on the response it gives back: const submitLogin = e => { …
Jevon Cochran
  • 1,565
  • 2
  • 12
  • 23
1
vote
1 answer

React useEffect and useCallback linting error - missing dependency

Linter is complaining about a function that is missing as a dependency even though I am using the recommended useCallback hook in the parent component where it is defined. Does anyone know how to fix this? Can't seem to find an example…
James
  • 157
  • 13
1
vote
2 answers

My variable has not updated yet when I create my onClick function since useEffect is run last

I am completely new to ReactJS. Please be kind, I really could not find an answer to my problem. In useEffect I update my variable (which is an array of objects) and in my onClick function I want to update my variable again. Since useEffect runs…
PouncingPoodle
  • 572
  • 1
  • 5
  • 18
1
vote
0 answers

Performance Issue - React Hooks useEffect

I'm running into a performance issue. I'm not sure if it's because I'm using multiple useEffect's (which I'm trying to limit their action by having them watch the relevant state)? Or maybe because I am using a bunch of if statements? Or all the…
realhat
  • 177
  • 1
  • 1
  • 9
1
vote
1 answer

Add `console.log` to all `useEffect`

For development purposes I’d like to have the option to log all uses of useEffect inside my React app. Is there an easy way to extend the behaviour of this function? I’m using Webpack, in case this would provide us with an extra way of doing…
Bart
  • 1,600
  • 1
  • 13
  • 29
1
vote
0 answers

useEffect React Hook calls multiple times when a component changes

My function makes 10 async calls to the backend when the filterState has been changed. I want it to be called once per change. useEffect(() => { const getQuery = async () => { let query = filterActions.getQueryString() …
paul blackmore
  • 191
  • 2
  • 13
1 2 3
…
99 100