Hooks en React — Una introducción

Los ganchos se agregaron a React en la versión 16.8 y permitieron usar el estado en los componentes funcionales de React. Anteriormente, solo los componentes de clase tenían acceso al estado. Esta nueva adición de ganchos ha facilitado el manejo del estado en reacción.

//handling state in React class component
import React from "react"

class App extends React.Component {

  constructor(props) {    
    super(props);    
    this.state = {name: "Thushitha"};  
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <p>I'm {this.state.name}</p>      
      </div>
    );
  }
}

export default App;

import {useState} from 'react'

1. Solo se pueden usar en componentes funcionales de React.
2. Solo se pueden llamar en la parte superior de los componentes.

//importing required hook from react
import {useState} from 'react'

export default function App() {

  // correctly calling useState hook
  const [name,setName]=useState("Max")

  if(name==="Max"){
    //wrong usage as this hook is called conditionally. The hooks have to be 
    //called in the same order in every rendering
    const [school,setSchool]=useState("ABC School");
  }else{
    const [college,setCollege]=useState("XYZ College");
  }

  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  );
}