Call useEffect after some interval

Question

I want to call a function only once after some interval in my app for that I have choosed the hook useEffect. Not I want to call it after some interval to make a variable account defined which comes from useEthers()

Any help will be appriciated.

The script I am using :

// import { useEffect, useState } from "react"
import { useEthers, useContractFunction, useCall, useLogs} from       const i = () => {

    console.log(account) //I want to log the account after 3 secs
    toast.info('Fetching content...' )
    // console.log('Signin calling now??', account)
    // SignIn()
  }
  useEffect(() => {
    i()
  }, []) // add [] to only call this once
    return (
        <div>
        <h1 >Hello this is login activity {account}</h1>
        </div>
    )

}

If you want to perform an action after a set amount of time, that's what `setTimeout` is for. If you want the action to repeat at a certain time interval, that's what `setInterval` is for. It's not really clear what you're attempting. What have you tried and what didn't work as expected? — David, Aug 13 '22 at 14:22
@David I can do that but in my **hook:** `getMessages.ts` it will call `setTimeout` every time user comes bake to the application tab after switching the tab — Deku, Aug 13 '22 at 14:30
@TANJIROKAMADO: Nobody can tell you what's wrong with code we can't see. Please provide a [mcve] demonstrating the problem. To learn more about this community and how we can help you, please start with the [tour] and read [ask] and its linked resources. — David, Aug 13 '22 at 14:31
But i want to call function only **one time** after **3 sec interval**. I think combination on `useEffect and setTimeout` — Deku, Aug 13 '22 at 14:32
@David If I log account then it says `undefined` but It is correct in the **UI**. — Deku, Aug 13 '22 at 14:39
@TANJIROKAMADO: If you want to perform an operation once when the component first loads, then you would use `useEffect` with an empty dependency array. If that operation is "wait X seconds and then do something" then you would use `setTimeout` for the wait. The code shown is a bit of a mess and full of syntax problems, but it *looks like* you're just capturing the old value of `account` in a closure. But this also sounds like an XY Problem. What's the actual goal? Log `account` to the console 3 seconds after it changes? Something else? A [mcve] would really be useful here. — David, Aug 13 '22 at 14:43
@David I think the actual **problem** is that the first thing that the file does is to run the ``useEffect`` function so that the account is not defined. And if i call the function to define the account in the `useEffect` function then it gives `Invalid hook error`. I want to call the useEffect function after some delay. — Deku, Aug 13 '22 at 14:47
@TANJIROKAMADO: Are you familiar with what an XY Problem is? You're still thinking about the Y, not the X. You don't want to "call the useEffect function after some delay". `useEffect` is not a goal, it's a tool used to achieve a goal. It's a "how", not a "why". What is the *goal*? For example, if the goal is to print the value of `account` when that value becomes available, then you can pass `account` to the dependency array of `useEffect` and print it to the console. The result will be printing the value to the console any time it changes. It's still not clear what you're trying to do. — David, Aug 13 '22 at 14:53
@David the problem is soled now!! many many thanks. I had to add account to the dependency array. You can add an answer and i will except it. Once again thanks. — Deku, Aug 13 '22 at 14:57

score 1 · Accepted Answer · answered Aug 13 '22 at 15:02

[based on a lengthy comment thread on the question...]

You're over-thinking it. And pretty much any time you want to introduce an artificial delay because of an asynchronous operation, it's the wrong approach.

What you want to do isn't this:

Wait for a few seconds and print the account value

What you want to do is this:

Print the account value when it's available

The simplest solution then would be to print it wherever it comes from. For example, if it's fetched from an asynchronous operation, then the console.log would go in the response to that operation.

But as for useEffect, the way you'd accomplish this is by using account as a dependency of the effect:

useEffect(() => {
  // this code will run any time "account" changes
}, [account]);

So to log it to the console:

useEffect(() => {
  console.log(account);
}, [account]);

Or only log it if it's non-null (or "truthy"):

useEffect(() => {
  if (account) {
    console.log(account);
  }
}, [account]);

Whatever the operation is, useEffect will re-trigger it any time something in the dependency array changes. (When the dependency array is empty, the effect is only triggered on the first render. When the dependency array is omitted, the effect is triggered on every render.)

Call useEffect after some interval

1 Answers1