Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Displaying the time in react using use effect

import React, { useState, useEffect } from 'react';

function Child() {
  const [time, setTime] = useState(new Date());
  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);

  }, []);

  return <p>The current time is: {time.toLocaleTimeString()}</p>;
}
export default Child;

I was not able to understand how the time is changing every second as we know i have given the dependencies as an empty array it should be updated only once but updated every second but how can you explain , So can anyone explain how does the code work

Tags:

3

Answers


  1. 0 
    useEffect(() => {
        const interval = setInterval(() => {
            setTime(new Date());
        }, 1000);
        return () => clearInterval(interval);
    }, [time]);

        <p className='m-5'>The current time is:{time.toLocaleTimeString('en-US')}</p>;

    The time is continuously changed that’s why time is in useEffect dependency…
    When Calling the setinterval in one sec it must be clear old-one

    Login or Signup to reply.
  2. 0

    In React, the effect should only execute once following the initial render if you pass in an empty dependency array [] as the second argument to useEffect. Nevertheless, your code uses setInterval to create a recurring timer that updates the time state every second, even though the effect only executes once.

    This is how it operates:

    1. The useEffect hook executes when the Child component mounts for the first time because its dependency array is empty, meaning it should only run once following the initial render.

    2. SetInterval is used to create a new interval inside the useEffect. By invoking setTime(new Date()), this interval method refreshes the time state every 1000 milliseconds, or 1 second.

    3. The component renders once again after the first setup, using the original time value that was acquired from new Date().

    4. The interval keeps running regardless of how many render cycles the component has. It changes the time state with the current time once every second.

    5. The component automatically re-renders to reflect the updated time value derived from time since the time state varies with each interval tick.LocaleTimeString toLocale().

    Because of the empty dependency array, the useEffect only runs once after the initial render; nevertheless, the interval it sets up keeps updating the time state every second, which prompts the component to re-render and display the updated time.

    Login or Signup to reply.
  3. 0

    This is the steps which occurs:

    Initialization:

    1. First your Child component gets created.
    2. time state is initialized with the current date object.
    3. a timer running at a interval of 1000 sec is registered with a callback function.
    4. The time state value is shown with its initial value.

    After each timer interval when callback runs

    1. Callback calls the setTime useState hook updater function.
    2. The time state gets updated with a new date-time which triggers a re-render and gets updated with the new time value.

    Additionally, you should write a cleanup function for your setInterval. Otherwise, there will be a memory leak if its missed.

    useEffect(() => {
        const interval = setInterval(() => {
            setTime(new Date());
        }, 1000);
        return () => clearInterval(interval);
    }, []);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search