themgoncalves

import React from 'react';

const mergeRefs = (...refs) => (value) => {
  for (let i = 0; i < refs.length; i += 1) {
    const ref = refs[i];

    if (typeof ref === 'function') {
      ref(value);
    } else if (ref) {
      ref.current = value;

themgoncalves

const typeOf = (value: unknown | unknown[]): string =>
  ({}.toString
    .call(value)
    .match(/\s([a-zA-Z]+)/)[1]
    .toLowerCase());

export default typeOf;

themgoncalves

const typeOf = (value) =>
  ({}.toString
    .call(value)
    .match(/\s([a-zA-Z]+)/)[1]
    .toLowerCase());

export default typeOf;

themgoncalves

import typeOf from './type-of';

const shallowCompare: (source: Record<string, unknown | unknown[]>, target: Record<string, unknown | unknown[]>): boolean => {
    if (typeOf(source) !== typeOf(target)) {
      return false;
    }

    return Object.keys(source).every((key) => {
      if (typeOf(source[key]) !== typeOf(target[key])) {
        return false;

themgoncalves

can use	components	enhancers	screen	state	styles	utils
components	✅	✅	✅	🚫	🚫	🚫
enhancers	🚫	✅	✅	🚫	🚫	🚫
screen	🚫	🚫	✅	🚫	🚫	🚫
state	🚫	✅	✅	✅	🚫	🚫
styles	✅	✅	✅	🚫	✅	🚫
utils	✅	✅	✅	✅	✅	✅

themgoncalves

/** BAD, BLOCKS THE EXECUTION */
async function getOptions() {
  // request "toppings" and wait for the response
  // only then goes to the next line
  const toppings = await getToppings();
  const condiments = await getCondiments();
  const buns = await getBuns();
  
  
  return { toppings, condiments, buns };

themgoncalves

const species = ['octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale',];

// TRADITIONAL WAY
const firstItem = species[0];
const lastItem = species[species.length - 1];

// NEW WAY WITH SMART ACCESS
const { 0: firstItem, [species.length / 2]: middleItem, [species.length - 1]: lastItem } = species;

console.log(firstItem, middleItem, lastItem);

themgoncalves

import typeOf from './type-of';

const shallowCompare = (source: unknown | unknown[], target: unknown | unknown[]): boolean => {
  if (typeOf(source) !== typeOf(target)) {
    return false;
  }

  if (typeOf(source) === 'array') {
    return (source as unknown[]).length === (target as unknown[]).length;
  } else if (typeOf(source) === 'object') {

themgoncalves

import typeOf from './type-of';

const shallowCompare = (source, target) => {
    if (typeOf(source) !== typeOf(target)) {
      return false;
    }

  if (typeOf(source) === 'array') {
    return source.length === target.length;
  } else if (typeOf(source) === 'object') {

themgoncalves

const deepCompare = (source: unknown | unknown[], target: unknown | unknown[]): boolean => {
  if (typeOf(source) !== typeOf(target)) {
    return false;
  }

  if (typeOf(source) === 'array') {
    if ((source as unknown[]).length !== (target as unknown[]).length) {
      return false;
    }