Search filter

Clase 36 de 37 • Curso de React.js 2019

Clase anteriorSiguiente clase

Jessie Buckland Pérez

student•

Guillermo Baldán López

student•

Bueno, bueno compañeros...los hooks no son magia...¿Es que ha nadie se le ocurrió antes asociar una variable a una función para guardar un estado?

Guillermo Baldán López

student•

Y otra cosa compañeros...¿Qué me aporta tener funciones que guarden estados (al fin y al cabo siempre he podido guardar estados en variables)?

David Behar

student•

Estamos en 2020 y los hooks ya son la nueva forma de generar nuevas aplicaciones en React

Pilar Camargo Márquez

student•

¿Ya son o ya no son?

David Behar

student•

Ya son, es la forma en que se generan nuevas aplicaciones en React

cesar ismael carrillo celis

student•

de donde saca tantos pines???

Wilson Romero

student•

Los manda a fabricar. El día que tuve el gusto de conocerlo nos dio algunos

cesar ismael carrillo celis

student•

i neeeeeeeeed

Rubén Padilla

student•

👋

/* 
  Para evitar estar escribiendo React.useState || React.useMemo 
  pueden hacer import de los hooks que necesiten.
*/

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

Ivan Santiago

student•

Al agregar la funcionalidad de búsqueda me surgió un problema muy grande y espero ayudar a alguien mostrando lo que hice para solucionarlo. El problema era que se generaba un cuello de botella, un bucle infinito de re-renders

Puse unos cuantos console.log() para ver a qué se refería con "infinite loop", observe que cada vez que se hacía referencia a setFilteredBadges() se hacía un re-render, y esto hacía que cargara de nuevo todo, haciendo un re-render, y así demasiadas veces hasta que se rompe.

La solución es demasiado sencilla pero me tardé mucho en encontrarla jaja :(, es simplemente agregar la condición de que sólo se va a actualizar cuando haya alguna diferencia entre los resultados y los filteredBadges :)

Jorge Luis Vargas Ochoa

student•

Muchas gracias buen hombre

Julian Quiceno

student•

aleluya!

Jerson Morrow

student•

Literal los Hooks me hicieron estallar la cabeza ,tengo que mirar esta clase again, el useMemo() me recuerda a cache con Js la memo, recuerdo tomar notas del curso de Fundamentos de Java Script: La memoización es una técnica de programación que nos permite ahorrar cómputo // o procesamiento en JavaScript, al ir almacenando el resultado invariable de una // función para que no sea necesario volver a ejecutar todas las instrucciones de nuevo, // cuando se vuelva a llamar con los mismos parámetros. Es similar a usar memoria cache.

Manuel Garcia

student•

a alguien mas se le encendió el cerebro cuando metió React useMemo? :')

ANGEL DAVID SULBARAN CALDERON

student•

Search Filter

En esta clase usaremos ReactHooks, la lista en si en código esta dentro de BadgesList, el problema que tenemos para hacerlo allí es que los hooks solo sirven dentro e componentes funcionales asi que en esta caso tenemos una clase y debemos hacer ese cambio;


