{"id":8165,"date":"2024-12-31T01:00:12","date_gmt":"2024-12-30T22:00:12","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-js-hookslarini-anlamak-detayli-bir-rehber\/"},"modified":"2024-12-31T01:00:12","modified_gmt":"2024-12-30T22:00:12","slug":"react-js-hookslarini-anlamak-detayli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-js-hookslarini-anlamak-detayli-bir-rehber\/","title":{"rendered":"React JS Hooks’lar\u0131n\u0131 Anlamak: Detayl\u0131 Bir Rehber"},"content":{"rendered":"

<\/p>\n

React JS Hooks’lar\u0131n\u0131 Anlamak: Detayl\u0131 Bir Rehber<\/p>\n

React 16.8 s\u00fcr\u00fcm\u00fcyle birlikte gelen Hooks’lar, fonksiyonel bile\u015fenlerde state ve di\u011fer React \u00f6zelliklerine eri\u015fim sa\u011flayan bir mekanizmad\u0131r. Bu sayede, fonksiyonel bile\u015fenler class bile\u015fenlerin g\u00fcc\u00fcne sahip olur ve kod okunabilirli\u011fi artar. Basit\u00e7e ifade etmek gerekirse, Hooks’lar fonksiyonel bile\u015fenlere state ve lifecycle metodlar\u0131 eklemenizi sa\u011flar.<\/p>\n

useState Hook’u: State Y\u00f6netimi<\/h2>\n

useState<\/code> hook’u, fonksiyonel bile\u015fenlerde state y\u00f6netimi i\u00e7in kullan\u0131l\u0131r. Bir state de\u011fi\u015fkeni ve onu g\u00fcncellemek i\u00e7in bir fonksiyon d\u00f6nd\u00fcr\u00fcr. \u0130\u015fte basit bir \u00f6rnek:<\/p>\n

\nimport React, { useState } from 'react';\n\nfunction Sayac() {\n  const [sayac, sayaciDegistir] = useState(0);\n\n  return (\n    <div>\n      <p>Sayac: {sayac}<\/p>\n      <button onClick={() => sayaciDegistir(sayac + 1)}>Artt\u0131r<\/button>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
Bu \u00f6rnekte, useState(0)<\/code> ile ba\u015flang\u0131\u00e7 de\u011feri 0 olan bir sayac<\/code> state de\u011fi\u015fkeni olu\u015fturulur.  sayaciDegistir<\/code> fonksiyonu ise bu de\u011fi\u015fkenin de\u011ferini g\u00fcncellememizi sa\u011flar.  Sonu\u00e7 olarak, butona her t\u0131klamada sayac de\u011feri bir artar.<\/p>\n
useEffect Hook’u: Yan Etkiler ve Lifecycle Metodlar\u0131<\/h2>\n
useEffect<\/code> hook’u, fonksiyonel bile\u015fenlerde yan etkileri (\u00f6rne\u011fin, API \u00e7a\u011fr\u0131lar\u0131, abonelikler) y\u00f6netmek i\u00e7in kullan\u0131l\u0131r.  Bu, class bile\u015fenlerindeki componentDidMount<\/code>, componentDidUpdate<\/code> ve componentWillUnmount<\/code> lifecycle metodlar\u0131n\u0131n yerini al\u0131r.  useEffect<\/code>, bir fonksiyon ve iste\u011fe ba\u011fl\u0131 olarak bir ba\u011f\u0131ml\u0131l\u0131k dizisi al\u0131r.<\/p>\n
\nimport React, { useState, useEffect } from 'react';\n\nfunction VeriGetir() {\n  const [veri, veriyiDegistir] = useState(null);\n\n  useEffect(() => {\n    fetch('https:\/\/api.example.com\/veri')\n      .then(response => response.json())\n      .then(data => veriyiDegistir(data));\n  }, []); \/\/ Bo\u015f dizi, bile\u015fen ilk render edildi\u011finde sadece bir kere \u00e7al\u0131\u015ft\u0131r\u0131r.\n}\n<\/code><\/pre>\n
Bu \u00f6rnekte, useEffect<\/code> hook’u, https:\/\/api.example.com\/veri<\/code> adresinden veri \u00e7ekmek i\u00e7in kullan\u0131l\u0131r.  Bo\u015f ba\u011f\u0131ml\u0131l\u0131k dizisi sayesinde, bu i\u015flem sadece bile\u015fen ilk render edildi\u011finde bir kez ger\u00e7ekle\u015fir.  Ba\u011f\u0131ml\u0131l\u0131k dizisine de\u011fi\u015fkenler eklenirse, bu de\u011fi\u015fkenler de\u011fi\u015fti\u011finde useEffect tekrar \u00e7al\u0131\u015f\u0131r.<\/p>\n
useContext Hook’u: Context API ile \u00c7al\u0131\u015fmak<\/h2>\n
useContext<\/code> hook’u, React’in Context API’sini kullanarak bile\u015fenler aras\u0131nda veri payla\u015fmay\u0131 kolayla\u015ft\u0131r\u0131r.  Bu, prop drilling’i \u00f6nleyerek kodun daha temiz ve okunabilir olmas\u0131n\u0131 sa\u011flar.  Bir context nesnesi al\u0131r ve bu context’in de\u011ferini d\u00f6nd\u00fcr\u00fcr.<\/p>\n
\u00d6rnek olarak,  bir tema de\u011fi\u015ftirme \u00f6zelli\u011finde useContext kullan\u0131m\u0131 olduk\u00e7a pratiktir.  Detayl\u0131 \u00f6rnekler i\u00e7in resmi React d\u00f6k\u00fcmantasyonuna<\/a> g\u00f6z atabilirsiniz.<\/p>\n
Sonu\u00e7 olarak;<\/strong> React Hooks’lar\u0131, fonksiyonel bile\u015fenlerin daha g\u00fc\u00e7l\u00fc ve kullan\u0131\u015fl\u0131 hale gelmesini sa\u011flayan \u00f6nemli bir \u00f6zelliktir.  useState<\/code>, useEffect<\/code> ve useContext<\/code> gibi temel Hooks’lar\u0131 anlamak, React ile daha etkili bir \u015fekilde geli\u015ftirme yapman\u0131z\u0131 sa\u011flayacakt\u0131r.  Daha fazla bilgi i\u00e7in web sitemi<\/a> ziyaret edebilirsiniz.<\/p>\n
Daha fazla Hooks ve React hakk\u0131nda daha detayl\u0131 bilgi edinmek i\u00e7in a\u015fa\u011f\u0131daki kaynaklar\u0131 inceleyebilirsiniz:<\/p>\n