React Hooks : Demystifying the useState hook in under 10 minutes [examples video]

import { useState } from 'react'; const LearningState = props => {   const [bgColor, setBgColor] = useState('red');    const turnGreen = () => setBgColor('green');   const reset = () => setBgColor('red');   return (     <div>    <div style={{backgroundColor: bgColor }}>      {bgColor === 'green' ? <p>Color is now green</p>: <p>Red</p>}    </div>     <button onClick={turnGreen}>Turn Green</button>     {bgColor === 'green' && <button onClick={reset}>Reset</button>}    </div>  )}export default LearningState; 

import { useState } from "react"; const Counter = (props) => {   const [counter, setCounter] = useState(0);  console.log('runs...');   const incrementCounter = () => {     // setCounter(counter + 1);    // setCounter(counter + 1);    for(let i=0;i<10;i++) {       setCounter(prevCounter => prevCounter + 1);     }  }  const decrementCounter = () => {     setCounter(previousCounter => previousCounter - 1);    setCounter(previousCounter => previousCounter - 1);    setCounter(previousCounter => previousCounter - 1);  }  return (    <div>     <h1>Counter : {counter} </h1>     <button onClick={incrementCounter}>Increment Counter</button>     <button onClick={decrementCounter}>Decrement Counter</button>   </div>    )}export default Counter;