~/pcn $ iniciando_
enunciados + leetcode
Enunciados como los de una entrevista real para resolver por tu cuenta, con el tiempo que te darían, y problemas de LeetCode recomendados para cada tecnología y seniority. Nada se corrige acá: resolvelo en tu editor, en voz alta, y marcá lo que ya practicaste.
Tenés un array users con objetos { id: number, name: string, email: string, role: "admin" | "member" }. Armá un componente UserList que reciba ese array por props y lo muestre como lista, con un input de búsqueda arriba.
Al escribir en el input, la lista se filtra por nombre o email sin distinguir mayúsculas de minúsculas. Por ejemplo, con "ana" deberían aparecer tanto Ana Pérez como mariana@mail.com. No hace falta pegarle a ninguna API: los datos llegan por props.
# requisitos
key estable (el id, no el índice).# si te sobra tiempo, te van a preguntar
role que se combine con la búsqueda?Construí una lista de tareas. Cada tarea tiene la forma { id: string, text: string, done: boolean }. Arriba hay un formulario para agregar tareas y abajo tres botones para filtrar: Todas, Pendientes y Completadas.
Cada tarea se puede marcar como completada con un checkbox y eliminar con un botón. Al pie mostrá cuántas tareas pendientes quedan, por ejemplo 2 pendientes.
# requisitos
<form> con onSubmit).push o mutar la tarea directamente.TodoItem) que reciba callbacks por props.# si te sobra tiempo, te van a preguntar
useReducer en lugar de useState acá? ¿Qué ganarías?Implementá una función debounce(fn, ms) que devuelva una nueva función. Cuando la nueva función se llama varias veces seguidas, fn se ejecuta una sola vez, ms milisegundos después de la última llamada, con los argumentos de esa última llamada.
Ejemplo: con const log = debounce(console.log, 300), si llamás log("a"), log("b") y log("c") dentro de 100 ms, después de 300 ms se imprime solo c. No uses librerías.
# requisitos
fn recibe los argumentos de la última llamada.this con el que se llamó a la función devuelta.# si te sobra tiempo, te van a preguntar
cancel() a la función devuelta.debounce dentro de un componente de React sin useMemo o useRef?debounce.filter te obliga a entender callbacks y funciones de orden superior.reduce aparece todo el tiempo para derivar datos antes de renderizar.