Hooks di React — Sebuah pengantar

Hook ditambahkan ke React pada versi 16.8 dan memungkinkan untuk menggunakan status dalam komponen fungsional React. Sebelumnya, hanya komponen kelas yang memiliki akses ke status. Penambahan hook baru ini membuatnya lebih mudah untuk menangani keadaan saat bereaksi.

//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. Mereka hanya dapat digunakan dalam komponen fungsional React
2. Mereka hanya dapat dipanggil di bagian atas komponen.

//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>
  );
}