State Hook – prev and current state the same, bail out

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

import './App.css';

function App() {

const [counter, setCounter] = useState(0);

console.log('App', 'start point');

useEffect(() => {

console.log('useEffect', 'start point');

setTimeout(() => {

console.log('setTimeout', 'setCounter to 1');

// first time, it sets the 0 to 1. So we call render. Math.random() runs

// 2nd time, tries to set 1 to 1, no render gets called. No Math.random().

// https://en.reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update

// If you update a State Hook to the same value as the current state,

// React will bail out without rendering the children or firing effects.

setCounter(1);

}, 5000);

});

// initially, counter is 0, then Math.random() is called

return (

<b>{Math.random()}</b>

<div>

<div className="ticker-name">{counter}</div>

</div>

);

}

export default App;