Sineliad/react-hooks

React Hooks useState, useContext, useEffect and custom Hooks

React Hooks useState, useContext, useEffect and custom Hooks

Los HOOKS son una característica próxima de REACT que te permite usar el estado y otras características de React sin escribir una clase.

Tres ejemplos iguales uno con react normal, otro con react hooks useState, useContext, useEffect y otro con custom hooks

Instalar react normalmente

npx create-react-app hooks

Instalación de eslint-plugin-react-hooks para poder utilizar hooks en la app

1. npm install eslint-plugin-react-hooks@next
2. yarn add react@next
3. yarn add react-dom@next

Los Hooks resuleven estas desventajas de React

1. No se puede reutilizar la lógica - Reuse Logic
2. Compoentes Grandes - Giant Components (Wrapper Hell)
3. Clases confusas - Confiusing clases

Note: No se puede llamar un hook dentro de una condicón debe ser en el top level de componente

Note: Los Custom Hook - Siempre debe empezar con la palabra use

Context in react

El contexto proporciona una forma de pasar datos a través del árbol de componentes sin tener que pasar props manualmente en cada nivel.