Next.js Macerası #21 | useDebounce Hook Kodluyoruz | #react #nextjs #web #project #api #hook

Hepinize merhaba dostlarım :) Ben Muhammed Fatih Her geçen gün biraz daha derine indiğimiz "Next.js Macerası" konumuzda yeni bir bölümle daha sizlerle beraberim. Özellikle de önceki derslere nazaran biraz uygulama ve #hook yapısı oluşturma olayına da az biraz değinmek istedim diyebilirim. Hazırsanız her zamanki gibi #nextjs teknolojisinden ve kış günlerinin vazgeçilmezi olan vitaminlerden bolca miktarda dozumuzu alalım ve kodlamaya kaldığımız yerden devam edelim :) Bu bölümde sizlerle beraber "Next.js" uygulamamız içerisinde "useDebounce" hook yapısını oluşturma ve kullanma işlemlerine değiniyoruz. Eğer ki #reactjs veya #reactnative tarafında projeler yapmışsanız bu şekilde bir hook yapısının olmadığını rahat bir şekilde söyleyebilirsiniz. Bunu genelde biz deliştiriciler oluşturuyoruz :) Bu yapıya genel olarak bakacak olursak bizim #restapi işlemlerimiz olabilir veya uygulamamız içerisindeki #static verilerimiz olabilir. Herhangi bir filtreleme vs olaylarında her bir tuş vuruşumuzda bu arama işleminin çalışmasını istemeyebiliriz. Özellikle de backend ile haberleşen bir uygulama yazdığımızda sunucuyu yorma durumlarımız çok rahat bir şekilde olabilir :) İşte bunun için bizim "useDebounce" adında bir hook yapısı yazmamız ve onu kullanmamız lazımdır dostlarım. Özellikle belirli bir veri girişinden kısa bir süre sonrasında (500 - 1000ms gibi) çalışması ve sonuçların getirilmesi hem uygulamamızı yormayacak, hem de kullanıcı tarafından bakılacak olursa daha güzel bir deneyim ortaya çıkacaktır :) Bölüm içerisinde yaptıklarımıza genel olarak bakacak olursak: -- "useDebounce" konusuna giriş yapıldı -- Mevcut hook yapısının olup olmadığına değinildi -- Kendi hook yapımızı nasıl yazacağımızdan bahsedildi ve "useDebounce" hook yapısı kodlandı -- Oluşturduğumuz hook yapısı çalıştırıldı ve örnek uygulama yapıldı -- Örnek kullanım alanlarına değinildi şeklinde özetleyebiliriz. İlk başlarda karmaşık veya zor gelebilir dostlarım anlıyorum. Öğrenme süreci içerisinde bu durumlar son derece doğaldır diyebilirim. İşte bu aşamada sizlerden istediğim tek şey her videomun sonunda dediğim gibi "İstikrarlı ve azimli olmalısınız, bolca pratik yapmalısınız" şeklinde olacaktır. Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır :) Şimdiden hepinize iyi çalışmalar iyi seyirler dilerim dostlarım :). Videoyu beğenmeyi, kanalıma abone olmayı ve bildirimleri açmayı, takıldığınız yerlerde yorum yapmayı unutmayın. Ayrıca yakın zamanda "Shopier" üzerinden açtığım mağazamı da ziyaret edebilir, açık kaynak şeklinde satışa koyduğum yazılımlarımdan faydalanabilirsiniz Projemizin Kodları: https://github.com/turan1302/nextjs-macerasi React + Laravel Eğitimleri için: WebRTC Projesi: https://tls.tc/04JnR Alışveriş Sepeti Projesi: https://tls.tc/rzCkV Chat Sistemi Projesi: https://tls.tc/7ePsd Radyo Çalar Projesi: https://tls.tc/5HITg Fast Typing Projesi: https://tls.tc/ZJkfy Barkod Okuyucu Projesi: https://tls.tc/z07Ap React Native Eğitimi için: https://tls.tc/e5mIM Next.js Eğitimi İçin: https://tls.tc/RMdP3 - Sitelerim - MFSoftware Blog: https://mfsoftware.net/ Seyyar Yazılımcı (Yazılımcı Tartışma Platformu): https://seyyaryazilimci.com/ Shopier Hesabım: https://www.shopier.com/mfsoftware42 - Sosyal Medya Hesaplarım - Linkedin: https://www.linkedin.com/in/mfsoftware/ Instagram: https://www.instagram.com/mfsoftware.net.tr/ - Next.js uygulama geliştirme - useDebounce hook kullanımı - React useDebounce örneği - Next.js performans iyileştirme - useDebounce hook nedir - Next.js ile debouncing - React hooks tutorial - useDebounce hook coding - Next.js tutorial for beginners - React debouncing technique - React development tips - Next.js beginner guide - useDebounce nasıl kullanılır - Debouncing tekniği nedir - Next.js özellikleri ve kullanımı - React ile veri debouncing - Next.js uygulama geliştirme rehberi - React kullanarak performans artırma - Managing input with useDebounce - Next.js project development - React usage and coding - Next.js for modern web apps - React hooks for debouncing - Next.js and React hooks - useDebounce örneği Next.js - Next.js ile hızlı uygulamalar - React optimizasyon ipuçları - useDebounce nedir ve nasıl kullanılır - React için debouncing açıklaması - Next.js uygulaması kurma