React Hooks Nedir? React Hooks ile Todo Uygulaması

Merhabalar,

Bu yazımda React 16.8 ile gelen bir özellikten Hookslardan bahsetmek istiyorum.

React Hooks

State yapısı başta olmak üzere diğer React özelliklerini de, fonksiyonel bileşenler ile beraber kullanmamızı sağlarlar. Yani sınıf olarak oluşturduğumuz bileşenlerde kullandığımız componentDidMount(), componentDidUpdate() gibi yaşam döngüsü metotlarını(life-cycles) sınıf oluşturmadan kullanmamızı sağlarlar.

Hook yapısı olmadan önce, fonksiyonel bir component oluşturulduğunda ve bu component a bir state eklenmesi gerektiğinde veya life-cycle methodlarının kullanılması gerektiğinde bu component class component’a dönüştürülür ve state’i tanımlanırdı. React’ın Hook yapısı sayesinde artık bu tanımlamalar fonksiyonel componentlar ile tanımlanabiliyor.

Use State

Uygulamamıza state’lerin eklenmesi için bu hook kullanılır. Ve tanımlanan state’in başlangıç değerini, aldığı parametre ile belirler.

• Burada disabled adında bir local state tanımı yaptık ve useState Hook’u sayesinde başlangıç değeri olarak boş bir string ataması yapmış olduk. Ayrıca bu state’in değerinin, kullanıcıdan gelen aksiyonlar sonucu (form aracılığıyla bilgilerin iletilmesi, butona tıklanması gibi) değişebilmesi için setDisabled adında bir method tanımlamış olduk. Bu sayede setDisabled metoduna geçilen yeni değerler sayesinde, statelerimizi değiştirebiliriz. Kısacası burada, disabled = state ve setDisabled () = this.setState() olduğu söylenebilir.

• Aynı zamanda useState hook u sayesinde daha önceki state bilgilerine de ulaşılabilir. Bunun için uygulamadaki gibi setTodos hookuna parametreli bir fonksiyon atanması yeterlidir.

Not: Eğer birden fazla state kullanmak istiyorsak her bir state değişkeni için useState() tanımlanır. useState e geçilecek olan state başlangıç değeri bir nesne olabileceği gibi bir sayı, string veya dizi de olabilir.

Use Effect

Bu hook, class componentlarında kullandığımız componentDidMount(), componentDidUpdate() ve componentWillUnmount() yaşam döngüsü methodlarının bize sağladığı yapıyı fonksiyonel componentlarda da kullanmamızı sağlar.

useEffect as componentDidUpdate

Burada useEffect() hook’u herhangi ekstra bir parametre eklemediğimiz için yaşam döngüsü methodlarından componentDidUpdate() gibi davranır. Yani uygulama state’lerinde her değişiklik algıladığında çalışır. Aynı zamanda bu metodu şu şekilde de kullanabiliriz:

useEffect as componentDidUpdate

Burada useEffect hookuna geçirilen [count] state’i her değiştiğinde, tekrardan bu hook render edilir(componentDidUpdate()) ve bu sayede bu metot her count state’indeki değişiklikte çalışmış olur. Eğer burada [count] yerine [] olarak boş bir dizi parametresi atasaydık o zaman bu hook componentDidMount() metodunun yapmış olduğu işi yapacak ve sadece component ilk render edildiğinde render edilmiş olacaktı.

useEffect as componentDidMount

Use Reducer

useState methoduna alternatif olarak düşünülebilir. Eğer state management için Redux’ı kullandıysanız reducer yapısını biliyorsunuzdur. Bu hook tam olarak aynı işi yapar. Kullanıcının uygulama içinde gerçekleştirdiği actionlara göre güncel state değerlerini değiştirir.

const [state, dispatch] = useReducer(reducer, initialState={});

• Burada reducer parametresi state ve action parametrelerini alan bir fonksiyonu temsil eder. (Redux reducer da olduğu gibi) Ve güncel state’i dispatch metodu ile bize döner.
• Diğer parametre olan initialState parametresi ise statelerin başlangıç değerlerini temsil eder.

Not: Karmaşık state yapılarının ve componentlar arası bilgi aktarımının(propslar) fazla olduğu yerlerde useState yerine useReducer yapısı kullanılabilir.

