Modern web geli\u015ftirme d\u00fcnyas\u0131nda React gibi k\u00fct\u00fcphaneler, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in deklaratif ve bile\u015fen tabanl\u0131 bir yakla\u015f\u0131m sunar. Ancak, bazen projelerimizde vanilla JavaScript ile yaz\u0131lm\u0131\u015f, g\u00fc\u00e7l\u00fc ve olgun k\u00fct\u00fcphaneleri kullanma ihtiyac\u0131 do\u011fabilir. Bu durumun birka\u00e7 temel nedeni vard\u0131r:<\/p>\n
* Mevcut K\u00fct\u00fcphanelerden Yararlanma:<\/strong> Y\u0131llard\u0131r geli\u015ftirilmi\u015f, test edilmi\u015f ve geni\u015f bir topluluk taraf\u0131ndan kullan\u0131lan bir\u00e7ok harika vanilla JavaScript k\u00fct\u00fcphanesi bulunmaktad\u0131r (\u00f6rne\u011fin, Chart.js, Leaflet, D3.js, Cropper.js). Bu k\u00fct\u00fcphanelerin React’e \u00f6zel bir sarmalay\u0131c\u0131s\u0131 (wrapper) olmayabilir veya mevcut sarmalay\u0131c\u0131lar projenizin ihtiya\u00e7lar\u0131n\u0131 tam olarak kar\u015f\u0131lamayabilir. Bu durumda, do\u011frudan vanilla JS k\u00fct\u00fcphanesini entegre etmek en mant\u0131kl\u0131 \u00e7\u00f6z\u00fcm olabilir. Bu rehber, React’in deklaratif yap\u0131s\u0131yla vanilla JavaScript’in imperatif DOM manip\u00fclasyonu aras\u0131ndaki bo\u015flu\u011fu nas\u0131l dolduraca\u011f\u0131n\u0131z\u0131, React, kullan\u0131c\u0131 aray\u00fczlerini “state” (durum) temelinde tan\u0131mlaman\u0131z\u0131 ister. Bile\u015feninizin durumu de\u011fi\u015fti\u011finde, React sanal DOM’u g\u00fcnceller ve yaln\u0131zca gerekli DOM de\u011fi\u015fikliklerini ger\u00e7ek DOM’a uygular. Bu deklaratif yakla\u015f\u0131m, aray\u00fcz\u00fcn nas\u0131l g\u00f6r\u00fcnece\u011fini tan\u0131mlaman\u0131z\u0131 sa\u011flar, React ise “nas\u0131l” yap\u0131laca\u011f\u0131n\u0131 halleder.<\/p>\n \u00d6te yandan, bir\u00e7ok vanilla JavaScript k\u00fct\u00fcphanesi, do\u011frudan DOM’u manip\u00fcle ederek veya belirli bir DOM elementine ba\u011flanarak \u00e7al\u0131\u015f\u0131r. Bu, “imperatif” bir yakla\u015f\u0131md\u0131r; yani, k\u00fct\u00fcphaneye ne yapmas\u0131 gerekti\u011fini (\u00f6rne\u011fin, “bu Bu iki farkl\u0131 d\u00fcnya aras\u0131nda bir k\u00f6pr\u00fc kurmak, entegrasyonun ana zorlu\u011fudur. React’in kontrol\u00fcndeki bir DOM elementini, vanilla JS k\u00fct\u00fcphanesinin imperatif olarak manip\u00fcle edebilece\u011fi bir “alan” olarak sa\u011flamam\u0131z gerekir. Bu bo\u015flu\u011fu doldurmak i\u00e7in React’in ya\u015fam d\u00f6ng\u00fcs\u00fc hook’lar\u0131na ve DOM referanslar\u0131na ihtiyac\u0131m\u0131z olacak.<\/p>\n Vanilla JS k\u00fct\u00fcphanelerini React bile\u015fenlerine entegre ederken en \u00e7ok ba\u015fvuraca\u011f\u0131m\u0131z iki temel React Hook’u * \u0130lk ad\u0131m, entegre etmek istedi\u011finiz vanilla JavaScript k\u00fct\u00fcphanesini projenize dahil etmektir. \u00c7o\u011fu modern k\u00fct\u00fcphane npm veya yarn \u00fczerinden kurulabilir.<\/p>\n Ard\u0131ndan, React bile\u015feninizde bu k\u00fct\u00fcphaneyi i\u00e7eri aktarman\u0131z gerekir:<\/p>\n Vanilla JS k\u00fct\u00fcphanelerinin \u00e7o\u011fu, belirli bir DOM elementine (genellikle bir Bu \u00f6rnekte, Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 ve istenmeyen davran\u0131\u015flar\u0131 \u00f6nlemek i\u00e7in, React bile\u015feni DOM’dan kald\u0131r\u0131ld\u0131\u011f\u0131nda (unmount edildi\u011finde) veya \u00c7o\u011fu vanilla JS k\u00fct\u00fcphanesi, olu\u015fturdu\u011fu \u00f6rne\u011fi yok etmek i\u00e7in bir React bile\u015feninizin dinamik olmas\u0131 i\u00e7in, props’lar arac\u0131l\u0131\u011f\u0131yla vanilla JS k\u00fct\u00fcphanesine veri veya se\u00e7enekler aktarman\u0131z gerekir. Bu veriler de\u011fi\u015fti\u011finde, vanilla JS k\u00fct\u00fcphanesini de g\u00fcncellemeniz gerekecektir. Bunu, \u00d6nemli Not:<\/strong> E\u011fer Vanilla JS k\u00fct\u00fcphaneleri genellikle kendi olay sistemlerine sahiptir (\u00f6rne\u011fin, bir grafi\u011fe t\u0131kland\u0131\u011f\u0131nda, bir harita \u00fczerinde bir i\u015faretleyiciye bas\u0131ld\u0131\u011f\u0131nda). Bu olaylar\u0131 React bile\u015feninize aktarmak ve React’in olay i\u015fleme mekanizmas\u0131yla entegre etmek isteyebilirsiniz.<\/p>\n Bu, Not:<\/strong> Bazen, sar\u0131lm\u0131\u015f vanilla JS bile\u015feninizin i\u00e7indeki k\u00fct\u00fcphane \u00f6rne\u011finin belirli metotlar\u0131n\u0131 (\u00f6rne\u011fin, bir grafi\u011fi yeniden \u00e7izme, bir haritada yak\u0131nla\u015ft\u0131rma) \u00fcst bile\u015fenlerden \u00e7a\u011f\u0131rmak isteyebilirsiniz. Bu, \u015eimdi, bu bile\u015feni kullanan bir \u00fcst bile\u015fen,
\n* Performans ve Optimizasyon:<\/strong> Baz\u0131 durumlarda, vanilla JS k\u00fct\u00fcphaneleri, React sarmalay\u0131c\u0131lar\u0131na g\u00f6re daha d\u00fc\u015f\u00fck seviyeli DOM manip\u00fclasyonu yaparak daha y\u00fcksek performans sunabilir. \u00d6zellikle yo\u011fun grafikler, haritalar veya animasyonlar i\u00e7eren uygulamalarda bu fark hissedilebilir. Kendi sarmalay\u0131c\u0131n\u0131z\u0131 yazarak, k\u00fct\u00fcphanenin performans \u00f6zelliklerini daha iyi kontrol edebilirsiniz.
\n* React Alternatifi Olmayan \u00d6zel K\u00fct\u00fcphaneler:<\/strong> Belirli bir ni\u015f alana odaklanm\u0131\u015f veya \u015firket i\u00e7i geli\u015ftirilmi\u015f vanilla JS k\u00fct\u00fcphaneleri bulunabilir. Bu t\u00fcr k\u00fct\u00fcphanelerin React entegrasyonu i\u00e7in \u00f6zel bir \u00e7\u00f6z\u00fcme ihtiyac\u0131 vard\u0131r.
\n* Ba\u011f\u0131ml\u0131l\u0131klar\u0131 Kontrol Alt\u0131nda Tutma:<\/strong> Bazen, bir k\u00fct\u00fcphanenin React sarmalay\u0131c\u0131s\u0131, vanilla JS k\u00fct\u00fcphanesinin kendisinden daha fazla ba\u011f\u0131ml\u0131l\u0131k i\u00e7erebilir. Kendi entegrasyonunuzu yaparak, projenizin ba\u011f\u0131ml\u0131l\u0131k a\u011fac\u0131n\u0131 daha yal\u0131n tutabilirsiniz.<\/p>\nuseEffect<\/code> ve useRef<\/code> gibi temel React Hook’lar\u0131n\u0131 kullanarak bu entegrasyonu nas\u0131l ba\u015far\u0131l\u0131 bir \u015fekilde ger\u00e7ekle\u015ftirece\u011finizi ad\u0131m ad\u0131m a\u00e7\u0131klayacakt\u0131r.<\/p>\nTemel Zorluk: React’in Deklaratif Do\u011fas\u0131 ve Imperatif DOM Manip\u00fclasyonu<\/h3>\n
div<\/code> elementine bir grafik \u00e7iz”) a\u00e7\u0131k\u00e7a s\u00f6ylersiniz.<\/p>\nEntegrasyon \u0130\u00e7in Temel React Hook’lar\u0131<\/h3>\n
useRef<\/code> ve useEffect<\/code>‘tir. useState<\/code> ise React state’ini vanilla JS k\u00fct\u00fcphanesinin verileriyle senkronize etmek i\u00e7in kullan\u0131l\u0131r.<\/p>\nuseRef<\/code><\/strong>: Bu hook, DOM elementlerine veya React bile\u015fenleri aras\u0131nda kal\u0131c\u0131 olmas\u0131n\u0131 istedi\u011finiz herhangi bir de\u011fere do\u011frudan referans alman\u0131z\u0131 sa\u011flar. Vanilla JS k\u00fct\u00fcphanelerinin belirli bir DOM elementine ba\u011flanmas\u0131 gerekti\u011finde, useRef<\/code> ile bu elemente bir referans olu\u015ftururuz ve bu referans\u0131 k\u00fct\u00fcphaneye iletiriz. Bu referans, bile\u015fen yeniden render edildi\u011finde bile ayn\u0131 kal\u0131r.
\n* useEffect<\/code><\/strong>: React’in ya\u015fam d\u00f6ng\u00fcs\u00fc olaylar\u0131n\u0131 (bile\u015fenin mount edilmesi, g\u00fcncellenmesi, unmount edilmesi) y\u00f6netmek i\u00e7in kullan\u0131l\u0131r. Vanilla JS k\u00fct\u00fcphanesini ba\u015flatma, g\u00fcncelleme ve temizleme i\u015flemleri useEffect<\/code> i\u00e7inde ger\u00e7ekle\u015ftirilir. Ba\u011f\u0131ml\u0131l\u0131k dizisi sayesinde, hangi prop’lar veya state’ler de\u011fi\u015fti\u011finde bu yan etkinin yeniden \u00e7al\u0131\u015faca\u011f\u0131n\u0131 kontrol edebiliriz.
\n* useState<\/code><\/strong>: React bile\u015feninin i\u00e7 durumunu y\u00f6netmek i\u00e7in kullan\u0131l\u0131r. Vanilla JS k\u00fct\u00fcphanesinden gelen verileri React state’ine aktarman\u0131z veya React state’indeki verileri vanilla JS k\u00fct\u00fcphanesine aktarman\u0131z gerekti\u011finde bu hook’u kullan\u0131rs\u0131n\u0131z.<\/p>\nAd\u0131m Ad\u0131m Entegrasyon Rehberi<\/h3>\n
Ad\u0131m 1: Vanilla JS Paketini Kurma ve \u0130\u00e7eri Aktarma<\/h4>\n
npm install your-vanilla-js-package\nveya<\/h2>\nyarn add your-vanilla-js-package<\/code><\/pre>\n
import YourVanillaJSPackage from 'your-vanilla-js-package';\n\/\/ Baz\u0131 k\u00fct\u00fcphaneler varsay\u0131lan d\u0131\u015fa aktar\u0131m yapmaz,\n\/\/ bu durumda s\u00fcsl\u00fc parantezlerle i\u00e7eri aktarman\u0131z gerekebilir:\n\/\/ import { SpecificModule } from 'your-vanilla-js-package';<\/code><\/pre>\nAd\u0131m 2: DOM Referans\u0131 Olu\u015fturma ve Paketi Ba\u015flatma<\/h4>\n
div<\/code>, canvas<\/code> veya svg<\/code>) ihtiya\u00e7 duyar. Bu elemente bir referans almak i\u00e7in useRef<\/code> kullan\u0131r\u0131z. K\u00fct\u00fcphaneyi ba\u015flatma i\u015flemi ise useEffect<\/code> i\u00e7inde ger\u00e7ekle\u015ftirilir.<\/p>\nimport React, { useRef, useEffect } from 'react';\nimport YourVanillaJSPackage from 'your-vanilla-js-package';\n\nfunction MyVanillaJSWrapper() {\n const containerRef = useRef(null); \/\/ DOM elementine referans almak i\u00e7in\n\n useEffect(() => {\n \/\/ Bile\u015fen mount edildi\u011finde \u00e7al\u0131\u015facak\n if (containerRef.current) {\n \/\/ Vanilla JS k\u00fct\u00fcphanesini ba\u015flatma\n const instance = new YourVanillaJSPackage(containerRef.current, {\n \/\/ K\u00fct\u00fcphanenin se\u00e7enekleri buraya gelir\n \/\/ \u00d6rne\u011fin: width: 300, height: 200\n });\n\n \/\/ K\u00fct\u00fcphane \u00f6rne\u011fini daha sonra kullanmak \u00fczere saklamak isteyebilirsiniz\n \/\/ \u00d6rne\u011fin: instanceRef.current = instance;\n\n \/\/ Temizlik fonksiyonu d\u00f6nd\u00fcrme (bir sonraki ad\u0131mda detayl\u0131)\n return () => {\n \/\/ Bile\u015fen unmount edildi\u011finde veya ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fti\u011finde \u00e7al\u0131\u015facak\n \/\/ K\u00fct\u00fcphane \u00f6rne\u011fini yok etme veya temizleme\n \/\/ \u00d6rne\u011fin: instance.destroy();\n };\n }\n }, []); \/\/ Bo\u015f ba\u011f\u0131ml\u0131l\u0131k dizisi, sadece mount ve unmount'ta \u00e7al\u0131\u015f\u0131r\n\n return ;\n}\n\nexport default MyVanillaJSWrapper;<\/code><\/pre>\ncontainerRef<\/code> ad\u0131nda bir referans olu\u015fturduk ve bunu div<\/code> elementine atad\u0131k. useEffect<\/code> hook’u, bile\u015fen ilk kez DOM’a yerle\u015ftirildi\u011finde (mount edildi\u011finde) \u00e7al\u0131\u015f\u0131r. containerRef.current<\/code> ile ger\u00e7ek DOM elementine eri\u015firiz ve YourVanillaJSPackage<\/code>‘\u0131 bu element \u00fczerinde ba\u015flat\u0131r\u0131z.<\/p>\nAd\u0131m 3: Temizlik \u0130\u015flemleri (Cleanup)<\/h4>\n
useEffect<\/code>‘in ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fti\u011finde vanilla JS k\u00fct\u00fcphanesinin olu\u015fturdu\u011fu kaynaklar\u0131 temizlemek \u00e7ok \u00f6nemlidir. useEffect<\/code>‘ten bir fonksiyon d\u00f6nd\u00fcrerek bu temizlik i\u015flemini ger\u00e7ekle\u015ftirebiliriz.<\/p>\ndestroy()<\/code> veya benzeri bir metoda sahiptir.<\/p>\nimport React, { useRef, useEffect } from 'react';\nimport YourVanillaJSPackage from 'your-vanilla-js-package';\n\nfunction MyVanillaJSWrapper() {\n const containerRef = useRef(null);\n const instanceRef = useRef(null); \/\/ K\u00fct\u00fcphane \u00f6rne\u011fini saklamak i\u00e7in\n\n useEffect(() => {\n if (containerRef.current) {\n \/\/ K\u00fct\u00fcphaneyi ba\u015flat\n const instance = new YourVanillaJSPackage(containerRef.current, {\n \/\/ Se\u00e7enekler\n });\n instanceRef.current = instance; \/\/ \u00d6rne\u011fi sakla\n\n \/\/ Temizlik fonksiyonu\n return () => {\n if (instanceRef.current) {\n \/\/ K\u00fct\u00fcphane \u00f6rne\u011fini yok et\n \/\/ \u00d6nemli: K\u00fct\u00fcphanenizin cleanup metodunu kullan\u0131n!\n if (typeof instanceRef.current.destroy === 'function') {\n instanceRef.current.destroy();\n }\n instanceRef.current = null; \/\/ Referans\u0131 temizle\n }\n };\n }\n }, []); \/\/ Bo\u015f ba\u011f\u0131ml\u0131l\u0131k dizisi\n\n return ;\n}<\/code><\/pre>\nAd\u0131m 4: React Props’lar\u0131n\u0131 Vanilla JS Paketine Aktarma ve G\u00fcncelleme<\/h4>\n
useEffect<\/code>‘in ba\u011f\u0131ml\u0131l\u0131k dizisine ilgili props’lar\u0131 ekleyerek ve k\u00fct\u00fcphanenin g\u00fcncelleme metotlar\u0131n\u0131 \u00e7a\u011f\u0131rarak yapar\u0131z.<\/p>\nimport React, { useRef, useEffect } from 'react';\nimport YourVanillaJSPackage from 'your-vanilla-js-package';\n\nfunction MyVanillaJSWrapper({ data, options }) { \/\/ data ve options props olarak al\u0131n\u0131yor\n const containerRef = useRef(null);\n const instanceRef = useRef(null);\n\n useEffect(() => {\n if (containerRef.current) {\n \/\/ \u0130lk ba\u015flatma\n if (!instanceRef.current) { \/\/ Hen\u00fcz ba\u015flat\u0131lmam\u0131\u015fsa\n instanceRef.current = new YourVanillaJSPackage(containerRef.current, { ...options, data });\n } else {\n \/\/ Zaten ba\u015flat\u0131lm\u0131\u015fsa, g\u00fcncelle\n \/\/ K\u00fct\u00fcphanenizin g\u00fcncelleme metotlar\u0131n\u0131 kullan\u0131n\n \/\/ \u00d6rne\u011fin: instanceRef.current.updateData(data);\n \/\/ \u00d6rne\u011fin: instanceRef.current.setOptions(options);\n \/\/ Bir\u00e7ok k\u00fct\u00fcphane, sadece update() \u00e7a\u011fr\u0131s\u0131yla yeni verileri veya se\u00e7enekleri kabul edebilir.\n if (typeof instanceRef.current.update === 'function') {\n instanceRef.current.update({ ...options, data }); \/\/ Varsay\u0131msal bir update metodu\n }\n }\n }\n }, [data, options]); \/\/ data veya options de\u011fi\u015fti\u011finde bu useEffect tekrar \u00e7al\u0131\u015f\u0131r\n\n useEffect(() => {\n \/\/ Sadece mount ve unmount i\u00e7in temizlik\n return () => {\n if (instanceRef.current) {\n if (typeof instanceRef.current.destroy === 'function') {\n instanceRef.current.destroy();\n }\n instanceRef.current = null;\n }\n };\n }, []); \/\/ Bo\u015f ba\u011f\u0131ml\u0131l\u0131k dizisi\n\n return ;\n}<\/code><\/pre>\ndata<\/code> veya options<\/code> gibi props’lar karma\u015f\u0131k objelerse, React her render’da yeni bir obje referans\u0131 olu\u015fturabilir (obje i\u00e7eri\u011fi de\u011fi\u015fmese bile). Bu durum, useEffect<\/code>‘in gereksiz yere tekrar \u00e7al\u0131\u015fmas\u0131na neden olabilir. Bu t\u00fcr durumlar i\u00e7in useMemo<\/code> kullanarak objeleri memoize edebilir veya bir derin kar\u015f\u0131la\u015ft\u0131rma (deep comparison) fonksiyonu kullanarak sadece obje i\u00e7eri\u011fi de\u011fi\u015fti\u011finde useEffect<\/code>‘in \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayabilirsiniz. Ancak, \u00e7o\u011fu durumda, k\u00fct\u00fcphanenin update<\/code> metodunun sadece ger\u00e7ekten de\u011fi\u015fen veriyi i\u015flemesi beklenir.<\/p>\nAd\u0131m 5: Vanilla JS Olaylar\u0131n\u0131 React’e Aktarma<\/h4>\n
useEffect<\/code> i\u00e7inde k\u00fct\u00fcphanenin olay dinleme metotlar\u0131n\u0131 kullanarak ve bu olaylar\u0131 React props olarak gelen callback fonksiyonlar\u0131na y\u00f6nlendirerek yap\u0131l\u0131r.<\/p>\nimport React, { useRef, useEffect } from 'react';\nimport YourVanillaJSPackage from 'your-vanilla-js-package';\n\nfunction MyVanillaJSWrapper({ onEventOccurred, ...props }) { \/\/ onEventOccurred bir callback prop'u\n const containerRef = useRef(null);\n const instanceRef = useRef(null);\n\n useEffect(() => {\n if (containerRef.current && !instanceRef.current) {\n instanceRef.current = new YourVanillaJSPackage(containerRef.current, props);\n\n \/\/ K\u00fct\u00fcphanenin olay dinleme metodunu kullanma\n if (typeof instanceRef.current.on === 'function') {\n instanceRef.current.on('someEvent', (eventData) => {\n if (onEventOccurred) {\n onEventOccurred(eventData); \/\/ React prop'u olarak gelen callback'i \u00e7a\u011f\u0131r\n }\n });\n }\n }\n\n return () => {\n if (instanceRef.current) {\n \/\/ Olay dinleyicilerini temizleme (e\u011fer k\u00fct\u00fcphane bir .off() metodu sa\u011fl\u0131yorsa)\n if (typeof instanceRef.current.off === 'function') {\n instanceRef.current.off('someEvent');\n }\n if (typeof instanceRef.current.destroy === 'function') {\n instanceRef.current.destroy();\n }\n instanceRef.current = null;\n }\n };\n }, [onEventOccurred, props]); \/\/ onEventOccurred de\u011fi\u015fti\u011finde de bu useEffect tekrar \u00e7al\u0131\u015f\u0131r\n\n return ;\n}<\/code><\/pre>\nonEventOccurred<\/code> gibi callback fonksiyonlar\u0131, React her render’da yeni bir fonksiyon referans\u0131 olu\u015fturabilir. Bu, useEffect<\/code>‘in gereksiz yere yeniden \u00e7al\u0131\u015fmas\u0131na neden olabilir. Bu durumu \u00f6nlemek i\u00e7in useCallback<\/code> hook’unu kullanabilirsiniz: const handleEvent = useCallback((data) => { \/ ... <\/em>\/ }, []);<\/code><\/p>\nAd\u0131m 6: Vanilla JS Metotlar\u0131n\u0131 React’ten \u00c7a\u011f\u0131rma (\u0130ste\u011fe Ba\u011fl\u0131)<\/h4>\n
forwardRef<\/code> ve useImperativeHandle<\/code> hook’lar\u0131 kullan\u0131larak ger\u00e7ekle\u015ftirilebilir.<\/p>\nimport React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';\nimport YourVanillaJSPackage from 'your-vanilla-js-package';\n\nconst MyVanillaJSWrapper = forwardRef(({ data, options }, ref) => {\n const containerRef = useRef(null);\n const instanceRef = useRef(null);\n\n useEffect(() => {\n if (containerRef.current && !instanceRef.current) {\n instanceRef.current = new YourVanillaJSPackage(containerRef.current, { ...options, data });\n } else if (instanceRef.current) {\n \/\/ G\u00fcncelleme mant\u0131\u011f\u0131\n if (typeof instanceRef.current.update === 'function') {\n instanceRef.current.update({ ...options, data });\n }\n }\n }, [data, options]);\n\n useEffect(() => {\n return () => {\n if (instanceRef.current) {\n if (typeof instanceRef.current.destroy === 'function') {\n instanceRef.current.destroy();\n }\n instanceRef.current = null;\n }\n };\n }, []);\n\n \/\/ \u00dcst bile\u015fenin ref'i arac\u0131l\u0131\u011f\u0131yla \u00e7a\u011fr\u0131labilecek metotlar\u0131 tan\u0131mla\n useImperativeHandle(ref, () => ({\n \/\/ \u00d6rne\u011fin, k\u00fct\u00fcphanenin 'reset' metodunu d\u0131\u015far\u0131ya a\u00e7al\u0131m\n reset: () => {\n if (instanceRef.current && typeof instanceRef.current.reset === 'function') {\n instanceRef.current.reset();\n }\n },\n \/\/ K\u00fct\u00fcphane \u00f6rne\u011finin kendisine eri\u015fim de sa\u011flayabiliriz (dikkatli kullan\u0131lmal\u0131)\n getNativeInstance: () => instanceRef.current,\n }));\n\n return ;\n});\n\nexport default MyVanillaJSWrapper;<\/code><\/pre>\nuseRef<\/code> kullanarak MyVanillaJSWrapper<\/code>‘a bir referans alabilir ve tan\u0131mlad\u0131\u011f\u0131m\u0131z metotlar\u0131 \u00e7a\u011f\u0131rabilir:<\/p>\nimport React, { useRef } from 'react';\nimport MyVanillaJSWrapper from '.\/MyVanillaJSWrapper';\n\nfunction ParentComponent() {\n const wrapperRef = useRef(null);\n\n const handleResetClick = () => {\n if (wrapperRef.current) {\n wrapperRef.current.reset(); \/\/ Vanilla JS metodunu \u00e7a\u011f\u0131r\n }\n };\n\n return (\n