React Hook useState nedir? Nasıl kullanılır?

React Hook’lar versiyon  16.8. ile gelen yeni bir özelliktir. Bunları kullanmak için versiyonunuz en az  16.8+ olması lazım. Class yazmadan react özelliklerini kullanmaya olanak sağlar. Daha önceden class’ları react.component’ten extend ediyorduk.  Önceki state kullanımı için bu yazıya bakabilirsiniz http://derinkod.com/react-state-nedir-nasil-kullanilir/

Aşağıda kullanılabilecek birkaç örnekle bunu anlatmaya çalışacağım.

Başlangıç durum değişkeni tanımlaması

const App = props => {
  const [age] = useState(26)
  return (
    <div className="App">
      <h1>Benim yaşım {age}</h1>
    </div>
  );
}
 export default App

çıktısı “benim yaşım 26” şeklinde göreceksiniz. Gördüğünüz gibi başlangıç değeri tanımladım. Varsayılan olarak 26 geliyor.

Durum değişkenini güncelleme 

Durum güncellemeleri içi setState mantıgı kullanılır.

const App = props => {
  
  const [age, setAge] = useState(26)
  const handleClick = () => setAge(age +1)

  return (
    <div className="App">
      <h1>Benim yaşım {age}</h1>
      <button onClick={handleClick}> yaşı artır </button>
    </div>
  );
}

 export default App

çıktısı “butona bastıkça yaşın arttığını göreceksiniz

Nesne kullanımı örnek

string, number, boolean,array, objeleride kullanabilirsiniz.

const App = props => {

  const [state, setState] = useState({age: 26, kardes:1})
  const handleClick = (val) => {
    setState({
      ...state,
      [val]: state[val] + 1
    })
  }
  const { age, kardes } = state

  return (
    <div className="App">
      <h1>Benim yaşım {age}</h1>
      <h1>kardes sayısı {kardes}</h1>
      <button onClick={handleClick.bind(null,'age')}> yaşı artır </button>
      <button onClick={handleClick.bind(null,'kardes')}> kardeşi artır </button>
    </div>
  );
}

 export default App

Durumu fonksiyondan başlatmak

tarayıcının dilini seçiyorum.

  const [language] = useState(()=>{
    let language = navigator.language || navigator.userLanguage;
   return language
  });


  return (
    <div className="App">
      <h1>tarayıcı dili {language}</h1>
    </div>
  );
}

Fonksiyonel setState kullanımı

useSate çağırıldığı zaman setState güncelleme  işlevini döndürür.

const [value, updateValue] = useState(0)
//Aşağıdaki güncelleme çağırma işlevlerinin ikiside aynı anlama geliyor.👇

updateValue(1);
updateValue(previousValue => previousValue + 1);
const App = props => {

  const [maas, setMaas] = useState(0);


  return (
    <div className="App">
      <h1>maaş {maas} TL</h1>
      <button onClick={() => setMaas(0)}>Reset</button>
      <button 
        onClick={() => setMaas(prevMaas => prevMaas + 500)}>
        Artır (+)
      </button>
      <button 
        onClick={() => setMaas(prevMaas => prevMaas - 500)}>
       Azalt (-)
      </button>
    </div>
  );
}

Hookları öğenirken karşılaştığım notları burayada yazayım dedim. Hadi Eyvallah

Bir cevap yazın