ne yapacaksın tam olarak? state'in güncel değeriyle başka bir değer hesaplayacaksan useMemo() kullanabilirsin.

const calculatedValue = useMemo(() => {
    return stateDegiskeni * 2
}, [stateDegiskeni])

gibi.

yatay olarak ortalamak istersen, kapsayıcının belli bir genişliği olmalı. Diyelim ki var, o zaman şu değerleri verirsen

button {
    left: 50%;
    transform: translateX(-50%);
}

butonun içindeki genişliği bilmene gerek kalmaz dinamik olarak yatayda ortalayabilirsin. Dikeyde de ortalamak istersen

button {
    top: 50%;
    transform: translateY(-50%);
}

her iki eksen için istersen

button {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

örnek bir kullanım

<div>
  <button>test</button>
</div>
<style>
div {
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;
  position: relative;
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
</style>

burada önemli olan dediğim gibi buton position uygulanınca kapsayıcıda belli bir yükseklik ve genişlik yoksa sorun yaratır min. bir değer vermen gerekir ki ona göre ortalama işlemi yapabil.

aslında bu normal bir davranış, overflow: hidden ya da auto dendiğinde otomatik olarak gizleniyor içindeki elemanlar.
bu gibi durumlar için tooltip bunun içinde değilde bağımsız olarak body'nin içinde yer alan bir alanda olmalı.
fare ile ilgili elemana gelince farenin konumu (top, left) alınıp body'deki tooltip'e anlık olarak atanmalı.
ayrıca yine fare üstündeyken global bir değişkene tooltip'te görünecek değerler belirlenmeli, fare odağını çekince bu işlemleri sıfırlamalısın.
kodlar temiz olsa bir örnek verecektim ama belki bu teorik detay bir şeyleri farklı düşünmeni sağlayabilir.

ben şu şekilde kullanıyorum. genel kullandığmı componentler için

./src/components
./src/components/shared

servisler, store ve utils için

./src/services
./src/stores
./src/utils

sayfalar içinde genel view klasörünü kullanıyorum. Ama her sayfa için bir index.js oluşturuyorum çağırması daha kolay olsun diye. Ayrıca sayfaya özel componentler varsa yine ilgili klasörde belirtiyorum.

./views
./views/home
    ./views/home/index.js
    ./views/home/components

bu tamamen kişisel tercih, ben bu şekilde kullanıyorum ama seninki de fena değil, farklı bir çok alternatifini de görebilirsin. Mümkün olduğunca requestleri tek bir yerden yönetirsin. Requestlerin tamamını service klasöründe mantıklı şekillerde export edip kullanırsın. Ayrıca store yönetimi için redux toolkit çok daha kolay bir düzen kurmanı sağlar.