Jordan-Gilliam

const not = fn => (...args) => !fn.apply(null, args);
const isZero = (extState, evtObj) => evtObj.key === 0;
const isNotZero = not(isZero);
const isMinus = (extState, evtObj) => evtObj.operator === '-';
const isNotMinus = not(isMinus);
const divideByZero = (extState, evtObj) =>
  extState.operand2 === '0.' && extState.operator === '/';
const notDivideByZero = not(divideByZero);
const calcMachine = Machine({
  id: 'calculator',

Jordan-Gilliam

function SearchResults() {
  // 🔴 Re-triggers all effects on every render
  function getFetchUrl(query) {
    return 'https://hn.algolia.com/api/v1/search?query=' + query;
  }

  useEffect(() => {
    const url = getFetchUrl('react');
    // ... Fetch data and do something ...
  }, [getFetchUrl]); // 🚧 Deps are correct but they change too often

Jordan-Gilliam

// src: https://overreacted.io/a-complete-guide-to-useeffect/
// Optimized useReducer Counter
/* 
   “How is this any better?” 
   The answer is that React guarantees the dispatch function to be constant throughout the component lifetime.
   So the example above doesn’t ever need to resubscribe the interval. 
*/

/* 
Explanation:

Jordan-Gilliam

function makeSingleton(func) {
  let instance,
  return new Proxy(func, {
      construct: function (target, args) {
          if (!instance) {
              instance = new func();
          }
          return instance;
      }
  });