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

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!!!