Skip to content

Instantly share code, notes, and snippets.

@dbritto-dev

dbritto-dev/redux-like.jsx

Last active June 24, 2021 16:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dbritto-dev/aebd0d8b35e079f3c92b2f7b6fc487f2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dbritto-dev/aebd0d8b35e079f3c92b2f7b6fc487f2 to your computer and use it in GitHub Desktop.
Download ZIP
React Hooks para principiantes
Raw
useContext-and-Context-API.js
useContext + Context API
Raw
useEffect.js
import { useEffect } from 'react'
// Hook: useEffect
useEffect(() => {
// Ejecuta esto:
// 1. cuando el component se monta -> `componentDidMount()`
// 2. cuando la `informacion` se actualiza -> `componentDidUpdate()`
return () => {
// Ejecuta esto:
// 1. cuando la `informacion` se actualiza -> `componentDidUpdate()`
// 2. cuando el componente se va a desmontar -> `componentWillUnmount()`
}
}, [informacion])
// Usos del useEffect
// Cuando el hook `useEffect` no tiene definida una lista de dependencias
// significa estara pendiente de todos los cambios que sufra el componente
// internamente (a causa de alguna actualización en los estados que maneja
// internamente) o externamente (a causa de alguna actualizacion en las
// propiedades que se le pasa al componente cuando es utilizado).
useEffect(() => {
// `componentDidMunt()` + `componentDidUpdate()`
return () => {} // `componentDidUpdate()` + `componentWilUnmount()`
})
// Cuando el hook `useEffect` tiene definida una lista de dependencias
// pero dicha lista es esta vacia, significa que solo estará pendiente
// a que el componente sea montado.
useEffect(() => {
// `componentDidMunt()` + `componentDidUpdate()`
return () => {} // `componentDidUpdate()` + `componentWilUnmount()`
}, [])
// ✍️ Nota: la función anonima que le pasemos a useEffect no puede ser
// asíncrona, por lo que si deseamos ejecutar una función asíncrona
// es necesario crear dicha función dentro y luego usarla como en el siguiente ejemplo.
useEffect(() => {
const getDataAsync = async () => {}
getDataAsync()
}, [])
// Cuando el hook `useEffect` tiene definida una lista de dependencias
// significa que estará pendiente de los cambios que cualquiera de las
// dependencias tenga de tal manera que la mantendra sincronizada.
useEffect(() => {
// `componentDidMunt()` + `componentDidUpdate()`
return () => {} // `componentDidUpdate()` + `componentWilUnmount()`
}, [...dependencias])
// ✍️ Nota: Es importante declarar la lista de dependencias al definir el useEffect
// y no usar declarar afuera y asignarle el valor al `useEffect` como en el
// siguiente ejemplo:
const dependencias = [primeraDependencia, segundaDependecia, terceraDepdendencia] ❌
useEffect(() => {}, dependencias) ❌
// Tip: crear la lista de depedencias como parte del `useEffect`
useEffect(() => {}, [primeraDependencia, segundaDependecia, terceraDepdendencia]) ✔️
// ✨ Tip: podemos cargar información dinámicamente usando como dependencia el valor
// de algun dato que necesitemos para cargar la información. Un ejemplo puede ser que
// necesitemos cargar los datos del usuario según el identificador del usuario, como
// haremos en el siguiente ejemplo:
useEffect(() => {
const getDataAsync = async () => {
try {
const response = await fetch(`http://awesome.api/user/${userId}/`)
const data = response.json()
} catch(e) {
window.alert(`Error: Ha ocurrido un error al intentar cargar los datos del usuario: ${userId}`)
}
}
}, [userId])
Raw
useState.js
import { useState } from 'react'
// Hook: useState
const [estado, definirEstado] = useState(estadoInicial)
// Usos del useState
// Podemos manejar multiples estados y utilizar dichos estados
// como el estado inicial de otro estado
const [firstName, setFirstName] = useState('')
const [lastName, setLastName] = useState('')
const [fullName, setFullName] = useState(`${lastName}, ${firstName}`)
// ✍️ Nota: cuando el valor a actualizar es generado apartir del estado actual
// es mejor usar una funcion para definir el siguiente estado. Por ejemplo:
// Cuando creamos un contador usamos el estado anterior para calcular el
// siguiente estado -> countador = countador + 1
// Por lo que la forma correcta de definir el estado es mediante una función
// de tal manera de que nos aseguremos que estamos usando el último estado.
const [count, setCount] = useState(0)
// No es seguro usar el estado fuera del metodo del metodo para actualizar el estado
// si es que queremos calcular el nuevo estado basado en el estado actual.
setCount(count + 1) ❌
// ✨ Tip: Podemos pasar una funcion como parametro el cual recibe el estado actual.
// Y por lo tanto podemos calcular el siguiente estado de forma segura.
setCount(currentCount => currentCount + 1) ✔️
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment