SolidStart, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in SolidJS \u00fczerine in\u015fa edilmi\u015f g\u00fc\u00e7l\u00fc bir meta-\u00e7er\u00e7evedir. React, Vue veya Angular gibi di\u011fer pop\u00fcler \u00e7er\u00e7evelerden farkl\u0131 olarak, SolidJS’in reaktif do\u011fas\u0131, bile\u015fenlerin yaln\u0131zca de\u011fi\u015fen k\u0131s\u0131mlar\u0131n\u0131n g\u00fcncellenmesini sa\u011flayarak \u00fcst\u00fcn performans sunar. Bu makalede, SolidStart’\u0131n kalbinde yer alan ve uygulamalar\u0131n\u0131z\u0131 daha verimli, y\u00f6netilebilir ve g\u00fc\u00e7l\u00fc hale getiren “hooks” kavram\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. SolidStart’\u0131n sundu\u011fu reaktif primitiflerden \u00f6zel entegrasyonlara kadar her y\u00f6n\u00fcyle hooks d\u00fcnyas\u0131na dalaca\u011f\u0131z.<\/p>\n
Modern web geli\u015ftirme d\u00fcnyas\u0131nda performans, geli\u015ftirici deneyimi ve \u00f6l\u00e7eklenebilirlik, bir \u00e7er\u00e7eve se\u00e7iminde kilit rol oynar. SolidStart, bu ihtiya\u00e7lar\u0131 kar\u015f\u0131lamak \u00fczere SolidJS’in \u00fczerine in\u015fa edilmi\u015f, tam \u00f6zellikli bir meta-\u00e7er\u00e7evedir.<\/p>\n
SolidJS, deklaratif ve reaktif bir JavaScript k\u00fct\u00fcphanesidir. React’e benzer bir JSX s\u00f6zdizimi kullanmas\u0131na ra\u011fmen, temel \u00e7al\u0131\u015fma prensibi olduk\u00e7a farkl\u0131d\u0131r. SolidJS, sanal DOM kullanmak yerine, do\u011frudan ger\u00e7ek DOM \u00fczerinde \u00e7al\u0131\u015f\u0131r ve ince taneli (fine-grained) reaktiviteye odaklan\u0131r. Bu, bir durum de\u011fi\u015fti\u011finde, sadece o duruma ba\u011fl\u0131 olan DOM par\u00e7alar\u0131n\u0131n g\u00fcncellendi\u011fi anlam\u0131na gelir. Sonu\u00e7 olarak, gereksiz yeniden olu\u015fturmalar (re-renders) ortadan kalkar ve ola\u011fan\u00fcst\u00fc performans elde edilir.<\/p>\n
SolidJS’in reaktivite modeli, sinyaller (signals)<\/strong>, efektler (effects)<\/strong> ve memolar (memos)<\/strong> gibi primitifler \u00fczerine kuruludur. Bu primitifler, uygulaman\u0131zdaki veri ak\u0131\u015f\u0131n\u0131 ve yan etkileri deklaratif bir \u015fekilde y\u00f6netmenizi sa\u011flar.<\/p>\n SolidJS harika bir UI k\u00fct\u00fcphanesi olsa da, bir web uygulamas\u0131n\u0131n t\u00fcm ihtiya\u00e7lar\u0131n\u0131 tek ba\u015f\u0131na kar\u015f\u0131lamaz. Rota y\u00f6netimi, sunucu taraf\u0131 render (SSR), statik site olu\u015fturma (SSG), veri \u00e7ekme ve API entegrasyonlar\u0131 gibi konularda ek \u00e7\u00f6z\u00fcmlere ihtiya\u00e7 duyulur. \u0130\u015fte SolidStart tam da bu noktada devreye girer.<\/p>\n SolidStart, SolidJS’i temel alarak, yukar\u0131da bahsedilen t\u00fcm bu \u00f6zellikleri tek bir \u00e7at\u0131 alt\u0131nda toplayan bir meta-\u00e7er\u00e7evedir. Next.js veya Nuxt.js gibi di\u011fer pop\u00fcler meta-\u00e7er\u00e7evelere benzer \u015fekilde, dosya tabanl\u0131 y\u00f6nlendirme, veri y\u00fckleyiciler ve sunucu eylemleri gibi \u00f6zellikler sunar. Bu, geli\u015ftiricilerin sadece UI bile\u015fenlerine odaklanmas\u0131n\u0131 sa\u011flarken, altyap\u0131sal karma\u015f\u0131kl\u0131\u011f\u0131 SolidStart’\u0131n y\u00f6netmesine olanak tan\u0131r.<\/p>\n Hooks, SolidJS ve SolidStart’ta reaktif mant\u0131\u011f\u0131 bile\u015fenlerinizle entegre etmenin standart yoludur. Durum y\u00f6netimi, yan etkileri i\u015fleme, hesaplanm\u0131\u015f de\u011ferleri optimize etme ve SolidStart’\u0131n \u00f6zel \u00f6zelliklerine eri\u015fme gibi g\u00f6revler i\u00e7in hooks kullan\u0131l\u0131r. Hooks kullanarak:<\/p>\n Hooks, fonksiyonel bile\u015fenler i\u00e7inde reaktif mant\u0131\u011f\u0131 kullanmam\u0131z\u0131 sa\u011flayan \u00f6zel fonksiyonlard\u0131r. SolidStart’ta hooks, SolidJS’in temel reaktivite primitiflerini ve SolidStart’\u0131n kendi ek \u00f6zelliklerini bir araya getirir.<\/p>\n Hooks, SolidJS’in reaktivite primitiflerini (sinyaller, efektler, memolar) ve bile\u015fen ya\u015fam d\u00f6ng\u00fcs\u00fc y\u00f6netimini fonksiyonel bile\u015fenler i\u00e7inde kullanmam\u0131z\u0131 sa\u011flayan fonksiyonlard\u0131r. React’teki hooks’a benzer bir kavram olsa da, SolidJS’in derleme zaman\u0131 reaktivitesi sayesinde farkl\u0131 bir \u00e7al\u0131\u015fma prensibine sahiptir. Hooks sayesinde, durumu y\u00f6netebilir, yan etkileri (veri \u00e7ekme, DOM manip\u00fclasyonu) ger\u00e7ekle\u015ftirebilir ve bile\u015fenler aras\u0131 tekrar kullan\u0131labilir mant\u0131k par\u00e7alar\u0131 olu\u015fturabiliriz.<\/p>\n SolidJS’in reaktivite modelinin temel ta\u015flar\u0131 olan bu primitifler, SolidStart hooks’unun da temelini olu\u015fturur:<\/p>\n SolidStart, SolidJS’in temel primitiflerine ek olarak, kendi meta-\u00e7er\u00e7eve \u00f6zelliklerini kullanmam\u0131z\u0131 sa\u011flayan bir dizi \u00f6zel hook sunar. Bunlar genellikle y\u00f6nlendirme, veri \u00e7ekme ve sunucu etkile\u015fimleri gibi alanlarda kullan\u0131l\u0131r. \u00d6rne\u011fin, SolidJS’in kalbinde yatan ve SolidStart uygulamalar\u0131n\u0131z\u0131n temelini olu\u015fturan reaktivite primitiflerini ve bunlar\u0131n hook versiyonlar\u0131n\u0131 daha yak\u0131ndan inceleyelim.<\/p>\n Say\u0131m: {count()}<\/p>\n SolidStart’\u0131n Rol\u00fc: Meta-\u00c7er\u00e7eve Avantajlar\u0131<\/h4>\n
Neden SolidStart Hooks Kullanmal\u0131y\u0131z?<\/h4>\n
\n
SolidStart Hooks’a Genel Bak\u0131\u015f<\/h3>\n
Hooks Nedir ve Ne \u0130\u015fe Yarar?<\/h4>\n
Temel SolidJS Reaktivite Primitifleri: Sinyaller, Efektler, Memolar<\/h4>\n
\n
createSignal<\/code>):<\/strong> De\u011fi\u015febilir bir de\u011feri ve bu de\u011fer de\u011fi\u015fti\u011finde ba\u011f\u0131ml\u0131 olan her \u015feyi otomatik olarak g\u00fcncelleyen bir mekanizma sa\u011flar.<\/li>\ncreateEffect<\/code>):<\/strong> Bir veya daha fazla reaktif ba\u011f\u0131ml\u0131l\u0131k de\u011fi\u015fti\u011finde belirli bir yan etkiyi (konsola yazd\u0131rma, API \u00e7a\u011fr\u0131s\u0131 yapma vb.) \u00e7al\u0131\u015ft\u0131rmak i\u00e7in kullan\u0131l\u0131r.<\/li>\ncreateMemo<\/code>):<\/strong> Bir veya daha fazla reaktif ba\u011f\u0131ml\u0131l\u0131\u011fa dayal\u0131 olarak hesaplanm\u0131\u015f bir de\u011feri \u00f6nbelle\u011fe al\u0131r. Ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fmedi\u011fi s\u00fcrece hesaplama yeniden yap\u0131lmaz, bu da performans\u0131 art\u0131r\u0131r.<\/li>\n<\/ul>\nSolidStart’\u0131n Sa\u011flad\u0131\u011f\u0131 Ek Hooks<\/h4>\n
useParams<\/code> ile URL parametrelerine eri\u015febilir, useRouteData<\/code> ile sunucu taraf\u0131ndan y\u00fcklenmi\u015f verilere ula\u015fabiliriz.<\/p>\nTemel Reaktivite Hooks’lar\u0131<\/h3>\n
createSignal<\/code>: Durum Y\u00f6netiminin Kalbi<\/h4>\ncreateSignal<\/code>, SolidJS’te reaktif durum olu\u015fturman\u0131n en temel yoludur. Bir getter (okuyucu) ve bir setter (yaz\u0131c\u0131) fonksiyonu d\u00f6nd\u00fcr\u00fcr. Getter’\u0131 \u00e7a\u011f\u0131rd\u0131\u011f\u0131n\u0131zda mevcut de\u011feri al\u0131rs\u0131n\u0131z ve setter’\u0131 \u00e7a\u011f\u0131rd\u0131\u011f\u0131n\u0131zda de\u011feri g\u00fcncellersiniz.<\/p>\n\nimport { createSignal } from \"solid-js\";\n\nfunction Counter() {\n const [count, setCount] = createSignal(0);\n\n return (\n