React Hooks Hakkında

Bu makalede, React Hooks kavramının temel kavramları ve terminolojisi ele alınmaktadır useState, useEffect ve useContext gibi temel hooklar ile birlikte, örnekler ve açıklamalar sunulmaktadır useEffect fonksiyonunun yaşam döngüsüyle ilgili işlemleri yönetmek için kullanıldığına ve cleanup fonksiyonlarının da kullanılabileceğine dikkat çekilmiştir Ayrıca, dependencies kullanımı ve doğru belirlenmesinin, React uygulamalarındaki performansı artıracağı vurgulanmıştır Makalede, custom hooklar da ele alınmaktadır

Bugünlerde, web geliştirme dünyasında React Hooks kavramı oldukça revaçta. Peki, React Hooks tam olarak nedir ve neden bu kadar popüler oldu? React Hooks ile gelen yeni kavramlar ve terimler nelerdir?

Bu makalede, React Hooks'un temel kavramları ve terminolojisi hakkında bilmeniz gerekenleri ele alacağız. useState(), useEffect(), useContext() gibi temel hooklar ile birlikte, kısa örnekler ve açıklamalar sunacağız. Ayrıca, custom hooklar konusuna da değineceğiz.

useState()

React Hooks ile birlikte gelen useState() fonksiyonu, React'ta state yönetimini sağlar. Klasik React'ta state yönetimi, class component'lerin state özelliği kullanılarak gerçekleştirilirken, React Hooks ile birlikte bu özellik fonksiyon component'lerinde de kullanılabilir hale geldi.

useState() fonksiyonu, şu şekilde kullanılır: Bir state değeri ve onu değiştirecek bir fonksiyon tanımlanır. Gelen veri önceki veri ile karşılaştırılarak, değişiklik mevcutsa React render işlemi yapıp, güncellenen veriyi UI'da gösterir.

Aktarılacak parametreler	Çıktısı
initialState	Başlangıç değeri olarak tanımlanan veri
setState	useState() fonksiyonu Sadece return edilebilir ve data'ya erişebilen bir fonksiyon döndürür.

useState() fonksiyonu kullanarak bir örnek yazalım. Örnek olarak, bir input alanına yazılan veriyi takip eden state'in JS kodları aşağıdaki gibidir:

import React, { useState } from "react";const NameInput = () =>  {    const [name, setName] = useState("");    const handleChange = (event) => {        setName(event.target.value);    }    return (                    Your Name:                        );}export default NameInput;

useState() fonksiyonu ile name değişkeni tanımlandı.
useState() fonksiyonu ile setName fonksiyonu ile değeri set edilebilir hale geldi.
handleChange fonksiyonu ile setName fonksiyonu kullanılarak input'ta yazılan veri name değerine atandı.

Bu örnek, useState() fonksiyonunun temel kullanımını göstermektedir. Component içindeki işlemleri useState() fonksiyonu ile yapıp, değişen datayı UI'da render yapabiliriz.

useEffect()

React komponentlerinde, yaşam döngüsüyle ilgili işlemleri yönetmek için useEffect() fonksiyonu kullanılır. Bu fonksiyonun en temel amacı, komponentin render edilmesi ve bileşen durumu döndürmesi arasında arka plan işlemlerini yönetmektir. useEffect() fonksiyonu, “componentDidMount”, “componentDidUpdate” ve “componentWillUnmount” fonksiyonlarının birleştirilmiş halidir.

Bu fonksiyon, iki parametre alır: fonksiyon ve dependencies dizisi. Fonksiyon, useEffect() tarafından izlenen bir önceki state’in değerine ilişkin etkilere neden olan herhangi bir veriyi güncellemek için kullanılır. Dependencies dizisi, verilerin “componentDidUpdate” sırasında takibi için kullanılır ve bir değişiklik olduğunda bellekteki içeriğin güncellenmesine yardımcı olur. Böylece komponent, ekran yenilendiğinde, web tarayıcısının bu değişikliği fark ederek sayfayı yeniden çizmesine gerek kalmaz.

