useEffect vs useLayoutEffect in one simple component.

react_hooks_effect.js

import * as React from 'react';

export default (()=> {
  const ref = React.useRef();
  /* 
   * useEffect hook
   * Used when DOM changes are unobservable
  */
  React.useEffect(() => {
    ref.value = '2019';
  });

  /* 
   * useLayoutEffect hook
   * runs synchronously immediately after 
   * React has performed all DOM mutations 
  */
  React.useLayoutEffect(() => {
    console.log(ref.value) // this should log an old value because this runs first
  });
};