en pratik yolu;

const params = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
});

console.log( params?.isim )
console.log( params?.soyisim )

?. - optional chaining - yoksa hata vermemesi için kullanabilirsin.

erişilebilirlik adı altında kullanılan niteliklerden bir tanesi, daha çok ekran okuyucular için ilgili elemanın yaptığı işi belirtmek için kullanılıyor, görme engelli arkadaşların kullandığı ekran okuyucu programlar bunları algılayıp ona göre mesela tıklanan bir buton olduğunu, bir link bağlantısı olduğunu vs. anlayabiliyor.

erişilebilirlik konusuyla ilgili bir ders hazırlama niyetindeyim, daha detaylasını orada anlatırım ama şimdilik bu kadar bilgi yeterli olacaktır sanırım.

fetch apisi de aslında promise dönüyor, yani muhtemelen fetch'i direk return etsekte aynı işi yapardı ancak ben kontrolü sevdiğim için resolve ve reject durumlarını bazı koşullara göre yönetmek ve bunu her servis istediğinde ayrıca yapmak istemediğim için tek fonksiyon içinde bu tarz bir yaklaşıma gittim, diğer türlü fetch'i direk return etsek her bir servis isteğinde then bloğu koyup res.json() dedikten sonra aynı kontrolleri vs. yapmak gerekecektir. toastr vs. daha global yönetmek adına böyle bir yaklaşıma gittim.

performansı artırmak için sayfada göründüğü anda componentleri yükletebilirsiniz, observer api ile, bizim kanalda da bir örneği var, bunu react'e uyarlamakta çok zor değil hazır paketleride var, ayırmaktan bir zarar gelmez ama sayfada görünmeyeni atmanında çok bir esprisi yok

mantık şöyle olmalı, bakiyeyi tuttuğun bir değerin olduğunu düşünüyorum. örneğin şöyle bir şeyde tutulsun şimdilik;

const balance = 6000

loop'da index değerini de dahil edip eğer index değeri 0 değilse bir önceki elemanı index - 1 ile seçip onun değerini balance'dan çıkarmak olacak. yani;

<table className="table text-wrap">
  <thead>
    <tr>
      <th>Tarih</th>
      <th>Tip</th>
      <th>Firma</th>
      <th>Açıklama</th>
      <th>Tutar</th>
      <th>Bakiye</th>
    </tr>
  </thead>
  <tbody>
    {transactions.map((item, key) => {
      return (
        <tr key={item.id}>
          <td>{item.document_date}</td>
          <td>{item.document_type}</td>
          <td>{item.interlocutors_label}</td>
          <td>{item.description}</td>
          <td>
            {readableMoneyFormat(item.document_total)} {props.detail.currency}
          </td>
          <td>
              {readableMoneyFormat(key !== 0 ? balance - transactions[key - 1].document_total : balance)}
          </td>
        </tr>
      );
    })}
  </tbody>
</table>;

çalışan bir örnek: https://codesandbox.io/s/icy-tdd-l1mpdj?file=/src/App.js