흐름에 따라, 후크에 라스 레글라스, React Js

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

엠페제모스…

1. Solo se puede llamar a los hooks dentro de componentes de función(기능적 구성 요소).

Es base saber esta regla si o si. no podemos usar hooks en componentes de clase (class components) ya que no accite ​​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.

¿Como React는 useState(), useEffect()를 사용하여 렌더링을 시작하기 전에 먼저 작동합니까?

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.

useEffect()에 오류가 발생하지 않으면 조건부로 사용할 수 없습니다.

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

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

useState()를 사용하여 구성 요소를 활성화하고 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.

평화!!!