• Use State hookunda olduğu gibi burada state parametresi, bizim reducer methodumuzda döndüğümüz state değerlerini alır. Dispatch parametresi ise kullanıcının site içinde yaptığı olay(event) sonucu bu metodu çağırarak güncel state i değiştirir. Dispatch metodu zorunlu olarak type parametresi alır. Bu sayede reducer methodunda, kullanıcının uygulama içinde yaptığı olaylara göre state değerini günceller. Daha fazla bilgi için, Redux Reducer’a bakabilirsiniz.

En temel olarak kullanılan Hooklar bu şekilde, diğer Hooklara buradan ulaşabilirsiniz.

React Hooks ile Todo Uygulaması

React App

Uygulamaya başlamadan önce isterseniz yukarıdaki linkten nasıl bir uygulama yapacağımıza bakabilirsiniz.(Bu uygulamada kullanıcı isterse yeni yapılacak görevleri ekleyebilir, isterse var olan görevlerin üstüne tıklayarak onları silme işlemini gerçekleştirebilir.)

npx create-react-app todo-app

komutunu kullanarak yeni bir React uygulaması oluşturalım. Daha sonra src klasörü altında sadece index.js ve App.js dosyalarını kullanacağımız için diğer kullanmadığımız dosyaları kaldıralım ve components adında bir alt klasör oluşturalım. Bu yeni oluşturduğumuz klasörün içine yeni görevler eklemek için AddTodo.js, var olan görevleri listelemek için TodoList.js ve Todo.js dosyalarını oluşturalım.

Proje dizinimizi oluşturduğumuza göre artık başlayabiliriz. Ilk olarak src klasörü altındaki App.js dosyasını düzenleyelim. Burada state yönetimini sağlamak için ve aynı zamanda kullanıcıdan gelen actionlar(butona tıklanması, form üzerinden bilgilerin iletilmesi vs) sonucunda mevcut state’i kolay bir şekilde güncellemek için useReducer() hookunu kullanacağız.

• Burada, ilk olarak mevcut iki görevimizi tutması için bir initState oluşturduk. Daha sonra kullanıcıdan gelen actionlara göre stateleri dönmesi için bir reducer methodu yazdık. (Ör: Eğer kullanıcı görev eklemek için içeriği yazar ve bunu iletirse buradaki ‘ADD_TODO’ durumu çalışacak ve mevcut olan görevlere yeni bir görev eklenip yeni state olarak kullanıcıya iletilecek.)

const [state, dispatch] = useReducer(todoReducer, initState);

• Yukarıdaki tanımlama ile artık başlangıç değeri olarak atadığımız değerler buradaki state değişkenine atanmış oluyor. Eğer bu state değerinin değişmesi gerekiyorsa dispatch metodunda belirtilen type değerine göre, gerekli olan kod bloğu çalışıyor ve ona göre state güncellenmiş oluyor.

addTodo-deleteTodo

• Eğer kullanıcı yeni görev eklerse addTodoItem() metodu çalışacak ve reducer a eklenecek olan görev(todo) reducer’a geçirilerek var olan görevlere yeni bir görev eklenmiş olacak.
• Eğer kullanıcı mevcut olan görevlerden birini silmek isterse deleteTodo() metodu çalışacak ve reducer’a geçilen id’ye sahip olan görev, statelerden çıkarılmış olacak.

Daha sonra TodoList.js dosyamızı şekillendirelim. Bu dosyada kullanıcı tarafından oluşturulmuş olan görevlerin listelenmesi işlemini yapalım.

• Burada App.js dosyasından aktarılan todos ve deleteTodo propsları bulunuyor. Todos, kullanıcı tarafından eklenen görevleri tutuyor. DeleteTodo ise kullanıcının görevlerden birinin üstüne tıklaması sonucunda o görevi silmesini sağlıyor.

• Burada Todo.js dosyası görev listemizdeki görevlerin her birini temsil eden componentdır.

• Burada kullanıcının her girdiği görevin içeriği ve idsi useState() hooku ile state olarak tutuluyor. Her yeni görev eklenmesi durumunda setId(id + 1) methodu yardımıyla id değeri bir arttırılıyor. Aynı şekilde her görev eklenmesi durumunda form alanının temizlenmesi için setTodoContent(“”) methodu kullanılıyor.

Buraya kadar olan bölümü eksiksiz bir şekilde yaptıysanız artık npm start veya yarn start yazarak uygulamayı çalıştırabilirsiniz.

Umarım faydalı olmuştur. Okuduğunuz için teşekkürler…

Yararlandığım Kaynaklar:

• https://reactjs.org/
• https://www.taniarascia.com/crud-app-in-react-with-hooks/