React - Display current time using useState, useEffect

Question

I am learning about hooks, so I try to write code that display current time.

I had comment in each line of code the reason I write it. So:

1. Am I understand right?
2. Is there any bad practice?
3. What need to be improved?

import * as React from 'react'
function App() {
 // Define a state for keeping track of time
 const [time, setTime] = React.useState("");
 // Logic, computation to update time (which is side-effect) should put inside useEffect
 React.useEffect(() => {
 // Running side-effect when component mounted (componentDidMount)
 const myInterval = setInterval(() => {
 setTime(new Date().toLocaleTimeString());
 }, 1000);
 // Clear side-effect when component unmount (componentWillUnmount)
 return () => {
 clearInterval(myInterval);
 }
 })
 return (
 <div className="App">
 <h1>{time}</h1>
 </div>
 );
}
export default App;

• RobH: You may find this interesting/useful: overreacted.io/a-complete-guide-to-useeffect

Answer 1

By default, useEffect will run on every render. Because you're setting state in useEffect, state will render on every render, causing loops of unnecessary renders.

To fix this, pass an empty dependency array to useEffect:

React.useEffect(() => {
 // ...
}, [])

• Tan Nguyen: What is the loops look like? I inspect the page and see blue border blinking (render) 1 time/s only. I add [] and things are the same too.
• Nicky McCurdy: Basically it will add a new listener that updates state an extra time every second. So after 10 seconds, it will render 10 times at once. That's probably not what you want, especially if this component gets more complex in the future.
• Tan Nguyen: What do you think about this argument: "useState only fires if the the value you are updating the state with is different to the previous one so an infinite loop is prevented unless the value changes between cycles." stackoverflow.com/questions/53715465/…
• Nicky McCurdy: That doesn't apply here in your original code because it has no dependencies. By definition it will run on every render regardless of your state.