El estado de flow, en las reglas de hooks, React Js

AlexisSossa — Sun, 10 Jul 2022 05:12:13 +0000

Es muy importante tener los fundamentos acerca de estas reglas ya que nos beneficiara siempre tenerles en cuenta en cada proyecto en que estemos desarrollando, estas reglas se aplican a los hooks incorporados en React, como useState(), useEffect(), así como cualquier otro hook personalizado.

Empezemos…

1. Solo se puede llamar a los hooks dentro de componentes de función (functional components).

Es base saber esta regla si o si. No podemos usar hooks en componentes de clase (class components) ya que no admite hooks. Tampoco podemos usar hooks en funciones regulares de JavaScript esto es con el propósito de mantener el código.

2.Solo llama a los hooks en el nivel superior de los componentes de tu función. No los llame dentro de otras funciones, condicionales o bloques de bucle.

Esto nos asegura que nuestros hooks se llamen, en el mismo orden, cada vez que se vuelva a renderizar un componente, un ejemplo cotidiano, cuando los usuarios interactúan con la con la app y la aplicación/software vuelve a renderizar, React llama a todas las funciones que estan definidas dentro de los componentes en cada nuevo renderizado, incluido los hooks.

Entonces te preguntaras ¿Como React puede realizar un seguimiento de las llamadas useState(), useEffect(), que se realizan entre los renderizados?

React realiza un seguimiento de los datos y los callbacks que se administran con hooks en función de su orden en la definición del componente. Si ejecutamos nuestros ganchos solo durante algunos re-renderizados y no en otros, este orden se confundirá y causará resultados inesperados.

Si colocamos una llamada de useEffect(), dentro de un condicional if nos causa un Error.

const [searchQuery, setSearchQuery] = useState('');

if (!searchQuery) {
  useEffect(() => {
    fetchData(`someapi.com/search?q=${searchQuery}`);
  }, [searchQuery]);
}

Entonces el componente llamaría a useState() cada vez, pero solo algunas veces llamaría a useEffect().

En cambio podemos lograr el mismo objetivo mientras llamamos contantemente a nuestro hook.

const [searchQuery, setSearchQuery] = useState('');
useEffect(() => {
  if (!searchQuery) {
    fetchData(`someapi.com/search?q=${searchQuery}`);
  }
}, [searchQuery]);

Siguiendo esta regla, podemos asegurarnos de que nuestros hooks se llamen en el mismo orden y en cada renderizado.

Ten siempre presente estas reglas en tu desarrollo con React Hooks.

PEACE!!!

DRY Code aplicado a Funciones

AlexisSossa — Sat, 01 Jan 2022 00:03:24 +0000

Mas allá de los dilemas, un buen código siempre aprovechara la potencia de su lenguaje de programación para evitar realizar las mismas tareas.

const addFive = number => {
  const fiveAdded = number + 5;
  console.log(`Your number plus 5 is ${fiveAdded}`);
}

const addTen = number => {
  const tenAdded = number + 10;
  console.log(`Your number plus 10 is ${tenAdded}`);
}

const addTwenty = number => {
  const twentyAdded = number + 20;
  console.log(`Your number plus 20 is ${twentyAdded}`);
}

Como ves en el código anterior, estas tres definiciones de funciones no son replicas exactas entre si, una aplicación bien diseñada será lo suficientemente flexible para unir funciones en un solo elemento.

const addNumber = (number, addend) => {
  const numAdded = number + addend;
  console.log(`Your number plus ${addend} is ${numAdded}`);
}

El código que realiza la misma tarea en varios lugares es repetitivo, y el credo del codificador de calidad es "Don't Repeat Yourself" (DRY). Si un programa realiza tareas similares sin refactorizar en una función, se dice que "viola DRY". “Violar DRY” es la forma en que un programador se queja: “¡Este script dice lo mismo una y otra vez! ¡Podemos hacer lo mismo con menos código! " Tratemos de no repetirnos en esta base de código reutilizando algunos de los códigos repetidos más evidentemente en funciones que podamos llamar.

DEV Community: AlexisSossa

El estado de flow, en las reglas de hooks, React Js

DRY Code aplicado a Funciones