O zaman ekran genişliğini kontrol edip öyle çalıştırın.
<script id="willRemove">
(function () {
var options = {
call: "0 000 000 00 00", // Call phone number
whatsapp: "0 000 000 00 00", // WhatsApp number
call_to_action: "Nasıl yardımcı olabilirim?", // Call to action
button_color: "#FF6550", // Color of button
position: "left", // Position may be 'right' or 'left'
order: "call,whatsapp", // Order of buttons
};
var proto = 'https:', host = "getbutton.io", url = proto + '//static.' + host;
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
// Ekran genişliği 600px veya altındaysa silinsin...
if(window.innerWidth <= 600) {
setTimeout(function(){
// Bu #willRemove id'li script tag'ı kendini 10 milisaniye sonra imha edecek...
document.getElementById('willRemove').remove();
},10);
}
</script>
Kodun çalıştıktan sonra kendini remove etmesini sağlayabilirsiniz.
Bunun için bu kodları bir script tag'ına alın ve bu tag'a bir id verin.
Sonra setTimeout() fonksiyonuyla kodun çalışmasına yetecek kadar kısa bir an izin verin ve bu tag'ı komple silin.
<script id="willRemove">
(function () {
var options = {
call: "0 000 000 00 00", // Call phone number
whatsapp: "0 000 000 00 00", // WhatsApp number
call_to_action: "Nasıl yardımcı olabilirim?", // Call to action
button_color: "#FF6550", // Color of button
position: "left", // Position may be 'right' or 'left'
order: "call,whatsapp", // Order of buttons
};
var proto = 'https:', host = "getbutton.io", url = proto + '//static.' + host;
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
setTimeout(function(){
// Bu #willRemove id'li script tag'ı kendini 10 milisaniye sonra imha edecek...
document.getElementById('willRemove').remove();
},10);
</script>
stackoverflow'da sizinkine benzer bir soru sorulmuş. Kendimce biraz yorum ekleyerek paylaşıyorum:
Array.forEach döngüsünü break çağırır gibi nasıl sonlandırabilirim?
[1,2,3].forEach(function(el) {
if(el === 1) break;
});
Bunu forEach fonksiyonunda nasıl yapabilirim? Ben return;, return:false; ve break denedim... Ama break patlıyor ve return de döngüyü sonlandırmıyor.
Doğru Cevap:
forEach içinde break ile döngüyü sonlandırma özelliği yok. Eğer for kullanamıyorsanız, ille de forEach kullanacaksanız try-catch içinde bir exception fırlatabilirsiniz.
var breakData = {};
try {
[1, 2, 3].forEach(function(el) {
if (el === 2) {
breakData.data = el; // bulduğumuz veriyi breakData objesine aktaralım.
throw breakData; // Objeyi exception (istisna) olarak fırlatalım.
}
});
}
catch (e) {
// Buraya gelindiyse ya throw breakData komutu çalışmıştır ya da başka bir hata oluşmuştur.
// Eğer oluşan exception'da data değeri yoksa bizim oluşturduğumuz hata dışında bir hata oluşmuşsa bunu da görelim.
if(!e.data) console.error(e);
}
// Döngü sonucu oluşan verimiz breakData objesindeki data key'inde.
console.log(breakData.data);
NOT: Kodlarda yaptığım değişikliği test etmedim. Sorun yaşarsanız direkt stackoverflow'daki örneği inceleyebilirsiniz.
Kaynak: https://stackoverflow.com/questions/2641347/short-circuit-array-foreach-like-calling-break
Sizin sorunuza gelecek olursak kodunuzu şu şekilde düzenleyebilirsiniz:
async function getData(data) {
try {
data.forEach(async proxy => {
const content = await arrow(proxy);
if(content.includes("Your file is ready")) {
throw { success: content };
}
});
}
catch(e) {
if(!e.success) {
console.error("Hata oluştu", e);
return false;
}
return e.success;
}
return undefined;
}
Ama bence forEach yerine doğrudan for kullanın.
Böylece throw veya break kullanmak zorunda kalmazsınız.
async function getData(data) {
for(let i = 0; i < data.length; i++) {
const proxy = data[i];
const content = await arrow(proxy);
if(content.includes("Your file is ready")) return content;
}
return null;
}
Veya döngü yerine Array.find kullanın. find, bulduğu ilk elemanı döndürür. Bulamazsa undefined döner.
find içinde hiç async fonksiyon kullanmamıştım ama denemek lazım...
async function getData(data) {
return data.find(
async (proxy) => (await arrow(proxy)).includes("Your file is ready")
);
}
JQuery ile <link> elementinin href attribute'sini değiştirebileceğiniz bir örnek yapalım.
href değerini değiştirmek isteyeceğiniz elemente "data-style-mode" diye bir attribute verelim ki seçebilelim.
<link rel="stylesheet" href="assets/styles/light.css" data-style-mode="light" />
// Elementi jquery ile seçelim.
const $styleElement = $('[data-style-mode]');
// Mod değiştiren fonksiyon
function setStyleMode(type='light') {
if(type=='dark') $styleElement.attr('href', 'assets/styles/dark.css').attr('data-style-mode', 'dark');
else if(type=='light') $styleElement.attr('href', 'assets/styles/light.css').attr('data-style-mode', 'light');
}
// Modu toggle eden fonksiyon
function toggleStyleMode() {
const currentMode = $styleElement.attr('data-style-mode');
setStyleMode(currentMode=='light' ? 'dark' : 'light');
}
Sayfanın modunu anlık olarak güncelleyecektir. Ama sayfa yenilendiğinde veya başka bir sayfaya geçildiğinde bu ayar iptal olmuş olacak.
Kalıcılığı sağlamak için mevcut modu cookie'lere yazabilir ve sunucu taraflı bir kontrolle ilk yüklenen stil dosyasını cookie'deki stil dosyasıyla değiştirebilirsiniz.
JQuery kullanıyorsanız kolay cookie yönetimi için https://github.com/js-cookie/js-cookie projesinden faydalanabilirsiniz.
CDN için: https://cdnjs.com/libraries/js-cookie
Yok ben sunucu tarafına bu işi taşımak istemiyorum, front-end'de halledelim derseniz de localStorage'dan yardım alabilirsiniz.
<head>
<!-- head tag'ı içerikleri -->
<link rel="stylesheet" href="assets/styles/light.css" data-style-mode="light" />
<script>
const $styleElement = $('[data-style-mode]');
if(localStorage.getItem('style-mode')) {
const mode = localStorage.getItem('style-mode');
if(mode=='dark') {
$styleElement.attr('data-style-mode', 'dark').attr('href', 'assets/styles/dark.css');
}
}
</script>
</head>
<body>
<!-- body tag'ı içerikleri -->
<script>
// Mod değiştiren fonksiyon
function setStyleMode(type='light') {
if(type=='dark') $styleElement.attr('href', 'assets/styles/dark.css').attr('data-style-mode', 'dark');
else if(type=='light') $styleElement.attr('href', 'assets/styles/light.css').attr('data-style-mode', 'light');
localStorage.setItem('style-mode', type);
}
// Modu toggle eden fonksiyon
function toggleStyleMode() {
const currentMode = $styleElement.attr('data-style-mode');
const targetMode = currentMode=='light' ? 'dark' : 'light';
setStyleMode(targetMode);
return targetMode;
}
</script>
</body>
@sarjaleti'nin verdiği cevaba biraz javascript eklemenizde mahzur yoksa alternatif olarak şu da mümkün:
- Tüm sayfayı kapsayıcı içine alın. Sonra bu kapsayıcıyı dil sayısı kadar çoğaltın. Her kapsayıcıya da attribute olarak dili yazın.
- Javascript ile body'ye aktif dili attribute olarak ekletin.
- CSS ile body attribute'sine göre hangi dilin görüneceğini belirtin.
<head>
<style>
body > .page-content { display:none; }
body[data-lang="tr"] > .page-content[data-lang="tr] { display:block; }
body[data-lang="en"] > .page-content[data-lang="en] { display:block; }
body[data-lang="es"] > .page-content[data-lang="es] { display:block; }
</style>
<script>
// Dil değiştiren fonksiyon
function changeLanguage(langCode="tr") {
document.body.setAttribute("data-lang", langCode);
}
// Sayfa açılışında aktif olacak dili belirleyelim.
// body elementi onload olduğunda bu veri kullanılarak changeLanguage() fonksiyonu çağırılacak.
const startLanguage = "tr";
</script>
</head>
<body onload="changeLanguage(startLanguage);">
<div class="language-selector">
<button onclick="changeLanguage("tr");">TR</button>
<button onclick="changeLanguage("en");">EN</button>
<button onclick="changeLanguage("es");">ES</button>
</div>
<section class="page-container" data-lang="tr">
Tüm sayfanın Türkçe içerikli HTML kodu burada barınacak.
</section>
<section class="page-container" data-lang="en">
Tüm sayfanın İngilizce içerikli HTML kodu burada barınacak.
</section>
<section class="page-container" data-lang="es">
Tüm sayfanın İspanyolca içerikli HTML kodu burada barınacak.
</section>
</body>
Bu kurguyu sitenizdeki tüm sayfalara uygulamalısınız. Ama bazı sorunlarla karşılaşmış olacaksınız.
- Başka bir sayfaya geçtiğinizde seçtiğiniz dil kaybolacak ve ana dile ("tr") dönmüş olacaksınız.
- Siteyi kapatıp tekrar açtığınızda seçtiğiniz dil kaybolacak ve yeniden dil seçmek zorunda kalacaksınız.
Bu durumda seçilen dili tarayıcıya kaydetmek ve sayfa açıldığında kayıtlı bir dil olup olmadığını kontrol edip direkt o dili aktif etmek gerekir.
Yukarıda head tag'ında bulunan script tag'ını şu şekilde değiştirebiliriz:
// Dil değiştiren fonksiyon
function changeLanguage(langCode="tr") {
document.body.setAttribute("data-lang", langCode);
// seçilen dili local storage'a kaydedelim:
localStorage.setItem("selected-language", langCode);
}
// Daha önce local storage'a yazılmış dil verisini alalım.
const storagedLanguage = localStorage.getItem("selected-languge");
// Local storage'dan dil verisi alabildiysek bunu kullanalım. Bulamadıysak varsayılan dilimizi kullanalım.
const startLanguage = storagedLanguage ? storagedLanguage : "tr";
2 yolla yapabilirsiniz:
1) Veriyi GET Parametresi Olarak Yollamak
Ufak bir bilgi aktarmak istiyorsanız (silindi, güncellendi gibi) a.php'deki link'inizde url parametresine bu veriyi ekleyebilir, b.php'de de yine javascript ile url'i okuyarak parametreleri alabilirsiniz.
Örn:
a.php
<a href="b.php?isim=İlker&sehir=Mersin">İsim ve Şehir verilerini gönder...</a>
b.php
// url'den gelen b.php?isim=İlker&sehir=Mersin verisini parçalayacağız...
// Url'deki parametreler kısmını alalım.
let urlParameters = window.location.search;
// Çıktı: "?isim=İlker&sehir=Mersin"
// Aldığımız veride "?" karakteri varsa bundan sonrasını alalım. Yoksa bi'şey alamayız...
urlParameters = urlParameters.includes('?') ? urlParameters.split('?')[1] : "";
// Çıktı: "isim=İlker&sehir=Mersin"
// Parametreleri birbirinden ayırarak bir array elde edelim:
urlParameters = urlParameters.split("&");
// Çıktı: ["isim=İlker", "sehir=Mersin"]
// Bir js objesinde değerleri key-value şeklinde oluşturalım.
const urlParametersObj = {};
urlParameters.map(x=>{
const splitted = x.split("="); // "isim=İlker" -> ["isim", "İlker"]
const key = splitted[0]; // key = "isim"
const value = splitted.length ? splitted[1] : null; // value = "İlker"
if(Array.isArray(urlParametersObs[key]) urlParametersObj[key].push(value);
else urlParametersObj[key] = [value];
});
// Çıktı: urlParametersObj = { "isim": ["İlker"], "sehir": ["Mersin"] }
b.php'deki tüm bu işlemleri bir fonksiyon haline getirirseniz hem bu projenizde hem başka projelerinizde tekrar tekrar kullanabilirsiniz:
const getUrlParameters = function() {
let urlParameters = window.location.search;
urlParameters = urlParameters.includes('?') ? urlParameters.split('?')[1] : "";
urlParameters = urlParameters.split("&");
const urlParametersObj = {};
urlParameters.map(x=>{
const splitted = x.split("=");
if(Array.isArray(urlParametersObs[splitted[0]]) urlParametersObj[splitted[0]].push(splitted.length ? splitted[1] : null);
else urlParametersObj[splitted[0]] = [splitted.length ? splitted[1] : null];
});
return urlParametersObj;
}
// Kullanırken:
var urlParameters = getUrlParameters();
console.log(urlParameters); // Çıktı: { "isim": ["İlker"], "sehir": ["Mersin"] }
console.log("isim: ", urlParameters.isim[0]); // Çıktı: "İlker"
console.log(Object.keys(urlParameters)); // Çıktı: ["isim", "sehir"]
console.log(Object.values(urlParameters)); // Çıktı: [["İlker"], ["Mersin"]]
console.log(Object.entries(urlParameters)); // Çıktı: [["isim", ["İlker"]], ["sehir", ["Mersin"]]]
Burada value değerlerini dizi olarak almamızın nedeni, aynı key'den birkaç tane gelme ihtimalidir.
Örneğin şu parametreler için: ?isim=İlker&isim=Tayfun&meslek=Yazılım 2 tane isim parametresi var.
Şu sonuç üretilecek: { "isim": ["İlker", "Tayfun"], "meslek": ["Yazılım"] }
2) SessionStorage Kullanmak
Veriyi tarayıcının session storage alanına yazarsınız.
- Veri, post metodunda olduğu gibi, URL'de görünmez.
- Veriyi sadece sonraki sayfada değil, bundan sonra kullanıcının gezdiği her sayfada kullanabilirsiniz. Kullanıcı siteyi kapatana kadar bu veri erişiminize açık olur. Yani veri kullanıcının tarayıcısına kaydedilir.
- GET parametresiyle gönderimdeki gibi belli bir formata uymanız gerekmez. İstediğiniz formattaki bir veriyi (html, json, düz yazı...) string haline getirip tutabilirsiniz.
- Veriyi sadece sonraki sayfada değil, o an bulunduğunuz sayfada da kontrol edebilirsiniz.
Veriyi session storage'a yazmak için ona bir key belirlersiniz. Veriyi string olarak session storage'a yazarsınız.
Veriyi okumak için de session storage'daki key'i kullanırsınız. Eğer json gibi bir veri tuttuysanız veriyi string'ten tekrar json'a çevirmelisiniz.
Örnek:
a.php
<textarea id="gonderilecek-veri" placeholder="Tarayıcıya kaydedilecek veriyi yazın"></textarea>
<button id="gonderici-buton">Verileri tarayıcıya kaydet ve beni b.php'ye yönlendir...</button>
<script>
const $textareaElement = document.getElementById("gonderilecek-veri");
// Butona tıklandığında...
document.getElementById("gonderici-buton").addEventListener("click", function(){
// textarea'daki string'i al.
const data = $textareaElement.value;
// session storage'a "verilerim" key'iyle yaz.
sessionStorage.setItem("verilerim", data);
});
</script>
Diğer sayfalardan veriyi okumak için:
b.php
<div id="kayitli-veriler"></div>
<script>
const $yazilacakElement = document.getElementById("kayitli-veriler");
// session storage'da "verilerim" key'iyle bir kayıt var mı diye kontrol et.
const data = sessionStorage.getItem("verilerim"); // Eğer yoksa null döner.
// Eğer session storage'da "verilerim" key'iyle kayıt bulabilmişsek div'e yazdıralım.
if(!data) $yazilacakElement.value = "Henüz veri kaydedilmemiş!";
else $yazilacakElement.value = data;
</script>
Session storage'a sizin siteniz tarafından yazılmış veriler yalnızca sizin siteniz üzerinden okunabilir.
Yani "Ben session storage'a veri yazarsam başka bir site benim bu verilerimi okuyabilir mi?" diye endişelenmenize gerek yok.
Session storage, kullanıcı sitenizden çıktığı zaman sonlanır. Yani veri günlerce tarayıcıda saklanmaz.
Yine de bu alan kullanıcının bulup düzenleyebileceği bir alandır.
"Sayfayı İncele" > "Application" > "Session Storage" yolunu izleyerek kullanıcı bu veriyi görebilir, değiştirebilir, silebilir.
Yani şifre gibi hassas veriler burada saklanmamalıdır.
Session Storage her zaman string veri tutar. (Belki sayı da tutuyordur.)
Ama siz json veri tutmak istiyorsanız onu da string'e çevirmelisiniz.
Diyelim ki aaa adında bir js objeniz var ve bunu session storage'da saklamak istiyorsunuz:
sessionStorage.setItem("istediğim_bir_key", JSON.stringify(aaa));
Bu veriyi tekrar js objesi halinde almak için ise:
const verim = JSON.parse(sessionStorage.getItem("istediğim_bir_key"));
Veriyi storage'dan silmek istersek:
sessionStorage.removeItem("istediğim_bir_key");
Session storage'da html veri de tutabilirsiniz. Yani js ile bir html kodunu okuyup string olarak session storage'a yazarsınız.
Başka bir sayfada da bu kodu js ile ekrana basarsınız. Bir html kod bloğunu olduğu gibi başka bir sayfaya taşımış olursunuz.
NOT: Tarayıcıdan tarayıcıya farklılık gösterebilir ama Chrome için session storage'da tutabileceğiniz maksimum veri 5 mb'tır.
Eğer kullanıcının tarayıcısında session storage'da tutmaya çalıştığınız toplam veri 5mb'tan fazlaysa kullanıcı hata alır.
Merhaba. Evet, biraz sıkıntılı bir iş otomatik yükseklik vermek. Yani ufak bir takla atmak gerekiyor.
Şöyle bir kurgu önerebilirim:
- Metin sayfaya yüklendiğinde container metin yüksekliğindedir. O anda yüksekliği js yardımıyla alıp container'a attribute olarak kaydedin.
- Container'a basıldığında yüksekliği 10vh, tekrar basıldığında da attribute değerini alsın.
- Bu işlemleri yapan bir fonksiyon oluşturalım ki başka elementlerde veya projelerde de kullanabilelim...
<div class="container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae amet, nostrum eligendi aliquid deleniti, et nisi ipsa nesciunt illum quidem maiores temporibus. Laboriosam recusandae quasi enim error non sequi quam.<br>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium nihil facilis consectetur vitae temporibus quis quibusdam iure qui tempore mollitia, cum voluptas reiciendis minus rem similique architecto dolores totam laborum!<br>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit ducimus cum repellat eum. Dolorem nobis, molestiae, natus cumque velit temporibus laudantium aliquam facere cum animi nesciunt sed soluta iusto. Nam.
</div>
.container {
width:300px;
overflow-y:hidden;
border:1px solid #ccc;
padding:10px;
transition:height .5s ease 0s;
}
CSS kısmında dikkat: Elemente height değerini burada vermemeniz gerekiyor.
Çünkü javascript, elementin açıkkenki durumda yüksekliğini görebilmeli.
Elemente yükseklik değerini javascript'le vermeniz gerekiyor. Aşağıda örneği var.
function example(selector, closedHeight, openedHeight="auto", startStatus=false) {
// Elementi seçip değişkene alalım.
const $this = $(selector);
// Elementin açık ve kapalı hallerinin alacağı yükseklikleri attribute olarak kaydedelim.
$this.attr('data-orj-height', openedHeight=="auto" ? $this.outerHeight() : openedHeight);
$this.attr('data-closed-height', closedHeight);
// Container'a tıklandığında açıksa kapalı kapalıysa açık yapacak olay dinleyici:
$this.on("click",function(){
// Elementte data-opened="false" diye bir attibute varsa element kapalı haldedir. Açılsın...
if($this.attr('data-opened')=="false") {
$this.attr('data-opened',"true");
$this.height($this.attr('data-orj-height'));
}
// Elementte data-opened="true" diye bir attibute varsa element açık haldedir. Kapatılsın...
else {
$this.attr('data-opened',"false");
$this.height($this.attr('data-closed-height'));
}
});
// Başlangıç durumu olarak kapalı olacaksa elementi kapalı hale getirelim.
if(!startStatus) {
$this.height(closedHeight);
$this.attr('data-opened',"false");
}
}
// Parametreler:
// 1) Seçici,
// 2) Element açık olduğunda alacağı yükseklik,
// 3) Element kapalı olduğunda alacağı yükseklik (Varsayılan:"auto")
// 4) Element başlangıçta açık olacaksa true, kapalı olacaksa false. (Varsayılan:false)
example(".container", "auto", "10vh", false);
Bu örneğin çalışan halini codepen'de oluşturdum:
https://codepen.io/ebykdrms/pen/yLKZvqX
Tabi burada container'a tıklanınca açık/kapalı toggle yapıyor ama siz bunu yapmasını istemiyor olabilirsiniz. Yani container'a değil de container'ın içindeki bir butona basınca açılıp kapanmasını istiyor da olabilirsiniz.
O zaman sadece $this.on("click",function() { yazan satırı düzenlemeniz yeterli olur.
Örn: $this.find(".close-button").on("click", function(){ gibi...
@resat, nasıl bir sorunla karşılaştın? Mesela options değişkenini console.log(options) diyerek yazdığıp içinin nasıl dolduğuna bakabiliriz.
JS dosyasında PHP komutu çalıştıramazsınız.
Ama PHP ile oluşturduğunuz içeriği php uzantılı dosyanızda bir js değişkenine atadıktan sonra js uzantılı dosyanızdan çağırabilirsiniz.
Örnek:
index.php
<script>
let options = "<option></option>";
<?php foreach ($urunsor as $cek): ?>
options += '<option value="<?=$cek['urun_id']?>"><?=$cek['urun_ad']?> - <?=$cek['urun_renk']?></option>';
<?php endforeach ?>
</script>
<script src="js-dosyaniz.js"></script>
js-dosyaniz.js
$(function(){
$('#ekle').click(function(){
$('#veriler').append($('\
<div id="icerik" class="row">\
<div class="col-md-4">\
<select name="stok_urun" id="stok_urun" class="form-select" data-search="on" required>'+options+'</select>\
</div>\
<div class="col-md-3">\
<input type="text" class="form-control mb-1" name="telefon[]" placeholder="Telefon Numaranız">\
</div>\
<div class="col-md-3">\
<input type="text" class="form-control mb-1" name="miktar[]" placeholder="Telefon Numaranız">\
</div>\
<div class="col-md-2"><button id="cikar" class="btn btn-light w-100">Çıkar</button></div>\
</div>\
'));
});
$('body').on('click', '#cikar', function(e){
$(this).parents('#icerik').remove();
e.preventDefault();
});
});
Evet, component unmount olduğunda çalışır. Aşağıda kaynağını verdiğim sitede olay şu şekilde açıklanmış:
React useEffect cleanup: Nasıl ve ne zaman kullanılır?
useEffect(()=>{
// effect
return () => {
// cleanup
}
},[input]);
Hiç şu hatayla karşılaştınız mı?
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
Mesaj, bir component unmount olup kullanılmaz hale geldikten sonra component'te bişeyler değiştirmeye çalıştığımızı söylüyor.
Bunun birçok nedeni olabilir. Ama en yaygın olarak ya bir websocket bağlantısını sonlandırmadan veya asenkron bir fonksiyon henüz sonuç dönmeden önce component'iniz unmount olmuştur.
Peki bunu nasıl çözeriz?
useEffect hook'undaki cleanup fonksiyonu
useEffect fonksiyonunda bir fonksiyon return edersek bileşenden ayrıldığımızda bu fonksiyon çalışır. Bu çok kullanışlıdır çünkü gereksiz işlemlerin yapılması veya bellek sızıntılarını önlenmesi için kullanılabilir.
websocket bağlantısının aboneliğinin iptal edildiği bir örnek:
useEffect(() => {
API.subscribe()
return function cleanup() {
API.unsubscribe()
}
});
Unmount olmuş bir bileşenin state'ini set etmeyin
Yaygın bir kullanım senaryosunda; asenkron bir fonksiyondan sonuç döndüğünde state güncellenir. Peki asenkron fonkisyon sonuç dönmeden önce component unmount olursa? Biz bu durumu kontrol etmezsek react, component unmount olsa bile state'i güncellemeye çalışır.
Aşağıdaki örnekte bir fetch isteğinden yanıt döndüğünde loading state'ini güncelliyorum.
useEffect(() => {
fetchAPI.then(() => {
setLoading(false)
})
}, [])
Ama fetchAPI'nin then fonksiyonu henüz çalışmadan önce bileşen unmount olabilir ve react yine de loading state'imi güncellemeye çalışır. Bu durumda uygulama patlamasa bile react bize uyarı verir.
Basit bir kontrolle bu sorunun önüne geçebiliriz.
useEffect(() => {
let mounted = true
fetchAPI.then(() => {
if (mounted) {
setloading(false)
}
})
return function cleanup() { mounted = false }
}, []);
Ekstra: Axios isteğini iptal edin
Axios, bir istek tamamlanmadan önce iptal etme seçeneğine sahiptir. Bu özellik bellek sızıntısının önüne geçmek için cleanup fonksiyonunda kullanışlıdır.
useEffect(() => {
const source = axios.CancelToken.source()
const fetchUsers = async () => {
try {
await Axios.get('/users', {
cancelToken: source.token,
})
// ...
} catch (error) {
if (Axios.isCancel(error)) {
console.log('Request iptal edildi.', error.message);
}
else { throw error }
}
}
fetchUsers()
return () => {
source.cancel()
}
}, [])
Kaynak: https://dev.to/otamnitram/react-useeffect-cleanup-how-and-when-to-use-it-2hbm