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