React, Facebook tarafından geliştirilen bir JavaScript kütüphanesi olup, özellikle büyük ve karmaşık uygulamaların geliştirilmesinde tercih edilir State, bileşenlerin içindeki verilerin güncellenmesi ve arayüzün de güncellenmesi için kullanılır State Hook ise, React 168 sürümünden beri kullanılabilen bir özelliktir ve state yönetimini daha kolay hale getirir useState fonksiyonu ile kullanılır ve bileşen içindeki state verisinin tutulmasını sağlar Bununla birlikte, React uygulamalarının geliştirilmesinde state kavramı ve useState Hook, önemli bir yer tutar State, bileşenlerin birbirleriyle etkileşimini sağlar ve React bileşenleri, state nesnesini örneklendirerek render fonksiyonları içinde erişebilirler
React, Facebook tarafından oluşturulan açık kaynaklı bir JavaScript kütüphanesidir. React, arayüzlerin oluşturulması için kullanılır ve özellikle büyük ve karmaşık uygulamalarda tercih edilir. React'ta state, bileşen içerisindeki verilerin durumunu tutmak için kullanılır ve bileşen içindeki verilerin güncellenmesiyle birlikte arayüz de güncellenir. State Hook, React sürüm 16.8'de tanıtılan bir özelliktir ve bileşenler içinde state yönetimini daha kolay hale getirir.
State Hook, useState fonksiyonu ile kullanılır ve Component’in içinde state verisinin nasıl tutulacağını belirtir. useState fonksiyonu, dizi olarak tutulur ve ilk öğesi state’in ilk değerini, ikinci öğesi de state’in güncellenmesi için kullanılacak olan fonksiyonu tutar. Bu sayede, bir bileşenin state yönetimi, daha kolay ve anlaşılabilir bir hale gelir.
useState Hook, kullanmaya başlamak için React kütüphanesindeki useState fonksiyonunu kullanırız. useState fonksiyonu, bir dizi döndürür ve ilk öğesi state’in ilk değerini, ikinci öğesi de state’in güncellenmesi için kullanılacak olan fonksiyonu içerir.
Örnek olarak, bir sayaç bileşeninde state yönetimi yapmak istediğimizde;
import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( You clicked {count} times
);}Yukarıdaki örnekte, useState fonksiyonu ile count adında bir state oluşturulmuştur. İlk değeri 0'dır. setCount fonksiyonu, useState fonksiyonundan dönen değerlerin ikinci öğesidir ve state güncellemelerinde kullanılır.
State Hook, React uygulamalarının geliştirilmesinde oldukça önemli bir yere sahiptir ve React geliştiricileri tarafından yaygın bir şekilde kullanılmaktadır.
Kısaca React Nedir?
React, Facebook tarafından geliştirilen bir JavaScript kütüphanesidir. Amaç, kullanıcının daha iyi bir deneyim yaşamasını sağlamak için kullanıcı arayüzlerinin geliştirilmesine yardımcı olmaktır. React, birçok modern web uygulamasında kullanılan etkileşimli ve hızlı bir özellik sunar. Büyük ölçüde yeniden kullanılabilir bileşenleri sayesinde, web uygulamalarının geliştirilmesi ve bakımı kolaylaşır.
State Kavramı ve Önemi
React'ta state, herhangi bir bileşenin içindeki verileri tutan JavaScript nesnesidir. State'in kullanımı, React uygulamalarının açısından oldukça önemlidir çünkü React uygulamaları, bileşenlerin birbirleriyle iletişim kurmasını sağlamak için state kullanır.
Özellikle, web uygulamalarında, kullanıcının sayfa üzerindeki etkileşimleri sonucu verilerin güncellenmesi gerektiği durumlarda state kullanımı önem kazanır. State, bileşenin içindeki verilerin tutulduğu bir depolama alanı gibidir ve herhangi bir bileşenin içinde herhangi bir veri saklayabilir.
Bu sayede, bileşenlerin bağımsız olarak çalışabilmesi ve her bir bileşenin ayrı ayrı uğraşması, uygulamanın daha iyi performans göstermesine yardımcı olur. React bileşenleri, state nesnesini örneklendirerek, render fonksiyonları içinde erişebilirler.
State kavramına hakimiyet, React uygulamalarının tasarımı açısından temel bir ünite olduğundan, React öğrenirken bu kavramı öğrenmek oldukça önemlidir. Bu kavramın öğrenilmesi, React projelerinin tasarım sürecindeki verimliliği arttırır.
useState Hook'un Kullanımı
React uygulamalarında state, herhangi bir component'in özelliklerinin değiştirilebilir ve yeniden render edilebilir hale getirilmesini sağlar. State'i değiştirmek için useState Hook'u kullanılır.
useState Hook'u, React fonksiyon bileşenlerinde kullanılır ve birçok parametreye sahiptir. useState Hook'u, ilk değeri ve state değerini güncellemek için kullanılabilecek bir fonksiyon döndürür. Böylece, fonksiyon bileşeninin durumunu yönetmek çok daha kolay hale gelir.
useState Hook'u kullanırken, bir değişken tanımlamak ve değişkeni, Hook'tan döndürülen değerle eşlemek gerekir. Değişken adı farklı olabilir, ancak genel olarak state değeri olarak kullanılmak üzere "useState" terimi kullanılır.
| Örnek Kullanım | Açıklama |
|---|---|
| const [count, setCount] = useState(0); | useState Hook'u kullanarak, başlangıç state değeri olarak 0 atanmış "count" adlı bir değişken tanımlanır ve bu değişkenin değerini güncellemek için "setCount" fonksiyonu kullanılır. |
Bu örnekte, "count" değişkeni, 0 ile başlatılmıştır ve "setCount" fonksiyonu, state değerini güncellemek için kullanılabilir.
useState Hook'unun en temel kullanımı bu kadar basitken, daha fazla seçenek de sunar. useState, örnek olarak, kullanıcı girdilerini saklamak için kullanılabilir. Örneğin, bir kullanıcı adı ve e-posta adresi girildiğinde, useState kullanılarak bu bilgiler saklanabilir.
Bu şekilde, useState, React uygulamalarının daha dinamik hale getirilmesi için önemli bir araçtır.
useState Hook'un Parametreleri
useState Hook, React uygulamalarında state yönetimini gerçekleştirmek için kullanılır. Bu hook, aynı zamanda bir fonksiyonun içinde birden fazla state yönetimini yapmanızı da sağlar. useState Hook, bir dizi parametre alır. İlk parametre, state'in mevcut değerini içerir ve ikincisi o değeri değiştirmek için bir fonksiyon içerir. Bu sayede react component'ınızın değerini güncelleyebilirsiniz.useState Hook'un diğer bir parametresi ise ilk render öncesinde state'in ilk değerini belirler. Bu parametreyi, initial state olarak adlandırabilirsiniz. Bu şekilde useState Hook, component'ın varsayılan özelliklerini ayarlar. Ayrıca useState Hook, iki elemanlı bir dizi döndürür. Bu dizi, state'in mevcut değerini ve onu güncellemek için kullanabileceğiniz setState fonksiyonunu içerir.Aşağıda useState Hook'un alabileceği temel parametrelerin bir örneğini görebilirsiniz:| Parametre | Açıklama |
|---|---|
| initialState | İlk state değeri olarak kullanılacak olan değerdir. |
| setState | State'i güncellemek için kullanılacak olan fonksiyondur. |
useState Hook'un Örnekleri
useState Hook, React State Hook'un temel bir parçasıdır ve React uygulamalarında en sık kullanılan Hooks'tan biridir. Bu Hook özellikle state yönetimi için kullanılır ve React uygulamalarını yazarken neredeyse her zaman kullanılması tavsiye edilir.Bir örnek olarak, bir React bileşeninde kullanımı aşağıdaki gibidir:```import React, { useState } from 'react';const ExampleComponent = () => { const [count, setCount] = useState(0); return (You clicked {count} times
| Örnek | Açıklama |
|---|---|
| Kullanıcı oturum açma durumu | Kullanıcının oturum açma bilgilerini saklamak için `useState` Hook'u kullanılabilir. Örneğin, kullanıcının adını, e-posta adresini veya profil resmini saklamak için kullanılabilir. |
| Alışveriş sepeti | E-ticaret sitelerinde, müşterilerin sepetlerindeki ürünlerin sayısını ve tutarını takip etmek için `useState` Hook'u kullanabilirsiniz. |
| Görsel componentlerin yüklenme durumu | Bazı yiğit halinde, kullanıcının ekranına yüklenen görsel componentlerin yükleme durumlarını takip etmek için `useState` Hook'u kullanılabilir. Bu sayede, kullanıcının görüntülenecek içeriğe erişmesi önemli ölçüde hızlandırılabilir. |
useEffect Hook'un Kullanımı
React uygulamalarında veri akışını takip etmek ve işlemleri yapmak için useState Hook kullanılırken, bileşenin yaşam döngüsüne göre işlemler yapmak için de useEffect Hook kullanılır.
useEffect Hook, bir React bileşeni ilk oluşturulduğunda, güncellendiğinde ve bileşen kaldırıldığında çalışan bir fonksiyondur. ComponentDidMount(), componentDidUpdate() ve componentWillUnmount() fonksiyonlarının hepsini tek bir fonksiyonda birleştirir.
useEffect Hook, iki parametre alır. İlk parametre bir fonksiyondur ve bu fonksiyon, bileşen her güncellendiğinde veya ilk yüklendiğinde çalıştırılır. İkinci parametre ise, bu fonksiyonun hangi durumlarda çalışması gerektiğini belirler.
useEffect Hook'u kullanırken, React, varsayılan olarak bileşenin her güncellendiğinde bu fonksiyonu çalıştırmak için önceki ve mevcut özellikleri karşılaştırır. Ancak React, bu karşılaştırmayı referans eşitliği ile yapar. Eğer bir özellik, referans eşitliği açısından farklı bir değere sahipse, React bu özelliği değişmiş olarak algılamayacaktır.
useEffect Hook'a bir kural ekleyerek bu sorunu çözebiliriz. Bunun için, useEffect Hook'un ikinci parametresi olarak bir dizi belirlememiz gerekir. Bu dizi, fonksiyonun hangi özelliklerin değiştiği durumlarda çalışması gerektiğini belirtir.
Özet olarak, useEffect Hook, React bileşeninin yaşam döngüsüne bağlı olarak çalışan bir fonksiyondur. Birinci parametre olarak bir fonksiyon alırken, ikinci olarak da hangi özelliklerin değiştiği durumlarda bu fonksiyonun çalışması gerektiğini belirleyen bir dizi alır.
useEffect Hook'un Parametreleri
useEffect Hook, uygulama içindeki değişiklikleri takip etmek ve belirli bir işlemi gerçekleştirmek için kullanılır. useEffect en az bir fonksiyon ve bir dizi bağımlılık içerir. İlk parametre olarak geçirilen fonksiyonun, belirtilen duruma bir etkisi olması ve bir sonuç döndürmesi beklenir. useEffect’un alabileceği parametreler aşağıdaki gibidir:
- Callback Fonksiyonu: useEffect, değişiklikleri takip etmek ve bir fonksiyon gerçekleştirmek için kullanılır. Bu nedenle, bir callback fonksiyonu olarak tanımlanır.
- Bağımlılık Listesi: useEffect, belirli bir etkiye sahip olduklarında yeniden çalışacak belirli bir değişken listesi içerir. Bu bağımlılıkların takip edilmesi, işlem maliyetini düşürür ve uygulama performansını arttırır.
useEffect Hook'un Örnekleri
React uygulamalarında useEffect Hook, component'in mount ve update işlemlerinde kullanılır. useEffect Hook sayesinde, component'in state'inde bir değişiklik olduğunda, önceden belirlenmiş bir efekt tetiklenir. Bu efektler, component'in belirli bir durumda olması ya da belirli bir durumda olmaması durumunda gerçekleştirilebilir.Örnek olarak, useEffect Hook, bir API çağrısı yapma ve verileri güncelleme işlemlerinde kullanılabilir. Ayrıca, useEffect Hook bir component'in title'ını güncellemek için de kullanılabilir.Örnek 1: Bir API Çağrısı Yaparak Verileri Güncelleme```javascriptimport React, { useState, useEffect } from "react";import axios from "axios";const UserList = () => { const [users, setUsers] = useState([]); useEffect(() => { axios.get("https://jsonplaceholder.typicode.com/users").then((res) => { setUsers(res.data); }); }, []); return (- {users.map((user) => (
- {user.name} ))}
{props.title}
;};export default PageTitle;```useEffect Hook, component'in state'indeki değişiklikleri izleyerek istenilen efektleri tetikleyebilir. Bu sayede, React uygulamaları daha dinamik ve etkileşimli hale getirilebilir.State ve Effect Hook'un Kullanımı
useState Hook'u, React uygulamalarındaki durumları tutmak için kullanılırken, useEffect Hook'u, React componentlerinin render edilmesinden sonra bir aksiyon gerçekleştirmek için kullanılır. Bu nedenlerle, useState ve useEffect Hook'u birlikte kullanıldığında, uygulamaların bilgi depolama ve yönetiminde daha etkili olmaları sağlanır.
useState Hook'u ile bir componente state eklediğimizde, useEffect Hook'u ile bu durumun nasıl değişeceğini takip edebiliriz. Böylece, herhangi bir state değişiminde, useEffect Hook'u devreye girerek ek aksiyonlar gerçekleştirebilir.
Örneğin, bir kullanıcının profil sayfasını açtığı bir uygulama düşünelim. useState Hook'u ile kullanıcının profil bilgileri gibi değişkenleri kaydedebiliriz. useEffect Hook'u ise, kullanıcının profil sayfasına giriş yaptığında, bu bilgileri çekmek için kullanılabilir. Böylece, kullanıcının profil sayfası hızlı bir şekilde yüklenir.
| useState Hook'u | useEffect Hook'u |
|---|---|
| Kullanıcı verileri gibi state değişkenleri tutmak | Kullanıcının sayfayı açtığında bir işlem başlatmak |
| Alışveriş sepeti gibi öğeleri saklamak | Uygulamanın başlatılmasında verileri yüklemek |
| Kullanıcının girilen metni pas geçişini tutmak | Sayfada bir işlem gerçekleştikten sonra bir uyarı göstermek |
State ve Effect Hook'un birleşimi, kullanıcılarla etkileşimde bulunan arayüzlerin yönetimi için son derece önemlidir. Bu kadar yaygın bir kullanımı olan Hook'ların işleyişi hakkında detaylı bilgi sahibi olmak her React geliştiricisinin sahip olması gereken bir yetenektir.
Kullanıcı Arayüzünde State Hook
Kullanıcı arayüzünde State Hook, web uygulamalarında çok yaygın olarak kullanılan bir tekniktir. Bu yöntem, kullanıcı arayüzünde değişken verileri tutmak, güncellemek ve kontrol etmek için kullanılır. State Hook, React uygulamalarının özellikle kullanıcı etkileşimleri ve veri girişleri ile ilgili kısımlarında oldukça işe yarar.
Bir örnek vermek gerekirse, bir alışveriş uygulamasında, kullanıcının sepetindeki ürünlerin listesini göstermek için State Hook kullanılabilir. Kullanıcının sepetindeki ürün sayısı veya ürünlerin fiyatları gibi değişken veriler, State Hook sayesinde güncellenebilir ve kullanıcı arayüzünde anında görüntülenebilir.
State Hook kullanımı, basit bir örnek ile açıklanabilir. Örneğin, bir "Counter" uygulamasında, kullanıcının tıklama sayısını saymak için State Hook kullanılabilir. Counter bileşeninin kod bloğu şu şekilde olabilir:
import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( Count: {count}
);}Bu örnekte, useState Hook, kullanıcının tıklama sayısını tutmak için kullanıldı. "count" adlı değişken, başlangıçta 0 olarak ayarlandı ve "setCount" fonksiyonu, her tıklamada değeri bir artırdı. Bu şekilde, kullanıcının tıklama sayısı her tıklamada güncellendi ve arayüzde görüntülendi.
Kullanıcı arayüzünde State Hook kullanımı oldukça çeşitlidir ve bu örnekte sadece birkaç örnek verildi. Ancak bu teknik, React uygulamalarının etkileşimli kısımlarında sıklıkla kullanılır ve kodun daha okunaklı ve düzenli olmasını sağlar.
Formlarda State Hook Kullanımı
Formlar, web uygulamalarındaki en önemli öğelerden biridir ve state hooklar, bu formların yönetiminde büyük rol oynarlar. Bir formda veri girişi yaparken, state hooklar ne zaman ve nasıl kullanılmalıdır? Örneklerle inceleyelim.
Örneğin, bir kullanıcının bir formda ad, soyad, e-posta ve şifre gibi bilgileri girmesi gerekiyor. Bu bilgileri state hook'larla nasıl yönetebiliriz? Ad ve soyad örnekleri için bir useState hook kullanarak değişkenlerimizi oluşturabiliriz. Örneğin:
```const [firstName, setFirstName] = useState("");const [lastName, setLastName] = useState("");```
E-posta ve şifre için de benzer şekilde state hook'lar kullanılabilir.
```const [email, setEmail] = useState("");const [password, setPassword] = useState("");```
Bu şekilde, kullanıcı her girdiği bilgi geldiğinde, state güncellenir ve değişiklikler uygulamada gösterilir.
Ayrıca, kullanıcının formu göndermeden önce tüm bilgilerin doğru olduğundan emin olmak için bir işlev de oluşturabiliriz. Bu işlevin içinde, bilgilerin geçerliliğini kontrol eden bir kod yer alabilir. Örneğin:
```const handleSubmit = (event) => { event.preventDefault(); if (firstName === "" || lastName === "" || email === "" || password === "") { alert("Lütfen tüm alanları doldurun."); } else { // Formu gönder }};```
Bu işlev, onSubmit olayı tetiklendiğinde formun yönetimini ele alır. Eğer tüm alanlar dolu değilse, bir uyarı mesajı verilir. Eğer tüm alanlar doğru bir şekilde doldurulduysa, form gönderilir.
Formlar, web uygulamalarında önemli bir rol oynar. State hook'lar ise, bu formların yönetiminde büyük bir yardımcıdır. Yukarıdaki örnekler, bu konu hakkında fikir verebilir ve uygulamalarınızda nasıl kullanabileceğinizi gösterir.
Kaynakça
Bu makalede, React State Hook ve diğer React kancaları hakkında bilgi paylaşılmıştır. Kaynakların doğruluğunu ve tamamını sağlamak için aşağıda listelenen kaynaklara başvurulmuştur:
- Resmi React Belgeleri - https://tr.reactjs.org/docs/hooks-state.html
- React Kancaları Sıfırdan Öğren - https://www.udemy.com/course/react-kancalari-sifirdan-ogren/
- React Kancaları ve Redux - https://www.udemy.com/course/react-kancalari-ve-redux/
- React Kancaları: useState ve useEffect Örnekleri - https://www.taniarascia.com/getting-started-with-react/
Bu kaynaklar, React hakkında daha fazla bilgi edinmek için başvurulabilecek kapsamlı kaynaklardır. React State Hook hakkında daha fazla bilgi edinmek isterseniz, resmi React Belgelerine başvurabilirsiniz.