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

React.useEffect not triggering when dependency has changed

Edit: I found the solution to this! See my answer below. So essentially, I have a slice of state that is updating but not triggering the useEffect that has it as a dependency: const [editableParticipants, setEditableParticipants] = useState(*initial…
Romy
  • 41
  • 3
4
votes
3 answers

When should I use useEffect hook instead of event listeners?

Should useEffect hook be used when it can be simplified using an event listener? For example, in the below snippet code I use event listener to change some state and later useEffect hook to react to that state change and do some other thing import {…
Angel
  • 1,959
  • 18
  • 37
4
votes
1 answer

React, can't access updated value of state variable inside function passed to setInterval() in useEffect()

I am building a simple clock app with React. Currently the countDown() function works, but I would like the user to be able to stop/start the clock by pressing a button. I have a state boolean called paused that is inverted when the user clicks a…
Ryan Schafer
  • 87
  • 7
4
votes
2 answers

Should component itself prevent unwanted useEffect() calls?

Using useEffect() properly is sometimes not that easy. Imagine we have the following simple app using the Counter component: import { useState, useEffect } from 'react'; const Counter = ({ onOdd, onEven }) => { const [count, setCount] =…
Robo Robok
  • 21,132
  • 17
  • 68
  • 126
4
votes
2 answers

how to update parent component when changing child component?

I have two components. A parent component which englobes table of items and an edit component which is opend when only one item is selected to be modified. this is the parent component: import * as React from 'react'; import Table from…
sffgsfgs
  • 61
  • 1
  • 1
  • 7
4
votes
1 answer

Is it fine to listen to children components using useEffect?

I have gallery that repositions components. I want it to reposition components when child components are changed: added, switched. I was listening to children using useEffect hook: useEffect(() => { items =…
Alyona
  • 1,682
  • 2
  • 21
  • 44
4
votes
1 answer

I am working with react native i want to remove the event listener inside the useEffect return statement but removeEventListener is depracted

I want to remove eventlistener in react native but removeEventListener is deprecated in react native
Syed Ali Rizvi
  • 39
  • 1
  • 3
4
votes
3 answers

Should I use IIFE in useEffect hook?

Is it good practice to use IIFE in useEffect or I should declare async function and then call it? useEffect(() => { (async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/posts" ); const…
AlmaG3st
  • 192
  • 9
4
votes
1 answer

Is scrolling to bottom after render a good use case for useLayoutEffect?

Is scrolling to bottom after render a good use case for useLayoutEffect ? For example: useLayoutEffect(() => { const element = divRef.current; const { scrollHeight } = element; element.scrollTop = scrollHeight; }, []); Is that any different…
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
4
votes
1 answer

Next JS + Supabase real time subscription subscribes with state "closed"

I am working on this helpdesk for a school project using Next JS and Supabase and got stuck on realtime chat between the operator and the client. I subscribe to the table in useEffect hook and return the unsubscribe function to clean up. But when i…
vskorepa
  • 53
  • 3
4
votes
2 answers

How to use a custom-hook that returns a value, inside another custom Hook?

I am using React-native and in it, I have a custom Hook called useUser that gets the user's information from AWS Amplify using the Auth.getUserInfro method, and then gets part of the returned object and sets a state variable with it. I also have…
Ramin Zandvakili
  • 149
  • 1
  • 1
  • 9
4
votes
1 answer

Use Effect and Firebase causing infinite loop

I am using firebase and trying to load all my data at the start of the app using this code: const [books, setBooks] = useState([]); const bookCollectionRef = collection(db, "books"); useEffect(() => { const getBooks = async () => { …
bmurf17
  • 83
  • 7
4
votes
1 answer

Why is useEffect not working here? Do I need to change the condition?

I am trying to run this code, but useEffect is not running a single time. export default function DetailPage() { const [post, setPost] = useState({}); const postId = useParams().postId; console.log(postId); useEffect(() => { …
evilcoder
  • 41
  • 3
4
votes
1 answer

How to re-render the result of a custom hook when data loads

I am trying to render the number of items resulting from a custom hook. This custom takes some time to fetch the data from a database and returns a count (ie: any integer greater or equal to zero). My current setup is to call the custom hook and…
Tyler Morales
  • 1,440
  • 2
  • 19
  • 56
4
votes
2 answers

Run useEffect only one when a special property changed

I want to update render when a special property changes. This property income from parents. I Made a useState called loader to handle codes when I have data or not. if the loader is false, my code calls API and if it is true render data. First of…
Maryam Mohebbi
  • 61
  • 1
  • 7
1 2 3
…
99 100