Örneğin, bir form alanında kullanıcının bir veri girişi yapması sonrasında, ilgili alanın anında güncellenmesi gerektiğinde useEffect() kullanılır. Ya da bir sayfa yenilendiğinde, yapılacak HTTP isteğiyle birlikte, kullanıcının dikkatini çekecek bir yükleme animasyonu kullanılabilir ve burada da useEffect() devreye girer.

useEffect() kullanırken, “cleanup” fonksiyonları da kullanılabilir. Bu fonksiyonlar, komponentin sonlandırılması sırasında kullanılabilir. Örneğin, bir oyun bileşeni kullanıldığında, oyuncunun oyunu terk etmesi durumunda müzik dosyasının otomatik olarak susturulması için cleanup fonksiyonları kullanılabilir.

Sonuç olarak, useEffect(), React komponentinin yaşam döngüsü boyunca işlemleri yönetmek için kullanılan önemli bir fonksiyondur. Kodun daha performanslı hale getirilmesi için uygun kullanımı konusunda dikkatli olunmalıdır.

dependencies

React Hooks kullanırken, useEffect() içindeki dependencies kavramını anlamak oldukça önemlidir. Dependencies, hook'un çalışması için gerekli olan herhangi bir değişken veya fonksiyonlardır. Bu, useEffect() içindeki ek işlemleri belirleyerek, gereksiz render işlemlerini önleyebilir ve React uygulamanızın performansını artırabilirsiniz.

useEffect() içindeki dependencies olarak belirtilen değişken veya fonksiyonlar, atandıkları ilk sıradaki değeri(tekrar atanmadıkça) esas alınarak hook'un çalışması gerçekleştirilir. Bu nedenle, dependencies içinde atanan değerlerin güncel halini takip edebilmek önemlidir. Aksi takdirde, beklenmeyen render işlemleri gerçekleşebilir.

Ayrıca, useEffect() içindeki dependencies kullanımı, hook'un çalışması sırasında yapılması gereken işlemlerin kontrolünü de sağlar. Örneğin, bir state değiştiğinde yapılması gereken işlemleri belirleyebilirsiniz. Bu sayede, sadece state değiştiğinde yapılacak işlemleri belirleyerek gereksiz render işlemlerinden kaçınabilirsiniz.

Genel olarak, dependencies kullanımı, React uygulamanızın performansını artırmak adına oldukça önemlidir. Unutmayın ki, az sayıda ve doğru şekilde belirlenmiş dependencies, uygulamanızın performansını artıracak ve render işlemlerini en aza indirgeyecektir.

cleanup functions

React uygulamalarında useEffect() hook'u ile birlikte yapılan işlemler, zaman içerisinde arttıkça bellek kaynaklarını kullanabilir ve performans sorunlarına neden olabilir. Bunun önüne geçmek için ise cleanup functions kullanabiliriz.

Cleanup function, useEffect() fonksiyonu sayesinde yürütülen işlemlerin, component temizlenmeden önce kapatılmasını sağlayan bir yapıdır. Böylece, yapılan tüm işlemler component kapatılmadan önce sonlandırılır ve performans arttırılır.

Örneğin, bir component içinde yürütülen bir fetch işlemi sonrasında, sonuçlar listesi üzerinde çeşitli işlemler yaparak kullanıcıya sunulmuş olabilir. Eğer bu component çıkış yapmadan önce kapatılmazsa, fetch işlemi sürekli olarak çalışmaya devam edecek ve bellek kaynakları gereksiz yere tüketilmiş olacaktır. Cleanup functions kullanarak fetch işlemini sonlandırabilir ve bellek kaynaklarını boşaltabiliriz.

Cleanup functions örneği aşağıdaki şekildedir:

cleanup function örneği:

cleanup function örneği:
`useEffect(() => { const fetchData = async () => { const result = await axios( 'https://jsonplaceholder.typicode.com/posts' ); setData(result.data); }; fetchData(); return () => { console.log('cleanup function çağrıldı'); }; }, []);`

        useEffect(() => {          const fetchData = async () => {            const result = await axios(              'https://jsonplaceholder.typicode.com/posts'            );            setData(result.data);          };          fetchData();          return () => {            console.log('cleanup function çağrıldı');          };        }, []);

