React’te JavaScript Closure’lar\u0131n\u0131 Y\u00f6netme<\/p>\n
React uygulamalar\u0131nda performans sorunlar\u0131na ve beklenmedik davran\u0131\u015flara yol a\u00e7abilecek karma\u015f\u0131k bir kavram olan JavaScript closure’lar\u0131n\u0131 etkili bir \u015fekilde y\u00f6netmek, temiz ve s\u00fcrd\u00fcr\u00fclebilir kod yazman\u0131n anahtarlar\u0131ndan biridir. Bu makalede, React’te closure’lar\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, potansiyel sorunlar\u0131 ve bunlar\u0131n nas\u0131l \u00e7\u00f6z\u00fclece\u011fini detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z. \u00d6ncelikle closure’lar\u0131n ne oldu\u011funu anlamakla ba\u015flayal\u0131m.<\/p>\n
K\u0131saca a\u00e7\u0131klamak gerekirse, bir closure, bir fonksiyonun kendi kapsam alan\u0131n\u0131n (scope) d\u0131\u015f\u0131nda tan\u0131mlanm\u0131\u015f de\u011fi\u015fkenlere eri\u015fim sa\u011flamas\u0131d\u0131r. Fonksiyon, tan\u0131mland\u0131\u011f\u0131 \u00e7evreden (lexical environment) de\u011fi\u015fkenlere eri\u015fmeye devam eder, hatta fonksiyon \u00e7al\u0131\u015ft\u0131ktan sonra bile. Bu durum, fonksiyonun “\u00e7evresini hat\u0131rlamas\u0131” \u015feklinde d\u00fc\u015f\u00fcn\u00fclebilir. Bu, bir\u00e7ok durumda faydal\u0131 olsa da, \u00f6zellikle React’te bile\u015fen ya\u015fam d\u00f6ng\u00fcs\u00fcyle ilgili sorunlara yol a\u00e7abilir. <\/p>\n
\u00d6rne\u011fin, a\u015fa\u011f\u0131daki kodda React’te closure’lar, genellikle bile\u015fenlerin state’ini y\u00f6netmek i\u00e7in kullan\u0131lan fonksiyonel bile\u015fenlerde s\u0131kl\u0131kla kar\u015f\u0131m\u0131za \u00e7\u0131kar. Ancak, closure’lar\u0131n yanl\u0131\u015f kullan\u0131m\u0131, performans sorunlar\u0131na ve beklenmedik davran\u0131\u015flara yol a\u00e7abilir. En yayg\u0131n sorunlardan biri, eski state de\u011ferlerine referans al\u0131nmas\u0131d\u0131r. <\/p>\n Bir bile\u015fenin yeniden render edilmesi s\u0131ras\u0131nda, closure’lar i\u00e7indeki de\u011fi\u015fkenlerin eski de\u011ferlerini kullanarak hatal\u0131 g\u00fcncellemeler yap\u0131lmas\u0131 olas\u0131d\u0131r. Bu durum, \u00f6zellikle asynchronous i\u015flemler (\u00f6rne\u011fin, API \u00e7a\u011fr\u0131lar\u0131) s\u00f6z konusu oldu\u011funda daha belirgin hale gelir. Bunun \u00f6n\u00fcne ge\u00e7mek i\u00e7in, g\u00fcncel state de\u011ferlerini kullanmak \u00f6nemlidir. <\/p>\n React’te closure’larla ilgili sorunlar\u0131 \u00f6nlemek i\u00e7in birka\u00e7 teknik kullanabiliriz. Bunlardan en yayg\u0131n olan\u0131, fonksiyonel bile\u015fenlerde \u00d6rne\u011fin, a\u015fa\u011f\u0131daki kodda, Count: {count}<\/p>\n incrementCounter<\/code> fonksiyonu, counter<\/code> de\u011fi\u015fkenine eri\u015fir ve de\u011fi\u015ftirir. incrementCounter<\/code> fonksiyonu kapsam d\u0131\u015f\u0131nda olsa bile, counter<\/code> de\u011fi\u015fkenini hat\u0131rlar ve her \u00e7a\u011f\u0131r\u0131ld\u0131\u011f\u0131nda de\u011ferini art\u0131r\u0131r:<\/p>\n\nfunction createCounter() {\n let counter = 0;\n return function incrementCounter() {\n counter++;\n console.log(counter);\n };\n}\n\nconst myCounter = createCounter();\nmyCounter(); \/\/ 1\nmyCounter(); \/\/ 2\nmyCounter(); \/\/ 3\n<\/code><\/pre>\nReact’te Closure Sorunlar\u0131<\/h2>\n
Closure’lar\u0131 Etkili Bir \u015eekilde Y\u00f6netme<\/h2>\n
useState<\/code> hook’unu do\u011fru kullanmakt\u0131r. useState<\/code> hook’u, bile\u015fenin state’ini y\u00f6netmek i\u00e7in g\u00fcvenli ve \u00f6ng\u00f6r\u00fclebilir bir yol sa\u011flar. Ayr\u0131ca, closure’lar i\u00e7inde gereksiz referanslar\u0131n olu\u015fmas\u0131n\u0131 engellemek i\u00e7in, her render’da yeni fonksiyonlar olu\u015fturmak da faydal\u0131 olabilir. <\/p>\nhandleClick<\/code> fonksiyonu, her render’da g\u00fcncel state de\u011ferini kullanacak \u015fekilde tan\u0131mlanm\u0131\u015ft\u0131r:<\/p>\n\nimport React, { useState } from 'react';\n\nfunction MyComponent() {\n const [count, setCount] = useState(0);\n\n const handleClick = () => {\n setCount(prevCount => prevCount + 1);\n };\n\n return (\n