Enganchado al patrón de desestructuración de la matriz de reactivos

El otro día estaba leyendo sobre el legendario post de React God Dan Ambrov sobre useEffect.a veces me encuentro fingiendo hasta que lo hago, lo cual está bien, pero luego puede volver más tarde y morderme en el culo! la transición a Hooks ha sido bastante confusa, ya que la mayoría de la gente asumió (incluyéndome a mí mismo) que los cambios eran sólo sintaxis. De hecho, los cambios son más sustanciales e implican repensar los ciclos y cómo reestructuramos los componentes. Este[en curso…] post nos muestra el tipo de replanteamiento que se necesita….

Un Refactor UseEffect Counter

El post habla de que esto no es correcto, el conteo siempre será cero.

const Counter = () => {
  const[count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval((() => {
      setCount(count + 1);
    }, 1000);
    return() => clearInterval(id); // Limpieza en `desmontaje
  }, []);
  de vuelta

{count}h1>; Sin embargo, poner un observador en el estado de conteo permitirá que el efecto se actualice correctamente.
useEffect((() => {
  const id = setInterval((() => {
    setCount(count + 1); }, 1000);
  return() => clearInterval(id);
Esta va a ser la forma más común con la que la mayoría de nosotros concluiremos. Pero Dan Ambrov dice que podemos subir de nivel con otra forma que eliminaría al observador completamente! useEffect((() => {
    const id = setInterval((() => {
      setCount(c => c + 1); }, 1000);
    return() => clearInterval(id);
  Sin embargo, si eres como yo y has sido demasiado perezoso para entender completamente la desestructuración de la matriz de ganchos de React, entonces probablemente estés preguntando...
¿De dónde diablos viene esa "c"?

A `Nuevo Patrón JS de tendencia

Tal vez no tan nuevo, pero nuevo para muchos de nosotros y hooks lo ha popularizado a nuevos niveles!
const[state, setState] = useState(init);

useState es una función que devuelve una serie de funciones...Por ejemplo, podríamos hacer una simulación como esta;

const useState = (initialState) =>> { return[state(initialState), setState(initialState)] } const state = (parameter) => { return`this is the state function with the parameter - ${parameter}` } const setState = (parámetro) => { return`this es la función setState con el parámetro - ${parámetro}``. Invocar use State nos llevaría a;
useState(99)
(2) ["este es el estado con el parámetro - 99", "este es el setState con el parámetro de función - 99"].
useState(99)[0]
"este es el estado con el parámetro - 99"
useState(99)[1]
"este es el setState con el parámetro - 99"
useState(99)[2]
undefined/// Element doesnt exist

Destructuring nos permite renombrar los elementos devueltos como lo que son para representarse a sí mismos

const[state, setState] = useState(99)
// Equivalente a...const state = useState(99)[0]
const setState = useState(99)[1]

Pero en este caso obtenemos un error; Uncaught SyntaxError: El identificador state ya ha sido declarado Esto se debe a que ya hemos usado el nombre state en nuestra expresión de función inside useState. En realidad podemos usar cualquier nombre que queramos (que no esté ya usado) para representar los dos primeros elementos de la matriz devuelta desde useState ;

const[whatIsTheState, changeUpDatState] = useState(99)
QUÉ ES EL ESTADO
"este es el estado con la param - 99"
changeUpDatState
"este es el setState con el param - 99"

Gracias a Ken C Dodds en su post por ayudarme a entender esto.

Rosetta Stone That Counter

Aight, volvamos a ese contador;

const Counter = () => {
  const[count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval((() => {
        setCount(c => c + 1);
      }, 1000);
      return() => clearInterval(id);
    }, []);
    de vuelta

{count}h1>; c es el parámetro de setCount, que es el estado inicial de useState, que es 0 por primera vez, se añade uno a c y luego se devuelve como parámetro de setCount, que establece el nuevo conteo. Esto significa que useEffect se ejecuta una vez en la carga, y no hay necesidad de seguir llamando a useEffect en cada cambio, ya que todo sucede una vez.

Potencial de ganchos personalizados

El poder de este patrón es que tiene un gran potencial cuando usted comienza a usar ganchos personalizados. Las características pueden ser extraídas de los componentes y sólo se devuelven los datos relevantes dentro de las matrices a utilizar.
const[nombre, edad, error] = useCustomerDataAPI(key)

Aquí este gancho hecho a medida puede configurarse de la siguiente manera. El gancho necesita una clave api como parámetro y luego devolverá 3 funciones que devuelven una cadena de nombre, una edad de número y un error booleano. estas tres funciones pueden ser usadas en nuestro componente, muy probablemente usando error para comprobar si es falso y luego renderizando el nombre y la edad a la página. no entraré en detalles del gancho personalizado en sí, probablemente requerirá otro post. Por ahora, estoy disfrutando de la dirección en la que va React... Hasta la próxima vez, amigos, ¡feliz codificación!

Etiquetas

ReactJavascriptTecnologíaFrontendRefactoringPatrones de diseñoCodificaciónLas últimas historias técnicasContinuar la discusión