We Keep Coding

React clock glithing after changing timezone

I'm trying to create a React app that will show time and weather based on user input.
To get weather data I send API request containing a name of the city to openweathermap and it returns json containing coordinates(lat, long) which I then use to make another request to ipgeolocation API to get the timezone of this coordinates.
Clock.jsx
const Clock = (props) => {
const [clock, setClock] = useState()
useEffect(() => {
setInterval(() => {
let time = new Date().toLocaleTimeString('en-US', { timeZone: props.timezone });
setClock(time)
console.log(time)
console.log(clock)
}, 1000);
})
return (
<div className={props.className}>
{clock}
</div>
)
}
After cahnging the timezone by making new API request time starts glitching. It frequently changes values between old and new time. What could be the problem?
console.log(time)
console.log(clock)

I can see a couple of issues:
First, you're creating a new interval on every render of the component, because you're not populating the right dependencies in useEffect. Since you're depending on props.tinmezone to update the interval, it should be added to the dependency array. To fix this, you can add props.timezone to useEffect's dependency array.
Second, you're not clearing the interval in your cleanup part of the useEffect. To fix this, return clearInterval() in useEffect.
Here's a working code snippet fixing both issues
useEffect(() => {
const interval = setInterval(() => {
let time = new Date().toLocaleTimeString("en-US", {
timeZone: props.timezone
});
setClock(time);
}, 1000);
return () => clearInterval(interval);
}, [props.timezone]);

Creating Clock in React

I have a website and I want to put a realtime clock on one of the pages.
I have written the code using hooks but I understand using hooks for such cases is bad for performance due to rerenders in states every second.
Is there a less resource intensive solution?
import { useEffect, useState } from 'react'
export default function Footer() {
const [time, setTime] = useState()
useEffect(() => {
setInterval(() => {
const dateObject = new Date()
const hour = dateObject.getHours()
const minute = dateObject.getMinutes()
const second = dateObject.getSeconds()
const currentTime = hour + ' : ' + minute + ' : ' + second
setTime(currentTime)
}, 1000)
}, [])
return <div>{time}</div>
}

It's definitely good that you're thinking about performance however in this situation I wouldn't change a single thing. In order to change what gets rendered to the screen (in this case the text of the clock), the component has to be re-rendered to reflect the change in it's state, which is not such a bad thing. Each time the component re-renders it's not going to cause the parent to re-render so performance-wise we're doing just fine.

How to make a countdown timer from a specific date

In ReactJS, I need to make a countdown timer from "09/19/2020" and have it all displayed on my page
What this timer considered month, days, hours, etc.
For this timer to count the month, days, hours, etc. from a certain point in time. Not BEFORE any date, but FROM a certain date. Available from "09/19/2020"
My code:
import React from "react";
const Timer = () => {
}
export default Timer

You can convert the past datetime to unix time and subtract that from the current datetime in unix time, and then convert the difference back to whatever display of time you want. Do this every second to obtain a timer.
You could also use a library like moment.js, which has a .unix() function to convert easily.

Try using this example:
import React, { useState, useEffect } from "react";
function calcDiffInMinutes(dateA, dateB) {
return Math.floor(((dateA.getTime() - dateB.getTime()) / 1000) % 60); // TODO CALCULATIONS HERE
}
export default ({ dateFrom }) => {
const [currentDate, setCurrentDate] = useState(new Date());
const [minutesDiff, setMinutesDiff] = useState(
calcDiffInMinutes(currentDate, dateFrom)
);
useEffect(() => {
const timeoutId = setTimeout(() => {
setCurrentDate(new Date());
}, 1000);
return () => clearTimeout(timeoutId);
}, [currentDate]);
useEffect(() => {
setMinutesDiff(calcDiffInMinutes(currentDate, dateFrom));
}, [currentDate, dateFrom]);
return (
<div>
<div>Date From: {dateFrom.toISOString()}</div>
<div>CountDown value: {minutesDiff}</div>
</div>
);
};
Put this in a separate component file called e.g. CountdownTimer.
And then you can use it in your app.
See the full example here:
https://codesandbox.io/s/react-playground-forked-vmqvy?file=/CountdownTimer.js
P.S. calcDiffInMinutes should be done by you to calculate real diff in minutes. You'll also need to create such functions for days/months etc. Or change to single function that returns an object with all the differences.

React-countdown-now not updating on render

