cutshadows / reactjs-filter

example filter with more than thousand elemnts in search filter

FILTER SEARCH REACTJS WITH HOOKS

HOOKS

Las funciones no tienen un estado propio que manejar como ciclos de vida a los que deben suscribirse, mientras tanto las clases sí cuentan con ello.

React tiene un feature llamado Hooks que permite que las funciones también tengan features que solamente tienen las clases.

Hooks: Permiten a los componentes funcionales tener características que solo las clases tienen:

useState: Para manejo de estado. useEffect: Para suscribir el componente a su ciclo de vida. useReducer: Ejecutar un efecto basado en una acción. Custom Hooks: Usamos los hooks fundamentales para crear nuevos hooks custom. Estos hooks irán en su propia función y su nombre comenzará con la palabra use. Otra de sus características es que no pueden ser ejecutados condicionalmente (if).

useState regresa un arreglo de dos argumentos.

useState

esta funcion la vamos a llamar cuando nuestro componente funcional quiera cambiar su estado

useEffect

nos va a permitir subscribirnos a ciclo de vida cuando queremos que nuestro componentes se ejecute antes del ciclo de vida

useReducer

nos va a permitir tomar acciones basados en otras acciones es un conjunto limitado de todos los hoojs

Custom Hooks

Usamos los hooks fundamentales para crear nuevos hooks custom por nomenclatura se le designa a cada custom hooks un nombre 'USE' antes del hooks creado por nosotros regla #2 > un hooks nunca se va a poder ejecutar condicionalmente esto quiere decir que podemos decir if y adentro ejecutar el hooks

utilizacion de hooks en un filtro de busqueda Optimizado y lazy

function useSearchBadges(badges){ const [query, setQuery]=React.useState(''); const [filteredBadges, setFilterResults]=React.useState(badges); React.useMemo(()=>{ const result=badges.filter(badge=>{ return ${badge.firstName} ${badge.lastName}` .toLowerCase() .includes(query.toLowerCase()); //este tipo de filtros es un poco costoso cuando son miles de datos potencial cuello de botella //useMemo recibe como primer argumento una funcion // segundo elemento que recibe es una lista que si el argumento esta guardado te la devuelve sino te la crea por primera vez }); setFilterResults(result); }, [badges, query] ); return {query, setQuery, filteredBadges} }

function BadgesList(props){ const badges=props.badges; const {query, setQuery, filteredBadges}=useSearchBadges(badges); if(filteredBadges.length===0){ return(

Filter Badges <input type="text" className="form-control" value={query} onChange={(e)=>{ setQuery(e.target.value) }}/>

No badges were found

Create new badge

) } return(

Filter Badges <input type="text" className="form-control" value={query} onChange={(e)=>{ setQuery(e.target.value) }}/>

{filteredBadges.map(badge=>{ return(
• <Link className="text-reset text-decoration-none" to={/badges/${badge.id}} >
) })}

) }`