Como usar useState y useEfeect hooks

Que son los hooks en React

En resumen: React Hooks son algunos métodos que le dan más poder a sus componentes sin estado, como estados propios e independientes, algunos ciclos de vida, suscripción, intercambio de lógica, reductores, etc. Este artículo explicará dos funciones presentes en React Hooks:

• useState
• useEffect

useState

La función más básica de React Hooks es useState. Con él, puede agregar estados en un componente funcional sin estado. El método useState toma un parámetro, que es el valor inicial del Estado, y devuelve dos propiedades en una matriz, la primera es el Estado mismo y el segundo es el método utilizado para actualizarlo.

Aquí un ejemplo de cómo se usa el estado sin React Hooks:

class BookForm extends React.Component {
  const categories = ['Action', 'Biography', 'History', 'Horror', 'Kids']
  constructor(props) {
   super(props);
   this.state = {
     title: '',
     category: categories[0],
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }}

Aquí un ejemplo de cómo se usa el estado con React Hooks:

 const BooksForm = () => {
          const categories = ['Action', 'Biography', 'History', 'Horror', 'Kids']
          const [state, setState] = useState({
            title: '',
            category: categories[0],
          });
  };

useEffect

El método useEffects siempre se llama cuando el componente se ensambla y actualiza. Con él puede reemplazar los ciclos de vida componentDidMount, componentDidUpdate y componentWillUnmount. Ejecuta la función dentro de él y tiene un segundo parámetro opcional, que es una matriz de propiedades que se deben observar dentro del alcance del componente sin estado. Siempre que se actualiza alguno de ellos, la función se vuelve a ejecutar.

Aquí hay un ejemplo usando componentDidMount:

async componentDidMount() {
    const res = await axios.get('some_url');
  }

Usando useEffect

const getSomeUrl = () => {
  const res = axios.get('some_url')
}
useEffect(() => {
  getSomeUrl(); 
});

Esa fue una explicación muy simple sobre dos funciones presentes en Reach Hooks. Puedes consultar más en la documentación oficial Aqui.