Usando el localStorage para guardar los likes

Le falto el JSON.parse(like) cuando obtiene el valor del local storage, de lo contrario siempre que le das like a una foto no volvera a false, porque lo que retorna es un string con el valor “false” hay que parsearlo para que lo lea, al principio funciona ya que los valores que devuelven son null! (osea falsos)

const [liked, setLiked] = useState(() => {
    try {
      const like = window.localStorage.getItem(key)
      return JSON.parse(like)
    } catch (e) {
      console.log('error!!', e)
    }
  })

Igual excelente curso!!

Los iconos también los pueden estilizar directamente con styled components

import styled from 'styled-components'
import { MdFavorite } from 'react-icons/md'

export const LikeIcon = styled(MdFavorite)`
  color:  #ff277a;
  ${fadeIn({ time: '250ms', type: 'ease-in' })}
`

Hasta este punto, el proyecto funciona la primera vez que lo ejecutas y luego los corazones nunca vuelven a ser false.

Para solucionarlo, deben hacer lo siguiente:

const [liked, setLiked] = useState(() => {
    try {
      const like = window.localStorage.getItem(key)
      return JSON.parse(like)
    } catch (e) {
      console.log('error!!', e)
    }
  })```

al quitar el me gusta no funciona seguía mostrando los me gusta… solución

const [liked, setLiked] = useState(() => {
        try {
            const like = window.localStorage.getItem(key)
            
            if (like == 'true') {
                return like
            }
            return false
                
        } catch (e) {
            return false
        }
    })

Brutal, en definitiva uno de los mejores profesores que me he topado en platzi, que maestro!

Para guardar el valor cuando le das Unlike, simplemente agregamos una ternaria

 const  setLocalStorage = value => {
    try{
      value ? window.localStorage.setItem(`like_${id}`,value)
           : window.localStorage.removeItem(`like_${id}`,value)

      setLiked(value);

    }catch(e){
      console.error(e)
    }
  }

Para agregar color rojo al liked y una pequeña animacion.

            <Button liked={liked} onClick={() => setLocalStorage(!liked)}>
              <Icon size='32px' /> {likes} likes!
            </Button>

export const Button = styled.button`
  display: flex;
  align-items: center;
  padding-top: 8px;
	width: 100%;
	padding: 0 15px;
	box-shadow: 0 30px 35px #e5e5e5;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
  & svg {
    margin-right: 4px;
		color: #d1d1d1;
    width: 23px;
    ${
      props => props.liked && css`
        ${fadeIn()}
        color: red`
    }
  }
`

Los valores almacenados en localStorage se pueden ver en el inspector (devTools) en …

En las versiones más recientes de EcmaScript ya no hace falta incluir (e) en el catch si este no se va a usar (o no nos interesa manejar el error de manera específica), así que podemos usar solo } catch {

Si les sale el error:

Too many re-renders. React limits the number of renders to prevent an infinite loop

No se preocupen, en la próxima clase con el refactor que se hace, queda solucionado ✌️

Crack!! 👏👏

Este proceso está super genial, pero en un proyecto real usaríamos una peticion de tipo post (si el api es REST) y todos esos likes los recuperariamos del api… No?

Consulta, a modo de escalabilidad (por cuestiones de rendimiento si nos encontramos en algún proyecto más grande) en cuanto a la función de onClick, es igual poner

<Button onClick={() => setLocalStorage(!like)} />

A intentar no utilizar dentro de los componentes las arrow functions y utilizar algo como

setLocalStorage = () => {
 const value = !like
 ...
}
<Button onClick={setLocalStorage} />

¿Sería lo mismo o la segunda forma si mejora un poco a la larga la performance de nuestra App?
Gracias!

Respecto el uso de una función en useState y el porqué:

El parámetro que le pasamos a useState es “ìnitialState”, éste sólo se utiliza en el primer render, pero si no lo pasamos dentro de una función, entiendo que se ejecutaría en cada render si extraemos el valor directamente, es decir, estaríamos ejecutando cada vez window.localStorage.getitem:

useState(window.localStorage.getItem(key))

En cambio si usamos una función, como nos presenta el video, ésta solo se ejecuta en el primer render, y así sólo ejecutamos window.localStorage.getItem 1 vez.

He aquí el porqué la documentación oficial menciona que si requerimos una computación pesada (yo diría cualquier computación), mejor usar una función.

Aún me queda la duda de si sería más eficiente definir una function getLocalStorage() fuera del componente para así evitar estar definiendo una función en cada render, o si la máquina V8 es lo suficientemente inteligente/optimizada para que sea irrelevante.

No sería mejor guardar un array o un objeto que contenga los likes dentro del local Storage?, para no guardar N keys distintas, guardar una única que contenga todos.

Dado que hoy en día existen múltiples implementaciones nativas de IntersectionObserver, el polyfill que antes se mantenía en este repo ya no está soportado y ha sido archivado

Genial

Una funcionalidad de uso común compleja, pero con esta clase te simplifica la vida

me gusta esta explicacion acerca del localStorage
https://www.youtube.com/watch?v=hb8O0qRqiSk&ab_channel=FernandoHerrera

Genial buen tip, el de poner Try Catch al setear o recuperar del localStorage, no contemplaba cuando un usuario entra en modo privado…

Bien, esto es solo algo provisional después veremos como guardar esta información en la base de datos

me funcionó solo cerrando con eval(), la obtención del item.

const [liked, setLiked] = useState(() => {
        try {
            return eval(window.localStorage.getItem(key));
        } catch (error) {
            console.log(error);
            return false;
        }
    });    

Algo que a primeras vistas tiene un contexto complejo, se muestra simple para miras a un cliente

Hola, les dejo el avance de mi repositorio hasta acá hecho en Nextjs:

https://github.com/danyel117/petgram-platzi/tree/localstorage

Aplicando lógica, muy interesante, como podemos grabarnos tantas palabras claves y útiles y que las recordemos a la hora de usarlas?