React'te Kancalar — Giriş

16.8 sürümünde React'e kancalar eklendi ve durumun React fonksiyonel bileşenlerinde kullanılmasını mümkün kıldı. Önceden, yalnızca sınıf bileşenlerinin duruma erişimi vardı. Bu yeni kanca ilavesi, tepki halindeki durumla başa çıkmayı daha kolay hale getirdi.

//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. Yalnızca React fonksiyonel bileşenlerinde kullanılabilirler.
2. Yalnızca bileşenlerin en üstünde çağrılabilirler.

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