React, deklaratif bir UI k\u00fct\u00fcphanesidir; yani bile\u015fenlerinizin nas\u0131l g\u00f6r\u00fcnmesi gerekti\u011fini tan\u0131mlars\u0131n\u0131z ve React bu durumu y\u00f6netir. Ancak, bazen DOM elemanlar\u0131na veya alt bile\u015fenlere do\u011frudan eri\u015fim gibi imperatif i\u015flemlere ihtiya\u00e7 duyar\u0131z. \u0130\u015fte bu noktada React’in deklaratif do\u011fas\u0131, \u00e7o\u011fu durumda bile\u015fenler aras\u0131 etkile\u015fimi prop’lar ve state \u00fczerinden y\u00f6netmemizi te\u015fvik eder. Ancak baz\u0131 senaryolarda, bir DOM eleman\u0131na veya bir React bile\u015feninin \u00f6rne\u011fine do\u011frudan eri\u015fmek ka\u00e7\u0131n\u0131lmaz hale gelir. \u0130\u015fte bu noktada “ref”ler devreye girer.<\/p>\n Refs (referanslar), React bile\u015fenleri i\u00e7inde do\u011frudan DOM d\u00fc\u011f\u00fcmlerine veya React bile\u015fen \u00f6rneklerine eri\u015fim sa\u011flaman\u0131n bir yoludur. Genellikle, bir bile\u015fenin ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fcn d\u0131\u015f\u0131ndaki etkile\u015fimler i\u00e7in kullan\u0131l\u0131rlar. \u00d6rne\u011fin, bir input alan\u0131na odaklanmak, medya oynatmay\u0131 kontrol etmek veya bir animasyonu tetiklemek gibi durumlar ref kullan\u0131m\u0131na iyi birer \u00f6rnektir.<\/p>\n Fonksiyonel bile\u015fenler yayg\u0131nla\u015fmadan \u00f6nce, s\u0131n\u0131f bile\u015fenlerinde <\/code><\/p>\n Varsay\u0131lan olarak, bir React bile\u015fenine ref<\/code>‘ler devreye girer. useImperativeHandle<\/code> hook’u ise, bir alt bile\u015fenin d\u0131\u015far\u0131ya a\u00e7t\u0131\u011f\u0131 ref de\u011ferini \u00f6zelle\u015ftirerek, \u00fcst bile\u015fenin bu alt bile\u015fenle daha kontroll\u00fc ve esnek bir \u015fekilde etkile\u015fim kurmas\u0131n\u0131 sa\u011flar. Bu makalede, useImperativeHandle<\/code>‘\u0131n ne oldu\u011funu, ne zaman ve nas\u0131l kullan\u0131laca\u011f\u0131n\u0131, alternatiflerini ve en iyi uygulamalar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\nReact’te Ref Kavram\u0131 ve Kullan\u0131m Alanlar\u0131<\/h3>\n
Refs Nedir?<\/h4>\n
createRef ve useRef<\/h4>\n
React.createRef()<\/code> kullan\u0131l\u0131yordu. Fonksiyonel bile\u015fenlerin hayat\u0131m\u0131za girmesiyle birlikte, useRef<\/code> hook’u bu ihtiyac\u0131 kar\u015f\u0131lamak \u00fczere tasarland\u0131. useRef<\/code>, mutable bir obje d\u00f6nd\u00fcr\u00fcr ve .current<\/code> \u00f6zelli\u011fi arac\u0131l\u0131\u011f\u0131yla referans tutulan de\u011fere eri\u015fim sa\u011flar. Bu de\u011fer, bile\u015fen yeniden render edildi\u011finde bile ayn\u0131 kal\u0131r.<\/p>\nimport React, { useRef, useEffect } from 'react';\n\nfunction MyInput() {\n const inputRef = useRef(null);\n\n useEffect(() => {\n \/\/ Bile\u015fen mount edildi\u011finde input'a odaklan\n if (inputRef.current) {\n inputRef.current.focus();\n }\n }, []);\n\n return ;\n}<\/pre>\nRef Forwarding<\/h4>\n
ref<\/code> prop'u ge\u00e7meye \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131zda, bu prop do\u011frudan DOM eleman\u0131na veya bile\u015fenin kendisine iletilmez. Bu davran\u0131\u015f, bile\u015fenlerin i\u00e7 detaylar\u0131n\u0131 gizleme prensibiyle uyumludur. Ancak, bazen bir \u00fcst bile\u015fenin, bir alt bile\u015fenin i\u00e7indeki bir DOM eleman\u0131na veya \u00f6zel bir metoda eri\u015fmesi gerekebilir. \u0130\u015fte bu durumda React.forwardRef<\/code> kullan\u0131l\u0131r. forwardRef<\/code>, bir bile\u015fenin ald\u0131\u011f\u0131 ref<\/code> prop'unu alt bile\u015fenine veya i\u00e7indeki bir DOM eleman\u0131na iletmesini sa\u011flar.<\/p>\nimport React, { forwardRef } from 'react';\n\nconst MyButton = forwardRef((props, ref) => (\n