<div id="app"></app>

@import url(https://fonts.googleapis.com/css?family=Inconsolata);

html {
  font-family: 'Inconsolata' !important;
  font-size: 2vw;
}

.code-pen-test {
  display: grid;
  template-grid-rows: 30vw 30vw 30vw;
  template-grid-columns: 25vw 25vw 25vw;
}

.left-nav {
  display: flex;
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  flex-direction: column;
  
  ul {
    list-style: none;
    
    a {
      color: rgb(239, 127, 115);
      
      &:hover {
        color: rgb(198,50,50);
        cursor: pointer;
      }
    }
  }
}

.some-random-div {
  display: flex;
  align-items: center;
  grid-row: 2/ 3;
  grid-column: 2 / 3;
  color: #6E8954;
}

.some-other-random-div {
  grid-row: 3;
  grid-column: 3 / 4;
  color: #6E8954;
}

.count {
  grid-row: 3;
  grid-column: 2 / 3;
}

.title {
  color: rgb(198,50,50);
  grid-row: 1;
  grid-column: 2 / 3;
}

const { useLayoutEffect, useRef, useState } = React

const MultiNav = () => {
  const [customStyle, addStyle] = useState('');
  
  const [count, changeCount] = useState(0);
  let prevTime = useRef(0);
  
  const checkPerformance = () => {
    prevTime.current = performance.now();
  }
  
  useLayoutEffect(() => {
    if (customStyle) {
      changeCount((performance.now() - prevTime.current).toFixed(2));
document.getElementById(customStyle).style.color="#052517";
      return () => {
document.getElementById(customStyle).style.color="#6E8954";
      }
    }
    return () => {}
  }, [customStyle]);
  
  return (
    <div className="code-pen-test">
      <nav className="left-nav">
        <ul>
          <li>
            <a onMouseOver={() => {checkPerformance(); return addStyle('first')}} onMouseLeave={() => {changeCount(0); return addStyle('')}}>
              {'Hover on this...'}
            </a>
          </li>
          <li>
            <a onMouseOver={() => {checkPerformance(); return addStyle('second')}} onMouseLeave={() => {changeCount(0); return addStyle('')}}>
            {'Hover on this///'}
            </a>
          </li>
        </ul>
      </nav>
      <div className="title">
        <span>{'useLayoutEffect'}</span>
      </div>
      <div id="first" className="some-random-div">
        <span>{'...to change this'}</span>
      </div>
      <div id="second" className="some-other-random-div">
        <span>{'///and change this'}</span>
      </div>
      <div className="count">{`Response time:${count}`}     </div>
    </div>
  )
}



ReactDOM.render(<MultiNav />, document.getElementById('app'));