function BadgesList (props) {
  const badges = props.badges;

    if(badges.length === 0){
      return(
        &lt;div&gt;
          &lt;h3&gt;No badges were found&lt;/h3&gt;
          &lt;Link className=&quot;btn btn-primary&quot; to=&quot;/badges/new&quot;&gt;
            Create new badge
          &lt;/Link&gt;
        &lt;/div&gt;
      )
    }

    return (
      &lt;div className=&quot;BadgesList&quot;&gt;
        &lt;ul className=&quot;list-unstyled&quot;&gt;
          {badges.map(badge =&gt; {
            return (
              &lt;li key={badge.id}&gt;
                &lt;Link className=&quot;text-reset text-decoration-none&quot; to={`/badges/${badge.id}`}&gt;
                &lt;BadgesListItem badge={badge} /&gt;
                &lt;/Link&gt;
              &lt;/li&gt;
            );
          })}
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  }

Para ello lo primero que haremos sera cambiar el “class” que teníamos anteriormente por function y además pasarle props como parámetro, luego eliminaremos los tris.props que teníamos en nuestro código y crearemos una constante para darle a “badges” el valor de props.badges y por ultimo eliminamos el ultimo corchete que nos sobra. Verificamos que nuestro código funcione de manera correcta y si esta todo en orden pasamos al siguiente paso.

Ahora;

    return (
      &lt;div className=&quot;BadgesList&quot;&gt;
        &lt;div className=&quot;form-group&quot;&gt;
            &lt;label&gt;Filter Badges&lt;/label&gt;
            &lt;input type=&quot;text&quot; className=&quot;form-control&quot;/&gt;
        &lt;/div&gt;

Lo primero que hacemos es crear un form-group y colocarle la etiqueta y una barra input de texto con las clases de BootStrap. Verificamos que este todo en orden y luego procederemos a hacer que esta filter las palabras que escribamos en ella con relación a los badges creados en nuestra lista.

El primer paso sera darle un value a nuestro input al momento de escribir algo en el, asi que para ello usamos dos props, el primero es el value y el segundo es el onChange, cuando ocurra el onChange va a pasar un evento y después del evento vamos a leerlo con “console.log(e.target.value)” y de alguna forma queremos guardar el cambio efectuado por el evento en el value, asi que vamos a usar el Hook de useState, vamos hasta arriba y ;

function BadgesList (props) {
  const badges = props.badges;

  const [query, setQuery] = React.useState('')

El useState nos regresa dos valores los cuales serán el query y el setQuery “state y setState” usamos el React.useState y como valor inicial le damos el string vacio, este query es el que vamos a usar en el value y lo que sea que este en ese estado es lo que vamos a desplegar, asi que vamos a nuestra función que tenemos en onChange ;


    return (
      &lt;div className=&quot;BadgesList&quot;&gt;
        &lt;div className=&quot;form-group&quot;&gt;
            &lt;label&gt;Filter Badges&lt;/label&gt;
            &lt;input 
            value={query}
            type=&quot;text&quot; 
            className=&quot;form-control&quot;
            onChange={(e)=&gt;{
              setQueryv(e.target.value)
            }}
            /&gt;
        &lt;/div&gt;

Y en vez de console.log, le diremos setQuery al valor que tenemos en la función de onChange que tendrá por parámetro nuestro value, ya con esto tenemos nuestro value declarado, aun nos falta filtrarlo, ese es el próximo paso, para hacer eso vamos a usar la combinación de la lista de los badges y la del query;


  const filteredBadges = badges.filter(badge =&gt; {
    return badge.includes(query);
  })

El resultado de lo que vamos a hacer lo vamos a guardar dentro de una nueva variable a la que vaos a llamas filteredBadges y vamos a decir que sobre los badges queremos filtrarlos y a la función fiulter le pasamos una función como argumento en este caso nos va a dar cada uno de los filter y si nosotros regresamos “true” nos quedamos con el valor y si regresamos algo “false” lo descartamos, asi que los badges que queremos regresar con los que contengan lo que se esta escribiendo, es decir, lo que esta en el query. Lo siguiente es reemplazar el uso de “badges” porque ya no tenesmoq que estar pendiente de todos los badges sino solo los que esten filtrados asi que ;

 if(filteredBadges.length === 0){
      return(
        &lt;div&gt;
          &lt;h3&gt;No badges were found&lt;/h3&gt;
          &lt;Link className=&quot;btn btn-primary&quot; to=&quot;/badges/new&quot;&gt;
            Create new badge
          &lt;/Link&gt;
        &lt;/div&gt;
      )
    }

    return (
      &lt;div className=&quot;BadgesList&quot;&gt;
        &lt;div className=&quot;form-group&quot;&gt;
            &lt;label&gt;Filter Badges&lt;/label&gt;
            &lt;input 
            value={query}
            type=&quot;text&quot; 
            className=&quot;form-control&quot;
            onChange={(e)=&gt;{
              setQuery(e.target.value)
            }}
            /&gt;
        &lt;/div&gt;


        &lt;ul className=&quot;list-unstyled&quot;&gt;
          {filteredBadges.map(badge =&gt; {
            return (
              &lt;li key={badge.id}&gt;
                &lt;Link className=&quot;text-reset text-decoration-none&quot; to={`/badges/${badge.id}`}&gt;
                &lt;BadgesListItem badge={badge} /&gt;
                &lt;/Link&gt;
              &lt;/li&gt;
            );
          })}
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  }

Y veremos que tendremos un error, pero esto es porque inlcudes no es una funcion sino firstName.includes, de manera que;

function BadgesList (props) {
  const badges = props.badges;

  const [query, setQuery] = React.useState('')

  const filteredBadges = badges.filter(badge =&gt; {
    return badge.firstName.includes(query);
  })

De esta manera ya podremos filtrar, pero tenemos un bug en la pagina, cuando no encontramos nada se nos va el search filter, esto pasa porque cuanbdo comenzamos a escribir, se nos filtra el valor, cambiamos la lista y esta misma llega a 0 asi que caimos en el caso de crear un new badge. Tenemos una opcion, hacer una copia de nuestra search filter y pegarla arriba encima de no badges Found asi no perdemos nuestra barra;


    if(filteredBadges.length === 0){
      return(
        &lt;div&gt;
          &lt;div className=&quot;form-group&quot;&gt;
            &lt;label&gt;Filter Badges&lt;/label&gt;
            &lt;input 
            value={query}
            type=&quot;text&quot; 
            className=&quot;form-control&quot;
            onChange={(e)=&gt;{
              setQuery(e.target.value)
            }}
            /&gt;
        &lt;/div&gt;
          &lt;h3&gt;No badges were found&lt;/h3&gt;

El filtro tiene ahora otro detalle y es que no nos toma las minúsculas al momento de buscar un nombre, al menos en el caso de las letras iniciales de los nombres que es la que nos interesa por lo que vamos a hacer algo que se llama normalizar, vamos a nuestro código ;


function BadgesList (props) {
  const badges = props.badges;

  const [query, setQuery] = React.useState('')

  const filteredBadges = badges.filter(badge =&gt; {
    return badge.firstName.toLowerCase().includes(query);
  })

Y le colocamos el toLowerCase() para que en efectos de buscar los valores, lo hará con nuestro nombre en minúsculas y para agregar nuestro apellido al método de búsqueda, vamos a colocar los strings y encerrarlos de esta manera;


  const filteredBadges = badges.filter(badge =&gt; {
    return `${badge.firstName} ${badge.lastName}`.toLowerCase().includes(query);
  })

Ahora buscamos en nuestro searchFilter y veremos que funciona perfectamente excepto cuando buscamos con la letra inicial en mayuscula, pero eso es porque ovlidamos pasar nuestro Query a lowerCase;


  const [query, setQuery] = React.useState('')

  const filteredBadges = badges.filter(badge =&gt; {
    return `${badge.firstName} ${badge.lastName}`.toLowerCase().includes(query.toLowerCase());
  })

Con esto funcionara perfecto, pero, el detalle es que nuestra lista es corta de momento pero cuando nuestra lista sea mucho mas grande, sera un cuello de botella para nuestra app para ello vamos a usar otro hook que trae React que se llama useMemo, le vamos a dar un función y unos argumentos y la primera vez que reciba ese par de argumentos va a correr la función y va a calcular el resultado y lo regresa, pero la segunda vez que tenga esos argumentos de nuevo ya tiene la contestación asi que la tiene memorizada y te la regresa rápido, asi que;

  const filteredBadges = React.useMemo(badges.filter(badge =&gt; {
    return `${badge.firstName} ${badge.lastName}`
    .toLowerCase()
    .includes(query.toLowerCase());
  }));

El primer argumento de useMemo sera otra función;


  const filteredBadges = React.useMemo(
    () =&gt;{badges.filter(badge =&gt; {
    return `${badge.firstName} ${badge.lastName}`
    .toLowerCase()
    .includes(query.toLowerCase());
  })
});

En este caso va a ser la que teníamos, ahora tenemos que regresar este valor o al menos guardarlo de alguna forma ;

  const filteredBadges = React.useMemo(
    () =&gt;{
      const result = badges.filter(badge =&gt; {
    return `${badge.firstName} ${badge.lastName}`
    .toLowerCase()
    .includes(query.toLowerCase());
  })
});

Y el segundo argumento de useMemo es una lista asi que vamos;


  const filteredBadges = React.useMemo(
    () =&gt;{
      const result = badges.filter(badge =&gt; {
    return `${badge.firstName} ${badge.lastName}`
    .toLowerCase()
    .includes(query.toLowerCase());
  })

  
}, [ badges, query ]);

Estos son los argumentos que siempre que sean iguales la contestación si ya esta memorizada te la regresa de inmediato sino la calcula por primera vez, los argumentos que usarenis detro de ella para hacer el calculo, sera badges y el query, si el query cambia hay que volver a calcular el result, si la lista de badges cambia también hay que volverlo a calcular, cuando lleguemos a este punto el valor lo tenemos que guardar en el valor, pero el valor lo debemos guardar en algún sitio que luego se pueda usar fuera de useMemo;

  const [filteredResults, setFilterRedults ] = React.useState(badges)

   React.useMemo(
    () =&gt;{
      const result = badges.filter(badge =&gt; {
    return `${badge.firstName} ${badge.lastName}`
    .toLowerCase()
    .includes(query.toLowerCase());
  })

Por lo que para ello vamos a crear un estado, eliminamos el filteredbadges y creamos arriba un state usando el hook useState pasando filteredResults y setFilteredResults, este hook tendra como valor inicial la lista completa de los badges, entonces cuando ya tengamos ese resultado lo tenemos que guardar;


  const [query, setQuery] = React.useState('')
  const [filteredBadges, setFilteredBadges] = React.useState(badges)

   React.useMemo(
    () =&gt;{
      const result = badges.filter(badge =&gt; {
    return `${badge.firstName} ${badge.lastName}`
    .toLowerCase()
    .includes(query.toLowerCase());
  })

  setFilteredBadges(result)
}, [ badges, query ]);

Por lo que llamaremos el setFilteredBadges y le pasaremos nuestro resultado (cambiamos el result por badges en los hooks), privamos si funciona y si esta todo bien, perfecto entonces, ya la lista esta calculada asiq ue nuestra app es mucho más rápida, ahora nuestro siguiente paso sera empaquetar todo en un customHook;

function useSearchBadges(badges){
  const [query, setQuery] = React.useState('')
  const [filteredBadges, setFilteredBadges] = React.useState(badges)

   React.useMemo(
    () =&gt;{
      const result = badges.filter(badge =&gt; {
    return `${badge.firstName} ${badge.lastName}`
    .toLowerCase()
    .includes(query.toLowerCase());
  })

  setFilteredBadges(result)
}, [ badges, query ]);

  return { query, setQuery, filteredBadges}
}

Ahora encapsulamos todo en el custom Hook y retornamos el valor que sera una forma de poner el setQuery junto con el filteredBadges y regresamos el query tambien, para usar nuestro custom hook vamos a hacer lo siguiente;


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

Vamos a llamar nuestro custom hook de esta manera llamamos nuestra función hook con la lista de los badges como parámetro. Probamos que todo funcione perfectamente. Ahora podemos buscar una persona entre miles de ellas con nuestro search Filter, y encapsulamos toda esa lógica en una función sin que afectara nuestra interface en un solo sitio, ese custom hook ahora podemos usarlo en varios otros componentes, especialmente si son componentes que presentan una lista de invitados o de badges, ahora debemos aprender a identificar esas oportunidades donde podemos usar hooks en nuestros componentes y crear nuestros propios hooks para reducir la repetición de código y disminuir cada una de las responsabilidades que los hooks tienen.

Mauricio Hernan Cabrera

student•

Opino que los Hooks de react va a ser la nueva forma de programar componentes de cualquier tipo en react

Oscar Barajas Tavares

Team Platzi•

Gradualmente sera una forma de trabajar, donde podamos pensar mas en hacer mas React Funcional.

Bryan Gama Solórzano

student•

Y así fue

Johan Mosquera

student•

Justo terminando el curso de React JS antes de PlatziConf Colombia 2019 😬 y... faltan 2 días 😄.

Frank Antonio Piñin Ato

student•

buen video, creo que debio de darle mas tiempo a este modulo

Alejandro Daniel Oroncoy Almeyda

student•

Muy bueno, estuve haciendo todo el curso con hooks! Y aunque el código es más ligero y no tenía que preocuparme por el "this", tuve que lidiar con algunso pequeños problemas, recomiendo utilizar React Hooks! Realmente es una opción increíble!

Cristian Córdova

student•

Ele me encantaría ver ese código compartido. Definitivamente usar React basándose en programación funcional de la mano de hooks es lo que mas renta hoy en día. 😄

Alexander Armúa Abregu

student•

Moví el input de filtrado a un componente para no repetir 10 líneas dos veces.

Dejo el código:

FilterList.js

import React from "react";

function FilterList(props) {
  return (
    <div className="form-group">
      <label htmlFor="inputFilter">Filter Heroes</label>
      <input
        type="text"
        id="inputFilter"
        name="inputFilter"
        className="form-control"
        value={props.filterValue}
        onChange={e => {
          props.onChange(e.target.value);
        }}
      />
    </div>
  );
}

export default FilterList;

BadgesList.js

<FilterList filterValue={filterValue} onChange={setFilterValue} />```

Iván Darío Sánchez Jiménez

student•

Compañero hice una solución similar pero tenia el problema que cuando se rendereaba el input por el lado de las listas y luego cuando no encontraba un badge y se rendereaba el mismo input pero para el caso que no retornaba un badge se perdia el focus. Lo solucione con autoFocus pero se debe tener cuidado ya que este en React funciona con camelcase.

import React from "react";

export default function SearchFilterInput(props) {
  return (
    <div className="form-group">
      <label>Filter Badges</label>
      <input
        autoFocus
        type="text"
        className="form-control w-100"
        value={props.value}
        onChange={e => {
          props.onChange(e.target.value);
        }}
      />
    </div>
  );
}

Diego Fernando Rojas Quintero

student•

Creo que mi cabeza exploto. Me siento como basura, ante su lógica de programación.

Luis Alejandro Vera Hernandez

student•

Jajaja x2

Gabriel De Andrade

student•

Definitivamente useMemo hace que los Hooks sean más cool todavía. No imagino lo que está por llegar

Can Chen

student•

Ultimo esfuerzo...AHHHH!!

Esdras Benjamín Pavón

student•

Me quedó una duda, hacer el cambio de clase a funcion, fue para aprender a usar hooks, o en este caso es necesario usar hooks? (No sé si me explico)

Miguel Ángel Suárez

student•

Desde el sitio oficial de React dice:

"Hooks son una nueva característica en React 16.8. Estos te permiten usar el estado y otras características de React sin escribir una clase."

en esta clase muestra como pasar de forma de aprendizaje y reforzar los hoocks mas no es que sea esa la forma de hacerlo puede ser con clases.

Lenin Vladimir Felix Torres

student•

Reitero a @masuro se define o se cambia la clase a funcion, por que la misma documentacion de react sobre los hooks lo dice:

"Los Hooks son una nueva incorporación en React 16.8. Te permiten usar estado y otras características de React sin escribir una clase."

"Pero qué es un Hook? Hooks son funciones que te permiten “enganchar” el estado de React y el ciclo de vida desde componentes funcionales. Los hooks no funcionan dentro de las clases — te permiten usar React sin clases. (No recomendamos reescribir tus componentes existentes de la noche a la mañana, pero puedes comenzar a usar Hooks en los nuevos si quieres.)"

Ves!, dejame decirte que es un excelente curso, ya que meciona estos temas cuando hace apenas en febrero de este año los acaba de lanzar, lo cual servira muchisimo esta introducion a este tema para cuando lanzen las versiones estables en las cuales podremos usar estos features sin temor a promblemas con mantenimientos o compatibilidad entre versiones.

Saludos.

PD: este es de los mejores cursos que he toma de platzi, he aprendido demasiado, muchas gracias por la excelente forma de enseñar Sr. Doctor Profesor Richard Kaufman ;)

Manuel Gerardo Flores Quiñonez

student•

:En el minuto 07:35 sale mi nombre en la lista jaja que raro

David Behar

student•

Es cierto, ese es tu twitter?

Rafael Soriano Ramírez

student•

Ya espero el curso profesional de hooks

Sergio Agámez Negrete

student•

Hola,

Yo realicé el mismo ejercicio pero mi componente desde el inicio era una clase, no una función, por lo que no me fue posible usar los hooks, así que realicé el ejemplo de la forma en que se haría sin usar hooks aprovechando el state y demás. Tengo 2 preguntas:

¿Qué diferencia hay entre crear componentes de clase y componentes función? ¿Hay mejora de rendimiento en alguno de los 2?
¿Cuál sería el equivalente de "useMemo" en un componente de clase?

Gabriel De Andrade

student•

Hola Sergio! Muy buenas preguntas por cierto. En un inicio no deberían tener diferencia de rendimiento, esto es lo que dice Dan Abramov (Creador de Redux y un grande en el mundo de React) “El rendimiento depende principalmente de lo que hace el código y no de si escoges una función o una clase.” El equivalente más cercano es Aunque funciona un poco diferente pues es un Higher-Order Component de los cuales también puedes aprender más en el Curso Avanzado de React También puedes leer más sobre las diferencias en esta entrada del blog de Dan Abramov ¿En qué se diferencian los componentes de función de las clases? Saludos 😄

Search filter

Introducción a React.js

¿Qué es React.js?

Pre-requisitos

Herramientas que usaremos

Create-react-app

Fundamentos

Clonar el código de GitHub

ReactDOM.render

JSX

Creación y diseño de componentes

¿Qué es un componente?

Qué es y cómo funciona un componente en React.js

Nuestro primer componente

Cómo aplicar estilos

Props

Nuestra primera página

Enlazando eventos

Manejo de estado

Levantamiento del estado

Listas de componentes

React Router

Introducción a React Router

División de la aplicación en rutas

Mejorando la User Interface con un Layout

Component Lifecycle

Introducción del ciclo de vida de un componente

Práctica del ciclo de vida

Llamadas a un API

Introducción llamadas a un API

React.js: Cómo traer datos de un API en React

Solicitando datos (GET)

Mejorando la Experiencia de Usuario durante una petición

Enviando datos (POST)

Manejando los estados de la petición durante el POST

Actualizando datos (PUT)

Actualizaciones automáticas

Mejorando la UI

Los detalles de un Badge

UI Components y Container Components

Portales

Modales

Hooks

Search filter

Conclusion

Conclusión