I am creating a Mission Clock web app using React and Flux.
The code can be found here: https://github.com/jcadam14/Flux-Mission-Clock
Right now it's extremely basic, I'm new to React and Flux and it has been an extremely long time since I did any JavaScript (been in the monolithic Java application business for too long). This is to get a proof of concept so I can base my design around React/Flux.
The basic concept is a "Next Contact" timer counts down and when it hits 1min before completion, the box the counter is in turns red. Then when the NextContact timer completes, a CurrentContact timer starts, and a new NextContact timer should start.
Everything works fine up until the point where the NextContact component completes and is supposed to update with a new NextContact. The text in the component and the style update, but the Countdown does not start ticking down. It stays at the new value but doesn't start the timer.
Each time a render occurs because of some other reason, the NextContact component updates again with a new time but does not start counting.
However, if I save any change within any of the files (I'm using Visual Studio Code with module.hot active) then the counter starts and in fact picks up where it should be. So it seems like something isn't getting fully rendered on change like I would expect.
I've tried using forceUpdate but that didn't do anything, and I've tried various ways of getting the Counter component but nothing works.
Any help would be greatly appreciated. I'm hoping once I get this down and can understand how all the dispatching stuff works the rest of the application should fall into place (the timers are a central component to the app, everything else is rather simple).
EDIT: I also tried writing just a simple timer app with Countdown but this time using Redux, and the same thing happens. So I guess the question might be how do you force a component to re-initialize itself?
Thanks!
Jason

Well I ended up just writing my own counter, here it is:
import React,{Component} from 'react';
const formatValues = ({days,hours,minutes,seconds}) =>
{
const hourString = ('0' + hours).slice(-2);
const minString = ('0'+ minutes).slice(-2);
const secString = ('0' + seconds).slice(-2);
return (days + ':' + hourString + ':' + minString + ':' + secString);
}
class MCCountdown extends Component
{
constructor(props)
{
super(props);
this.state = {
endDate:this.props.endDate,
countdown:'0:00:00:00',
secondRemaining:0,
id:0
}
this.initializeCountdown = this.initializeCountdown.bind(this);
this.tick = this.tick.bind(this);
}
componentDidUpdate(prevProps, prevState)
{
if(this.props.endDate !== prevProps.endDate)
{
clearInterval(prevState.id);
this.setState({endDate:this.props.endDate});
this.initializeCountdown();
}
}
componentDidMount()
{
this.initializeCountdown();
}
tick() {
const values = this.getTimeRemaining(this.state.endDate);
this.setState({countdown:formatValues(values),secondRemaining:values.secondsLeft});
if(values.secondsLeft <= 0)
{
clearInterval(this.state.id);
if(this.props.onComplete)
{
this.props.onComplete();
}
return;
}
else
{
if(this.props.onTick)
{
this.props.onTick(this.state.secondRemaining);
}
}
}
getTimeRemaining(endtime){
const total = Date.parse(endtime) - Date.parse(new Date());
const seconds = Math.floor( (total/1000) % 60 );
const minutes = Math.floor( (total/1000/60) % 60 );
const hours = Math.floor( (total/(1000*60*60)) % 24 );
const days = Math.floor( total/(1000*60*60*24) );
return {
secondsLeft: total,
days,
hours,
minutes,
seconds
};
}
initializeCountdown(){
const values = this.getTimeRemaining(this.state.endDate);
const id = setInterval(() => this.tick(),1000);
this.setState({id:id,countdown:formatValues(values),secondRemaining:values.secondsLeft});
}
render()
{
const {countdown} = this.state;
return(<div>{countdown}</div>);
}
}
export default MCCountdown
This did the trick. Seems like perhaps the timers/counters I have all tried might be missing that componentDidUpdate() method because once I added that to my MCCountdown, the clock restarts when a new date is set on the component.
Not sure if this is the pretties it can be but it works and I'm pretty darn happy with that right now.

Using react, it is possible to make an app that uses axios, setInterval, setTimeout, and map?

I have an issue which I'm beginning to suspect has no solution unless I drop React and return to jQuery. I want to create an app that is similar to https://tenno.tools/ or https://deathsnacks.com/wf/ These are sites which grab JSON data and update periodically.
I want to make a react app that uses axios to refresh the data once per minute with setTimeout, since the data changes often.
axiosFunc = () => {
axios.get('https://api.warframestat.us/pc').then(results => {
this.setState({
alerts: results.data.alerts
});
setTimeout(this.axiosFunc,1000 * 60);
})
}
componentDidMount() {
this.axiosFunc();
}
Next I need to use map to cycle through the alert array's objects and make individual components based off the objects' data that are active.
render() {
return (
<main className="content">
<header>{this.state.whichEvent.toUpperCase()}</header>
{this.state.alerts.map(alert => {
//Variables that pull time based data from the objects go here, and go into the component as props
<AlertsBox key={alert.id}/>
})}
</main>
);
}
Then I use the props and state within the component to make a timer, since the data from the JSON file have expiration dates...
let timer = () => {
//Extract the data from the original string
//Convert the UTC to locale time
let seconds = Math.round((this.state.eta/1000) % 60);
let minutes = Math.floor( (this.state.eta/1000/60) % 60 );
let hours = Math.floor( (this.state.eta/(1000*60*60)) % 24 );
let days = Math.floor( this.state.eta/(1000*60*60*24) );
return `${days >= 1? days + " days" : ""} ${hours >= 1? hours + " hrs" : ""} ${minutes} min ${seconds} sec`
}
And all of this works. I'm able to see the dynamic data from the JSON as they come in and leave, as well as the corresponding time. Now I just need to use setInterval in order to get the timer to tick every second. Is this possible? I asked a similar question here
How can I return values once per second using react and axios?
But again, I'm beginning to suspect that this isn't actually possible. Is it?

You'll want to use setInterval on the axiosFunc, no need to set that up inside the network request. Here's an example that calls your API every 5 seconds and renders a formatted date.
class Example extends React.Component {
constructor() {
super();
this.state = { alerts: [] };
}
axiosFunc = () => {
axios.get('https://api.warframestat.us/pc').then(results => {
this.setState({
alerts: results.data.alerts,
});
console.log('Updated the data!', results);
});
};
timer = time => {
// Your timer code goes here, just printing out example data here.
const date = new Date(time);
return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
};
componentDidMount() {
this.axiosFunc();
this.interval = setInterval(this.axiosFunc, 5000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
if (!this.state.alerts.length) {
return <div />;
}
// Sorting the alerts every time we render.
const latest = this.state.alerts.sort((a, b) => {
return new Date(b.activation) - new Date(a.activation);
})[0];
return <div>{this.timer(latest.activation)}</div>;
}
}
ReactDOM.render(<Example />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>
<div id="root"></div>

It's definitely possible. As you said, all of this works - which part is actually giving you trouble? Are you getting an error anywhere?
Personally, I'd think about using Redux in addition to React in an app like this because I like to separate the fetching of data from the presentation of data, but that's all just personal preference. I have an example app that uses setInterval directly in a React component, in case the move from setTimeout to setInterval is causing you pain.