Yukarıdaki kod örneği, useEffect() ile birlikte bir axios fetch işlemi yürütür. Cleanup function kullanarak, component kapatılmadan önce console.log ile bir mesaj yazdırıyoruz. Böylece, useEffect() sonlandırıldığında "cleanup function çağrıldı" mesajı console'da görünecektir. Bu sayede, işlemlerin kapatıldığından emin olabilirsiniz.

useContext()

useContext(), React'ta state yönetimi yaparken kullanılan önemli bir hook'tur. Bu sayede, state yönetimi daha kolay hale getirilebilir ve componentler arasında state paylaşımı yapılabilir. useContext() kullanımı oldukça basit ve öğrenmesi de kolaydır. Bir context oluşturularak, bu context içerisindeki değerler useContext() yardımıyla componentlerde kullanılabilir hale gelir. Örnek olarak, bir kullanıcının admin ya da regular user olup olmadığına göre componentlerin gösterileceği ya da gizleneceği bir uygulama düşünelim. createContext() methodu kullanılarak bir context oluşturulur ve içerisine admin ya da regular user'a göre bir değer ataması yapılır. ```import React, { createContext, useContext } from 'react';const UserContext = createContext();const App = () => { return (

)}const Navbar = () => { const { userType } = useContext(UserContext); return ( )}const Main = () => { const { userType } = useContext(UserContext); return (

{userType === 'admin' ? : }

You can see this message because you are a {userType}.

)}```Yukarıdaki örnekte, createContext() methodu kullanılarak bir UserContext oluşturulmuştur. Bu context içerisinde userType isimli bir değer bulunmaktadır ve App componenti içerisinde bu context Provider component'i kullanılarak, userType için admin değeri atanmıştır. Navbar ve Main componentlerinde ise useContext() methodu kullanılarak, UserContext context'i içerisindeki değerler kullanılmıştır. Navbar componenti, userType 'admin' ise Dashboard'u içeren bir listeye sahiptir. Main componenti ise userType'a bağlı olarak farklı bir başlık ve mesaj göstermektedir. useContext() hook'u, sadece state değerlerini değil, özelleştirilmiş fonksiyonları da componentler arasında paylaşmak için kullanılabilir. Bu sayede, state yönetimi daha da esnek hale getirilebilir.

custom hooks

React Hooks, React uygulamalarında state yönetimi ve yaşam döngüsü yönetimini kolaylaştıran bir yapı sağlar. Bu yapıların kullanımı sayesinde, React uygulamaları daha performanslı hale gelir ve kod okunabilirliği artar. Custom hooklar ise bu yapıların daha özelleştirilmiş ve kolay kullanılabilir hale getirilmesini sağlar.

Custom hookların oluşturulması işlemi oldukça basittir. Öncelikle, bir hook olarak kullanılacak işlev (function) oluşturulmalıdır. Bu işlev, useState() veya useEffect() gibi önceden tanımlanmış React hook'ları içerebilir. Daha sonra, işlevin içinde kullanılacak state'ler ve işlevler belirlenerek, bunların bir obje olarak döndürülmesi gerekir. Son olarak, custom hook, herhangi bir React fonksiyonu gibi kullanılabilir hale getirilmelidir.

Custom hook'ların kullanım alanları oldukça geniştir. Örneğin, API çağrıları, form işlemleri, react-router işlemleri, çoklu form sayfaları, gibi işlemler için custom hooklar oluşturulabilir. Bu sayede, işlemlerin tekrarlanabilirliği azalırken, kod okunabilirliği ve bakımı da kolaylaşır.

Ayrıca, useState() veya useEffect() gibi önceden tanımlanmış React hook'ları kullanılarak, custom hooklar da oluşturulabilir. Böylece, çok sayıda component içinde aynı işlemi tekrarlamak yerine, bu işlemi tek bir custom hook içinde gerçekleştirmek mümkün hale gelir. Bu sayede, kod tekrarından kaçınılır ve uygulamanın performansı artırılır.

Custom hooklar, özelleştirilebilir yapıları ve kullanım kolaylığı sebebiyle React uygulamalarının vazgeçilmez öğeleri arasında yer almaktadır. Bu sebeple, React Hooks kullanıcılarının custom hook oluşturma ve kullanmaya özen göstermeleri gerekmektedir.

useState ile custom hook oluşturma

useState() hook, genellikle state tutmak için kullanılır ve React Hooks'un en temel konseptlerinden biridir. Bu hook, component içinde state'in tanımlanmasını sağlar ve React'in render işlemi esnasında bu state'i güncelleyerek component'in yeniden render edilmesini sağlar.

Ancak bazı durumlarda, aynı state'i birden fazla component'te kullanmak isteyebiliriz. Bu da custom hooklar ile mümkündür. Bir custom hook oluşturmak, useState() hook'unu kullanarak hızlı ve kolay bir şekilde yapılabilir.

Bir örnek üzerinden açıklamak gerekirse, örneğin bir sayfa içinde farklı component'lerde kullanılmak üzere, bir öğrencinin ders notlarını state olarak sakladığımızı düşünelim. Bu durumda useState() hook'unu kullanarak bir custom hook oluşturabiliriz.

Öncelikle useState() hook'una ihtiyacımız var. Sonrasında, bu hook'u bir custom hook'ta kullanarak, istediğimiz component içinde kullanabiliriz. Bunun için useState() fonksiyonunu kullanarak, öğrencinin ders notlarına ait state'i tutacağız.

useState() fonksiyonunu kullanarak öğrencinin ders notlarını state olarak tanımlayabilir ve daha sonra bu state'i, component içinde input veya form elementleri ile bağlayabiliriz. Böylece, bu custom hook'u başka component'lerde de kullanarak, öğrencinin ders notlarını tutabiliriz.

Benzer şekilde, useState() hook'u kullanarak farklı state'ler için de custom hooklar oluşturabiliriz. Örneğin, bir login sayfasında (login işlemini yönetmek için) kullanılan kullanıcı adı ve şifre state'lerini, useState() fonksiyonunu kullanarak custom hook'larda tanımlayabiliriz. Bu custom hook'ları daha sonra login sayfası, üyelik sayfası ve diğer benzer sayfalarda da kullanabiliriz.

Sonuç olarak, useState() hook'unun custom hook'lar ile kullanımı oldukça verimlidir ve kod tekrarını en aza indirmek için ideal bir çözümdür. Bu sayede state yönetimi kolaylaşır ve component'ler arasında state aktarımı daha rahat bir şekilde gerçekleşir.

useEffect ile custom hook oluşturma

useEffect ile custom hook oluşturma

React Hooks, React uygulamalarında state yönetimini ve komponentlerin yaşam döngüsünde işlemlerin yapılmasını kolay hale getirmek için kullanılmaktadır. useEffect() hook'u, komponentlerin yaşam döngüsü hakkında bilgi sahibi olmak için kullanılır. Ayrıca, fetch, axios, ve diğer HTTP istekleri gibi işlemler için de kullanılabilir. Bu nedenle, useEffect() hook'unu kullanarak özelleştirilmiş hooklar oluşturmak mümkündür.Bir custom hook oluşturmak için useEffect() kullanılarak bir işlev tanımlanması gerekmektedir. Bu işlev, öncelikle useState() hook'u kullanarak bir state oluşturur ve ardından useEffect() hook'u içinde yaşam döngüsü işlemlerini gerçekleştirir. Örneğin, bilgi alışverişinde bulunulan bir uygulamada, HTTP isteği sonucunda dönen verilerin kaydedildiği bir custom hook oluşturulabilir. useEffect() kullanılarak, istek işlemi gerçekleştirildiğinde veya komponentlerin yeniden yüklendiğinde otomatik olarak çalışacak şekilde tanımlanabilir.Özetle, useEffect() hook'u kullanarak bir özelleştirilmiş hook oluşturarak, birçok işlemi daha kolay hale getirebilirsiniz. Bu, React uygulamalarının daha performanslı, ölçeklenebilir ve sürdürülebilir olmasını sağlayacaktır.