forwardRef: DOM Referanslarını Üst Bileşenlere Açma

Ref, yeniden oluşturmaları tetiklemeden oluşturmalar arasında varlığını sürdüren bir DOM düğümüne veya bileşen örneğine başvuru tutmanın bir yoludur. Bir ref'i ref özniteliğiyle bağlarsınız ve React, DOM'a işleme işlemini tamamladıktan sonra ref.current özelliğini doldurur.

Sorun şu ki bir div'e bağladığınız şekilde bir ref'i işlev bileşenine bağlayamazsınız. Ref'ler normal özellikler gibi alt bileşenlere aktarılmadığından, üst bileşenin alt bileşenin içinde bulunan DOM düğümüne ulaşabileceği varsayılan olarak bir yol yoktur.

React.forwardRef, bir bileşenin üst bileşeninden ref alıp bunu kendi öğelerinden birine aktarmasını sağlar. Bileşen işlevinizi sarar ve işlevin imzasını değiştirerek ref'in özelliklerle birlikte ikinci bir bağımsız değişken olarak gelmesini sağlar.

Bu, iç DOM düğümünü çağıran bileşene açığa çıkarmanın resmî yoludur; normalde dışarıya kapalı olan bir alt bileşeni, üst bileşenin öğesine doğrudan başvurabileceği bir bileşene dönüştürür.

Sarılan işlev iki parametre alır: (props, ref). Birincisi alışılmış özellik nesnesi, ikincisi ise aktarılan ref'tir. Ardından bu ref'i dışa açmak istediğiniz öğeye yayar veya bağlarsınız; örneğin iç giriş alanında ref={ref} kullanabilirsiniz.

Bu ikinci bağımsız değişkeni yalnızca forwardRef ile sarılmış bileşenlerin aldığını unutmayın. İkinci parametre olarak ref listeleyen düz bir işlev bileşeni yalnızca undefined alır.

Klasik örnek, içindeki giriş alanına üst bileşenin odaklanmasını istediğiniz yeniden kullanılabilir bir metin alanı bileşenidir. Alanı forwardRef ile sarıp aktarılan ref'i temel giriş öğesine bağladığınızda, üst bileşen doğrudan bu öğede odaklanma işlemini çağırabilir.

Bu yaklaşım, alan bileşenini yeniden kullanılabilir tutarken gerektiği yerde denetimli emirsel erişim sağlar; örneğin bir formun ilk alanına bileşen oluşturulduğunda odaklanmak için kullanılabilir.

Aktarılan ref'ler ölçüm yapılmasını da sağlar. Üst bileşen, forwardRef aracılığıyla aldığı alt bileşen öğesinde offsetWidth ve offsetHeight değerlerini okuyabilir veya getBoundingClientRect çağrısını yapabilir.

Bu özellik, üst bileşenin bir şeyi alt öğeye göre nasıl konumlandıracağına karar vermeden önce öğenin tam oluşturulmuş boyutunu veya konumunu bilmesi gereken araç ipuçları, açılır pencereler ve yerleşim hesaplamaları için kullanışlıdır.

Aktarılan ref gerçek bir DOM düğümünü gösterdiğinden, üst bileşen üzerinde yerel DOM yöntemlerini çağırabilir. Aktarılan bir liste öğesinde scrollIntoView çağrısı, öğeyi yumuşak bir geçişle görünür alana getirir; aktarılan bir kaydırma kapsayıcısında scrollTo çağrısı ise içeriğini yeniden konumlandırır.

Bunlar, bildirimsel olarak temiz bir karşılığı olmayan emirsel eylemlerdir; ref'lerin ele alması amaçlanan etkileşim türü tam olarak budur.

Bazen dışa açmak istediğiniz öğe birkaç bileşen derinliğinde gömülü olabilir. Her ara katmanın aldığı ref'i bir sonrakine aktarması için forwardRef'i zincirleyebilir ve ref'in sonunda hedef DOM düğümüne ulaşmasını sağlayabilirsiniz.

Zincirdeki her sarmalayıcı da kendisi forwardRef kullanmalı ve ref'i aktarmalıdır; çünkü aradaki sıradan bir bileşen bağlantıyı koparır.

forwardRef ve React.memo, hem ref aktarımı hem de oluşturma işlemlerinin önbelleğe alınmasını sağlamak için birleştirilebilir. Genellikle memo(forwardRef(Component)) sırası kullanılır; böylece memo karşılaştırması hâlâ uygulanırken forwardRef sonucu sarılır.

Bu kalıp, sık oluşturulan bir bileşenin hem düğümünü dışa açması hem de gereksiz yeniden oluşturmaları atlaması gereken performansa duyarlı tasarım sistemlerinde görülür.

React DevTools'ta bir forwardRef bileşeni, bileşen adınızı saran bir ForwardRef etiketiyle görünür. Bu, bir bileşenin ref aktarımına katıldığını bir bakışta doğrulamanızı kolaylaştırır.

İç işlevi adlandırabilir veya DevTools girdisini genel bir anonim ForwardRef etiketinden daha anlaşılır hâle getirmek için bir displayName ayarlayabilirsiniz.

forwardRef, veri aktarmak için değil, DOM düğümlerini ve imperatif tutamaçları dışa açmak içindir. Üst bileşenin alt bileşeni etkilemesi gerekiyorsa ref üzerinden içeri erişmek yerine normal özellikleri ve durumu tercih edin.

Ref'leri gereğinden fazla kullanmak bileşenleri sıkı biçimde birbirine bağlar ve React'in veri akışını atlar; bu da davranışı takip etmeyi zorlaştırır. forwardRef'i yalnızca bildirime dayalı bir özellik etkileşimi gerçekten ifade edemediğinde kullanın.

forwardRef, bileşen kitaplıklarında ve yeniden kullanılabilir giriş alanlarında ref'leri dışa açmak için hâlâ standart araçtır. Daha yeni React sürümleri, ref'in normal bir özellik olarak aktarılmasına doğru ilerliyor; ancak forwardRef hâlâ yaygın olarak kullanılmakta ve anlaşılması önemini korumaktadır.

forwardRef'i iyi bilmek, sizi hem mevcut kod tabanlarına hem de gelecekteki ref-as-prop sözdiziminin temelini oluşturan mekanizmalara hazırlar.

Bir forwardRef bileşeninin ref'ini nasıl aldığını anlayıp anlamadığınızı sınayın.

forwardRef, bileşene ikinci bir ref bağımsız değişkeni verip bunu içteki bir öğeye aktarmasını sağlayarak üst bileşenin alt bileşenin DOM düğümüne ulaşamaması sınırlamasını çözer. Bu, alt bileşen öğelerine odaklanmayı, bunları ölçmeyi ve kaydırmayı mümkün kılar.

memo ile birleştirilebilir, katmanlar boyunca zincirlenebilir ve DevTools'ta ForwardRef olarak görünür. Bunu veri aktarmak için değil, özelliklerin daha iyi ele aldığı emirsel DOM erişimi için kullanın.