coliveravenegas

Resumen
- React: (2/5 stars)
    - Usa custom hooks para separar logica como useCountries
    - Conoce existencia de hooks de optimización como useCallback y useMemo pero los aplica necesariamente bien, pero es un buen comienzo.
    - Condiciona componentes y props que a veces pueden dificultar la lectura del código.
    - Agrega complejidad innecesaria al código (podría ser que quiera impresionar y en realidad en la vida real no lo hace, pero de no ser así, es una mala practica)
    - La aplicación genera re-renders innecesarios pero no estamos calificando el tema de performance exactamente, a pesar de que el candidato intenta usar hooks qué mejoran el performance, no esta logrando mejorar el performance de la app al final.
    - Usa incorrectamente react router para ir al Home del app, podría utilizar un Link pero usa un div, semánticamente incorrecto
    - En materia de react router no hay mucho que calificar, usa lo necesario para el project
    - Podia aprovechar para optimizar el Search input para evita

coliveravenegas

import React, { useEffect, useState } from 'react';

import { Loader } from '@crehana/ui';

import { useStickyState } from '@crehana/react-hooks';

import Loadable from 'Jsx/Shared/Loadable';

const LANDING_USER_ARRIVALS_REQUIRED_TO_TRIGGER = 2;

coliveravenegas

<React.Fragment>
  
        <p className="my-8 font-subtitle4">Tipo de documento</p>
        <div className="flex flex-row items-start">
          <Controller
            render={({ onChange, value, ref }) => (
              <>
                <Radio
                  htmlProps={{
                    htmlFor: 'NIT',

coliveravenegas

const convertObj = (x, y, z) => {
    const k = Object.keys(x);
    return k.map((key) => {
        return {
            [y]: key,
            [z]: x[key],
        }
    });
}

coliveravenegas

// BAD
const newFruits = fruits.map( x => {
  return doSomething(x);
})

// GOOD
const newFruits = fruits.map( fruit => {
  return doSomething(fruit);
})

coliveravenegas

// BAD
userData(userId)
userDataFunc(userId)
totalOfItems(items)

// GOOD - Solo agregando el verbo ya nos damos cuenta que es mas legible
getUser(userId);
calculateTotal(items);

coliveravenegas

//BAD
const pugs = 3;

/* GOOD - usando un prefijo como hacemos mas claro que es un
valor numerico */
const minFruits = 1;
const maxFruits = 5;
const totalFruits = 10; 

coliveravenegas

/* Haciendo unos ajustes tendriamos esto: */
const checkHasFruit = (user, fruitName) => user.fruits.includes(fruitName);

const hasFruit = checkhasFruit(user, 'apple');

coliveravenegas

const user = {
  fruits: ['apple']
}

const hasFruit = (user, fruitName) => user.fruits.includes(fruitName);

/*Si la funcion ya se llama "hasFruit" que nombre le pondriamos a "x"? */
const x = hasFruit(user, 'apple');

coliveravenegas

/* BAD - "open" podría ser una variable de estado o function, no lo
sabemos */
const open = true;
const write = true;
const fruit = true;

/*GOOD - Ahora te preguntas, "esta abierto?", SI o NO?. Es inferible
y evidente que es una variable booleana
*/
const isOpen = true;