{"id":3544,"date":"2024-11-10T22:00:26","date_gmt":"2024-11-10T19:00:26","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/"},"modified":"2024-11-10T22:00:26","modified_gmt":"2024-11-10T19:00:26","slug":"react-18de-bilmeniz-gereken-15-temel-hook-orneklerle","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/","title":{"rendered":"React 18&#8217;de Bilmeniz Gereken 15 Temel Hook (\u00d6rneklerle)"},"content":{"rendered":"<p>React 18&#8217;de Bilmeniz Gereken 15 Temel Hook (\u00d6rneklerle)<\/p>\n<p>React 18,  uygulama geli\u015ftirme deneyimini iyile\u015ftiren bir\u00e7ok yeni \u00f6zellik ve geli\u015ftirmeyle geldi. Bu yeni \u00f6zelliklerden biri de **Hooks**&#8217;tur. Hooks, React bile\u015fenleri i\u00e7indeki mant\u0131\u011f\u0131 ve durumu y\u00f6netmek i\u00e7in daha esnek ve yeniden kullan\u0131labilir bir yol sunar. Bu makalede, React 18&#8217;de kullanabilece\u011finiz 15 temel Hook&#8217;u ve \u00f6rnekleriyle birlikte inceleyece\u011fiz. <\/p>\n<h2>useState Hook<\/h2>\n<p><code>useState<\/code> Hook, bir bile\u015fenin i\u00e7indeki durumu y\u00f6netmenizi sa\u011flar. Bu hook, bir durum de\u011feri ve bu de\u011feri g\u00fcncellemek i\u00e7in bir fonksiyon d\u00f6nd\u00fcr\u00fcr. <\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useState } from &#8216;react&#8217;;<\/p>\n<p>function Counter() {<br \/>\n  const [count, setCount] = useState(0);<\/p>\n<p>  return (<\/p>\n<div>\n<p>Sayac: {count}<\/p>\n<p>      <button onClick={() => setCount(count + 1)}>Artt\u0131r<\/button>\n    <\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default Counter;<br \/>\n&#8220;`<\/p>\n<p>Bu \u00f6rnekte, <code>useState<\/code> hook&#8217;u kullanarak <code>count<\/code> adl\u0131 bir durum de\u011fi\u015fkeni olu\u015fturuyoruz. <code>setCount<\/code> fonksiyonunu kullanarak <code>count<\/code> de\u011fi\u015fkenini g\u00fcncelliyoruz.  Her t\u0131klamada, <code>count<\/code> de\u011feri 1 art\u0131r\u0131l\u0131yor ve sayfa g\u00fcncelleniyor. <\/p>\n<h2>useEffect Hook<\/h2>\n<p><code>useEffect<\/code> Hook, bir bile\u015fenin yan etkilerini (side effects) y\u00f6netmenizi sa\u011flar.  Yan etkiler, bir bile\u015fenin DOM ile etkile\u015fime girmesi veya a\u011f istekleri g\u00f6ndermesi gibi i\u015flemlerdir. <\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useState, useEffect } from &#8216;react&#8217;;<\/p>\n<p>function FetchData() {<br \/>\n  const [data, setData] = useState(null);<\/p>\n<p>  useEffect(() => {<br \/>\n    fetch(&#8216;https:\/\/api.example.com\/data&#8217;)<br \/>\n      .then(response => response.json())<br \/>\n      .then(data => setData(data));<br \/>\n  }, []);<\/p>\n<p>  return (<\/p>\n<div>\n      {data &#038;&#038; (<\/p>\n<ul>\n          {data.map(item => (<\/p>\n<li key={item.id}>{item.name}<\/li>\n<p>          ))}\n        <\/ul>\n<p>      )}\n    <\/p><\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default FetchData;<br \/>\n&#8220;`<\/p>\n<p>Bu \u00f6rnekte, <code>useEffect<\/code> hook&#8217;u kullanarak bir API&#8217;den veri \u00e7ekiyoruz. <code>useEffect<\/code> i\u00e7indeki kod, bile\u015fen ilk kez render edildi\u011finde \u00e7al\u0131\u015ft\u0131r\u0131l\u0131yor.  <code>data<\/code> durum de\u011fi\u015fkeni, al\u0131nan verileri tutuyor ve sayfa g\u00fcncelleniyor. <\/p>\n<h2>useContext Hook<\/h2>\n<p><code>useContext<\/code> Hook, bir bile\u015fenin React Context&#8217;indeki de\u011fere eri\u015fmesini sa\u011flar. Context, React uygulamalar\u0131nda veri payla\u015f\u0131m\u0131 i\u00e7in kullan\u0131lan bir mekanizmad\u0131r. <\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { createContext, useContext, useState } from &#8216;react&#8217;;<\/p>\n<p>const ThemeContext = createContext();<\/p>\n<p>function ThemeProvider({ children }) {<br \/>\n  const [theme, setTheme] = useState(&#8216;light&#8217;);<\/p>\n<p>  return (<br \/>\n    <ThemeContext.Provider value={{ theme, setTheme }}><br \/>\n      {children}<br \/>\n    <\/ThemeContext.Provider><br \/>\n  );<br \/>\n}<\/p>\n<p>function ThemeConsumer() {<br \/>\n  const { theme, setTheme } = useContext(ThemeContext);<\/p>\n<p>  return (<\/p>\n<div>\n<p>Tema: {theme}<\/p>\n<p>      <button onClick={() => setTheme(theme === &#8216;light&#8217; ? &#8216;dark&#8217; : &#8216;light&#8217;)}><br \/>\n        Temay\u0131 De\u011fi\u015ftir<br \/>\n      <\/button>\n    <\/div>\n<p>  );<br \/>\n}<\/p>\n<p>function App() {<br \/>\n  return (<br \/>\n    <ThemeProvider><br \/>\n      <ThemeConsumer \/><br \/>\n    <\/ThemeProvider><br \/>\n  );<br \/>\n}<\/p>\n<p>export default App;<br \/>\n&#8220;`<\/p>\n<p>Bu \u00f6rnekte, <code>ThemeContext<\/code> ad\u0131nda bir context olu\u015fturuyoruz.  <code>ThemeProvider<\/code> bile\u015feni, <code>ThemeContext<\/code>&#8216;i kullanarak bir tema de\u011feri ve bu de\u011feri g\u00fcncellemek i\u00e7in bir fonksiyon sa\u011fl\u0131yor. <code>ThemeConsumer<\/code> bile\u015feni, <code>useContext<\/code> hook&#8217;u kullanarak <code>ThemeContext<\/code>&#8216;teki de\u011fere eri\u015ferek tema de\u011ferini g\u00f6r\u00fcnt\u00fcl\u00fcyor ve bu de\u011feri g\u00fcncelleyebiliyor. <\/p>\n<h2>useRef Hook<\/h2>\n<p><code>useRef<\/code> Hook, bir bile\u015fenin DOM elemanlar\u0131na veya di\u011fer de\u011ferlere bir referans olu\u015fturman\u0131z\u0131 sa\u011flar. <\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useRef } from &#8216;react&#8217;;<\/p>\n<p>function FocusInput() {<br \/>\n  const inputRef = useRef(null);<\/p>\n<p>  const handleClick = () => {<br \/>\n    inputRef.current.focus();<br \/>\n  };<\/p>\n<p>  return (<\/p>\n<div>\n      <input type=\"text\" ref={inputRef} \/><br \/>\n      <button onClick={handleClick}>Giri\u015fi Odakla<\/button>\n    <\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default FocusInput;<br \/>\n&#8220;`<\/p>\n<p>Bu \u00f6rnekte, <code>useRef<\/code> hook&#8217;u kullanarak <code>inputRef<\/code> ad\u0131nda bir referans olu\u015fturuyoruz. <code>inputRef.current<\/code> ile input eleman\u0131na eri\u015febiliyoruz ve <code>handleClick<\/code> fonksiyonu ile input eleman\u0131n\u0131 odakl\u0131yoruz. <\/p>\n<h2>useCallback Hook<\/h2>\n<p><code>useCallback<\/code> Hook, bir fonksiyonu belle\u011fe alman\u0131za (cache) yard\u0131mc\u0131 olur. Bu, fonksiyonun ayn\u0131 arg\u00fcmanlar i\u00e7in tekrar tekrar yeniden olu\u015fturulmas\u0131n\u0131 \u00f6nleyerek performans\u0131 art\u0131r\u0131r. <\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useCallback, useState } from &#8216;react&#8217;;<\/p>\n<p>function CounterWithCallback() {<br \/>\n  const [count, setCount] = useState(0);<\/p>\n<p>  const increment = useCallback(() => {<br \/>\n    setCount(count + 1);<br \/>\n  }, [count]);<\/p>\n<p>  return (<\/p>\n<div>\n<p>Sayac: {count}<\/p>\n<p>      <button onClick={increment}>Artt\u0131r<\/button>\n    <\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default CounterWithCallback;<br \/>\n&#8220;`<\/p>\n<p>Bu \u00f6rnekte, <code>useCallback<\/code> hook&#8217;u kullanarak <code>increment<\/code> fonksiyonunu belle\u011fe al\u0131yoruz. <code>increment<\/code> fonksiyonu, yaln\u0131zca <code>count<\/code> de\u011feri de\u011fi\u015fti\u011finde yeniden olu\u015fturulacak. Bu, performans\u0131 art\u0131r\u0131r \u00e7\u00fcnk\u00fc <code>increment<\/code> fonksiyonu her render&#8217;da yeniden olu\u015fturulmuyor. <\/p>\n<h2>useMemo Hook<\/h2>\n<p><code>useMemo<\/code> Hook, bir de\u011feri belle\u011fe alman\u0131za (cache) yard\u0131mc\u0131 olur. Bu, de\u011ferin ayn\u0131 girdiler i\u00e7in tekrar tekrar hesaplanmas\u0131n\u0131 \u00f6nleyerek performans\u0131 art\u0131r\u0131r. <\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useMemo, useState } from &#8216;react&#8217;;<\/p>\n<p>function ExpensiveCalculation() {<br \/>\n  const [number, setNumber] = useState(0);<\/p>\n<p>  const expensiveCalculation = useMemo(() => {<br \/>\n    console.log(&#8216;Hesaplama yap\u0131l\u0131yor&#8230;&#8217;);<br \/>\n    return number * 10;<br \/>\n  }, [number]);<\/p>\n<p>  return (<\/p>\n<div>\n<p>Say\u0131: {number}<\/p>\n<p>      <input\n        type=\"number\"\n        value={number}\n        onChange={e => setNumber(parseInt(e.target.value))}<br \/>\n      \/><\/p>\n<p>Sonu\u00e7: {expensiveCalculation}<\/p>\n<\/p><\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default ExpensiveCalculation;<br \/>\n&#8220;`<\/p>\n<p>Bu \u00f6rnekte, <code>useMemo<\/code> hook&#8217;u kullanarak <code>expensiveCalculation<\/code> de\u011ferini belle\u011fe al\u0131yoruz. <code>expensiveCalculation<\/code>, yaln\u0131zca <code>number<\/code> de\u011feri de\u011fi\u015fti\u011finde yeniden hesaplanacak. Bu, performans\u0131 art\u0131r\u0131r \u00e7\u00fcnk\u00fc <code>expensiveCalculation<\/code> her render&#8217;da yeniden hesaplanm\u0131yor. <\/p>\n<h2>useReducer Hook<\/h2>\n<p><code>useReducer<\/code> Hook, karma\u015f\u0131k durum g\u00fcncellemelerini y\u00f6netmenizi sa\u011flar.  Bu hook, bir indirgeyici (reducer) fonksiyonu ve ba\u015flang\u0131\u00e7 durumu al\u0131r ve durum g\u00fcncellemek i\u00e7in bir fonksiyon d\u00f6nd\u00fcr\u00fcr. <\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useReducer } from &#8216;react&#8217;;<\/p>\n<p>const initialState = { count: 0 };<\/p>\n<p>const reducer = (state, action) => {<br \/>\n  switch (action.type) {<br \/>\n    case &#8216;INCREMENT&#8217;:<br \/>\n      return { count: state.count + 1 };<br \/>\n    case &#8216;DECREMENT&#8217;:<br \/>\n      return { count: state.count &#8211; 1 };<br \/>\n    default:<br \/>\n      return state;<br \/>\n  }<br \/>\n};<\/p>\n<p>function CounterWithReducer() {<br \/>\n  const [state, dispatch] = useReducer(reducer, initialState);<\/p>\n<p>  return (<\/p>\n<div>\n<p>Sayac: {state.count}<\/p>\n<p>      <button onClick={() => dispatch({ type: &#8216;INCREMENT&#8217; })}>Artt\u0131r<\/button><br \/>\n      <button onClick={() => dispatch({ type: &#8216;DECREMENT&#8217; })}>Azalt<\/button>\n    <\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default CounterWithReducer;<br \/>\n&#8220;`<\/p>\n<p>Bu \u00f6rnekte, <code>useReducer<\/code> hook&#8217;u kullanarak bir indirgeyici fonksiyonu ve ba\u015flang\u0131\u00e7 durumu tan\u0131mlayarak bir saya\u00e7 durumunu y\u00f6netiyoruz.  <code>dispatch<\/code> fonksiyonu, durum g\u00fcncellemek i\u00e7in kullan\u0131lan eylemleri (actions) tetikler. <\/p>\n<h2>useLayoutEffect Hook<\/h2>\n<p><code>useLayoutEffect<\/code> Hook, <code>useEffect<\/code> hook&#8217;una benzer ancak render sonras\u0131nda, ancak DOM g\u00fcncellenmeden \u00f6nce \u00e7al\u0131\u015f\u0131r. Bu, DOM ile etkile\u015fim gerektiren g\u00f6revler i\u00e7in faydal\u0131d\u0131r. <\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useLayoutEffect, useRef, useState } from &#8216;react&#8217;;<\/p>\n<p>function LayoutEffectExample() {<br \/>\n  const [width, setWidth] = useState(0);<br \/>\n  const divRef = useRef(null);<\/p>\n<p>  useLayoutEffect(() => {<br \/>\n    if (divRef.current) {<br \/>\n      setWidth(divRef.current.offsetWidth);<br \/>\n    }<br \/>\n  }, []);<\/p>\n<p>  return (<\/p>\n<div ref={divRef} style={{ width: width }}>\n<p>Geni\u015flik: {width}<\/p>\n<\/p><\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default LayoutEffectExample;<br \/>\n&#8220;`<\/p>\n<p>Bu \u00f6rnekte, <code>useLayoutEffect<\/code> hook&#8217;u kullanarak bir div eleman\u0131n\u0131n geni\u015fli\u011fini \u00f6l\u00e7\u00fcyoruz.  <code>useLayoutEffect<\/code>, DOM g\u00fcncellenmeden \u00f6nce \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in, div eleman\u0131n\u0131n do\u011fru geni\u015fli\u011fini elde edebiliyoruz. <\/p>\n<h2>useTransition Hook<\/h2>\n<p><code>useTransition<\/code> Hook, uzun s\u00fcren i\u015flemler s\u0131ras\u0131nda kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in kullan\u0131l\u0131r.  Bu hook, bir ge\u00e7i\u015f durumu (transition state) ve bir ba\u015flatma fonksiyonu d\u00f6nd\u00fcr\u00fcr. <\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useState, useTransition } from &#8216;react&#8217;;<\/p>\n<p>function TransitionExample() {<br \/>\n  const [isPending, startTransition] = useTransition();<br \/>\n  const [items, setItems] = useState([]);<\/p>\n<p>  const handleClick = () => {<br \/>\n    startTransition(() => {<br \/>\n      setItems([&#8230;items, Math.random()]);<br \/>\n    });<br \/>\n  };<\/p>\n<p>  return (<\/p>\n<div>\n      {isPending &#038;&#038; <\/p>\n<p>Ge\u00e7i\u015f yap\u0131l\u0131yor&#8230;<\/p>\n<p>}<\/p>\n<ul>\n        {items.map(item => (<\/p>\n<li key={item}>{item}<\/li>\n<p>        ))}\n      <\/ul>\n<p>      <button onClick={handleClick}>Eleman Ekle<\/button>\n    <\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default TransitionExample;<br \/>\n&#8220;`<\/p>\n<p>Bu \u00f6rnekte, <code>useTransition<\/code> hook&#8217;u kullanarak bir listeye rastgele eleman ekleme i\u015flemini geciktiriyoruz. <code>startTransition<\/code> fonksiyonu, ge\u00e7i\u015f i\u015flemini ba\u015flat\u0131yor ve <code>isPending<\/code> durumu, ge\u00e7i\u015f i\u015fleminin devam edip etmedi\u011fini g\u00f6steriyor.  Bu sayede, kullan\u0131c\u0131 deneyimini olumsuz etkilemeden listeye eleman ekleyebiliyoruz. <\/p>\n<h2>useId Hook<\/h2>\n<p><code>useId<\/code> Hook, bir bile\u015fenin i\u00e7indeki elemanlara benzersiz kimlikler olu\u015fturman\u0131z\u0131 sa\u011flar.  Bu, \u00f6zellikle dinamik olarak olu\u015fturulan i\u00e7eriklerde eri\u015filebilirli\u011fi iyile\u015ftirmek i\u00e7in faydal\u0131d\u0131r. <\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useId } from &#8216;react&#8217;;<\/p>\n<p>function Accordion() {<br \/>\n  const id = useId();<\/p>\n<p>  return (<\/p>\n<div>\n      <button aria-controls={`accordion-${id}`} aria-expanded=\"false\"><br \/>\n        Ba\u015fl\u0131k<br \/>\n      <\/button><\/p>\n<div id={`accordion-${id}`} hidden>\n        \u0130\u00e7erik\n      <\/div>\n<\/p><\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default Accordion;<br \/>\n&#8220;`<\/p>\n<p>Bu \u00f6rnekte, <code>useId<\/code> hook&#8217;u kullanarak dinamik olarak olu\u015fturulan bir akordeon bile\u015feni i\u00e7in benzersiz kimlikler olu\u015fturuyoruz.  Bu,  ekran okuyucular\u0131n\u0131n akordeon i\u00e7eri\u011fine eri\u015fimini sa\u011flamak i\u00e7in kullan\u0131l\u0131yor. <\/p>\n<h2>useDeferredValue Hook<\/h2>\n<p><code>useDeferredValue<\/code> Hook, bir de\u011ferin g\u00fcncellenmesini geciktirmenizi sa\u011flar.  Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in faydal\u0131d\u0131r, \u00e7\u00fcnk\u00fc bir de\u011fer g\u00fcncellenirken, kullan\u0131c\u0131 aray\u00fcz\u00fc gecikmeden g\u00fcncellenmeye devam edebilir. <\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useState, useDeferredValue } from &#8216;react&#8217;;<\/p>\n<p>function DeferredValueExample() {<br \/>\n  const [value, setValue] = useState(&#8221;);<br \/>\n  const deferredValue = useDeferredValue(value);<\/p>\n<p>  return (<\/p>\n<div>\n      <input\n        type=\"text\"\n        value={value}\n        onChange={e => setValue(e.target.value)}<br \/>\n      \/><\/p>\n<p>Gecikmeli De\u011fer: {deferredValue}<\/p>\n<\/p><\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default DeferredValueExample;<br \/>\n&#8220;`<\/p>\n<p>Bu \u00f6rnekte, <code>useDeferredValue<\/code> hook&#8217;u kullanarak bir input alan\u0131n\u0131n de\u011ferini geciktirerek, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn gecikmeden g\u00fcncellenmesini sa\u011fl\u0131yoruz. <\/p>\n<h2>useSyncExternalStore Hook<\/h2>\n<p><code>useSyncExternalStore<\/code> Hook, React&#8217;in d\u0131\u015f\u0131ndaki verileri senkronize etmenizi sa\u011flar.  Bu,  React&#8217;in d\u0131\u015f\u0131nda bulunan bir veri kayna\u011f\u0131 (\u00f6rne\u011fin bir veri deposu veya bir a\u011f iste\u011fi) taraf\u0131ndan g\u00fcncellenen verileri senkronize etmek i\u00e7in kullan\u0131l\u0131r. <\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useSyncExternalStore } from &#8216;react&#8217;;<\/p>\n<p>const getSnapshot = () => {<br \/>\n  \/\/ D\u0131\u015f veri kayna\u011f\u0131ndaki verileri al\u0131n<br \/>\n  const data = fetch(&#8216;https:\/\/api.example.com\/data&#8217;)<br \/>\n    .then(response => response.json());<br \/>\n  return data;<br \/>\n};<\/p>\n<p>const subscribe = (callback) => {<br \/>\n  \/\/ D\u0131\u015f veri kayna\u011f\u0131na abone olun ve callback fonksiyonunu \u00e7a\u011f\u0131r\u0131n<br \/>\n  \/\/ D\u0131\u015f veri kayna\u011f\u0131ndaki veriler g\u00fcncellendi\u011finde<br \/>\n};<\/p>\n<p>function ExternalData() {<br \/>\n  const data = useSyncExternalStore(subscribe, getSnapshot);<\/p>\n<p>  return (<\/p>\n<div>\n      {data &#038;&#038; (<\/p>\n<ul>\n          {data.map(item => (<\/p>\n<li key={item.id}>{item.name}<\/li>\n<p>          ))}\n        <\/ul>\n<p>      )}\n    <\/p><\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default ExternalData;<br \/>\n&#8220;`<\/p>\n<p>Bu \u00f6rnekte, <code>useSyncExternalStore<\/code> hook&#8217;u kullanarak bir API&#8217;den gelen verileri senkronize ediyoruz.  <code>getSnapshot<\/code> fonksiyonu, API&#8217;den verileri al\u0131yor ve <code>subscribe<\/code> fonksiyonu, API&#8217;deki veriler g\u00fcncellendi\u011finde bir callback fonksiyonunu tetikliyor.  <\/p>\n<h2>useEvent Hook<\/h2>\n<p><code>useEvent<\/code> Hook, bir olay\u0131 React i\u00e7indeki bir fonksiyona ba\u011flaman\u0131za olanak tan\u0131r.  Bu,  olay i\u015fleyicilerini temizleme ve React bile\u015fenlerinin d\u0131\u015f\u0131ndaki olaylara tepki verme gibi \u00e7e\u015fitli senaryolarda faydal\u0131d\u0131r. <\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useEvent, useState } from &#8216;react&#8217;;<\/p>\n<p>function EventHookExample() {<br \/>\n  const [count, setCount] = useState(0);<br \/>\n  const handleClick = useEvent(() => {<br \/>\n    setCount(count + 1);<br \/>\n  });<\/p>\n<p>  return (<\/p>\n<div>\n<p>Sayac: {count}<\/p>\n<p>      <button onClick={handleClick}>Artt\u0131r<\/button>\n    <\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default EventHookExample;<br \/>\n&#8220;`<\/p>\n<p>Bu \u00f6rnekte, <code>useEvent<\/code> hook&#8217;u kullanarak bir butona t\u0131kland\u0131\u011f\u0131nda bir sayac\u0131n artmas\u0131n\u0131 sa\u011fl\u0131yoruz.  <code>useEvent<\/code>, olay i\u015fleyicisinin her render&#8217;da yeniden olu\u015fturulmas\u0131n\u0131 \u00f6nleyerek performans\u0131 iyile\u015ftiriyor. <\/p>\n<h2>useInsertionEffect Hook<\/h2>\n<p><code>useInsertionEffect<\/code> Hook,  React&#8217;in DOM&#8217;a ilk kez girdi\u011finde \u00e7al\u0131\u015fan bir yan etki (side effect) olu\u015fturman\u0131z\u0131 sa\u011flar.  Bu hook, bir bile\u015fenin ilk render&#8217;\u0131nda DOM&#8217;a eklenen \u00f6zel DOM d\u00fc\u011f\u00fcmlerinin olu\u015fturulmas\u0131 gibi senaryolarda kullan\u0131l\u0131r. <\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useInsertionEffect, useRef } from &#8216;react&#8217;;<\/p>\n<p>function InsertionEffectExample() {<br \/>\n  const divRef = useRef(null);<\/p>\n<p>  useInsertionEffect(() => {<br \/>\n    const div = divRef.current;<br \/>\n    \/\/ DOM&#8217;a \u00f6zel bir DOM d\u00fc\u011f\u00fcm\u00fc ekleyin<br \/>\n  });<\/p>\n<p>  return (<\/p>\n<div ref={divRef}>\n<p>\u0130\u00e7erik<\/p>\n<\/p><\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default InsertionEffectExample;<br \/>\n&#8220;`<\/p>\n<p>Bu \u00f6rnekte, <code>useInsertionEffect<\/code> hook&#8217;u kullanarak DOM&#8217;a \u00f6zel bir DOM d\u00fc\u011f\u00fcm\u00fc ekliyoruz. <\/p>\n<p>## Sonu\u00e7<\/p>\n<p>React 18&#8217;de sunulan yeni Hooks&#8217;lar, React geli\u015ftirme deneyimini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde iyile\u015ftiriyor.  Bu makalede, en yayg\u0131n kullan\u0131lan 15 temel Hook&#8217;u ve \u00f6rnekleriyle birlikte ele ald\u0131k.  Bu Hooks&#8217;lar, React uygulamalar\u0131nda karma\u015f\u0131k durum y\u00f6netimi, yan etkiler, performans optimizasyonu ve daha bir\u00e7ok i\u015flemi ger\u00e7ekle\u015ftirmenize yard\u0131mc\u0131 olur.  <\/p>\n<p>Daha fazla bilgi edinmek i\u00e7in,  React belgelerini ziyaret edebilirsiniz: <a href=\"https:\/\/reactjs.org\/\">https:\/\/reactjs.org\/<\/a>.  Kendi React projelerinizi geli\u015ftirmek i\u00e7in ise <a href=\"https:\/\/fatihsoysal.com\">fatihsoysal.com<\/a> adresindeki kaynaklar\u0131 inceleyebilirsiniz.<\/p>\n<p>#Etiketler<br \/>\nReact, Hooks, React 18, useState, useEffect, useContext, useRef, useCallback, useMemo, useReducer, useLayoutEffect, useTransition, useId, useDeferredValue, useSyncExternalStore, useEvent, useInsertionEffect<\/p>\n","protected":false},"excerpt":{"rendered":"React 18&#8217;de Bilmeniz Gereken 15 Temel Hook (\u00d6rneklerle) React 18, uygulama geli\u015ftirme deneyimini iyile\u015ftiren bir\u00e7ok yeni \u00f6zellik ve&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-3544","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React 18&#039;de Bilmeniz Gereken 15 Temel Hook (\u00d6rneklerle)<\/title>\n<meta name=\"description\" content=\"React 18, uygulama geli\u015ftirme deneyimini iyile\u015ftiren bir\u00e7ok yeni \u00f6zellik ve geli\u015ftirmeyle geldi. Bu yeni \u00f6zelliklerden biri de **Hooks**&#039;tur. Hooks, React bile\u015fenleri i\u00e7indeki mant\u0131\u011f\u0131 ve durumu y\u00f6netmek i\u00e7in daha esnek ve yeniden kullan\u0131labilir bir yol sunar. Bu makalede, React 18&#039;de kullanabilece\u011finiz 15 temel Hook&#039;u ve \u00f6rnekleriyle birlikte inceleyece\u011fiz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React 18&#039;de Bilmeniz Gereken 15 Temel Hook (\u00d6rneklerle)\" \/>\n<meta property=\"og:description\" content=\"React 18, uygulama geli\u015ftirme deneyimini iyile\u015ftiren bir\u00e7ok yeni \u00f6zellik ve geli\u015ftirmeyle geldi. Bu yeni \u00f6zelliklerden biri de **Hooks**&#039;tur. Hooks, React bile\u015fenleri i\u00e7indeki mant\u0131\u011f\u0131 ve durumu y\u00f6netmek i\u00e7in daha esnek ve yeniden kullan\u0131labilir bir yol sunar. Bu makalede, React 18&#039;de kullanabilece\u011finiz 15 temel Hook&#039;u ve \u00f6rnekleriyle birlikte inceleyece\u011fiz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-10T19:00:26+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React 18&#8217;de Bilmeniz Gereken 15 Temel Hook (\u00d6rneklerle)\",\"datePublished\":\"2024-11-10T19:00:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/\"},\"wordCount\":1612,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/#respond\"]}],\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/\",\"name\":\"React 18'de Bilmeniz Gereken 15 Temel Hook (\u00d6rneklerle)\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2024-11-10T19:00:26+00:00\",\"description\":\"React 18, uygulama geli\u015ftirme deneyimini iyile\u015ftiren bir\u00e7ok yeni \u00f6zellik ve geli\u015ftirmeyle geldi. Bu yeni \u00f6zelliklerden biri de **Hooks**'tur. Hooks, React bile\u015fenleri i\u00e7indeki mant\u0131\u011f\u0131 ve durumu y\u00f6netmek i\u00e7in daha esnek ve yeniden kullan\u0131labilir bir yol sunar. Bu makalede, React 18'de kullanabilece\u011finiz 15 temel Hook'u ve \u00f6rnekleriyle birlikte inceleyece\u011fiz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React 18&#8217;de Bilmeniz Gereken 15 Temel Hook (\u00d6rneklerle)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React 18'de Bilmeniz Gereken 15 Temel Hook (\u00d6rneklerle)","description":"React 18, uygulama geli\u015ftirme deneyimini iyile\u015ftiren bir\u00e7ok yeni \u00f6zellik ve geli\u015ftirmeyle geldi. Bu yeni \u00f6zelliklerden biri de **Hooks**'tur. Hooks, React bile\u015fenleri i\u00e7indeki mant\u0131\u011f\u0131 ve durumu y\u00f6netmek i\u00e7in daha esnek ve yeniden kullan\u0131labilir bir yol sunar. Bu makalede, React 18'de kullanabilece\u011finiz 15 temel Hook'u ve \u00f6rnekleriyle birlikte inceleyece\u011fiz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/","og_locale":"tr_TR","og_type":"article","og_title":"React 18'de Bilmeniz Gereken 15 Temel Hook (\u00d6rneklerle)","og_description":"React 18, uygulama geli\u015ftirme deneyimini iyile\u015ftiren bir\u00e7ok yeni \u00f6zellik ve geli\u015ftirmeyle geldi. Bu yeni \u00f6zelliklerden biri de **Hooks**'tur. Hooks, React bile\u015fenleri i\u00e7indeki mant\u0131\u011f\u0131 ve durumu y\u00f6netmek i\u00e7in daha esnek ve yeniden kullan\u0131labilir bir yol sunar. Bu makalede, React 18'de kullanabilece\u011finiz 15 temel Hook'u ve \u00f6rnekleriyle birlikte inceleyece\u011fiz.","og_url":"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2024-11-10T19:00:26+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"8 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React 18&#8217;de Bilmeniz Gereken 15 Temel Hook (\u00d6rneklerle)","datePublished":"2024-11-10T19:00:26+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/"},"wordCount":1612,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/#respond"]}],"copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/","url":"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/","name":"React 18'de Bilmeniz Gereken 15 Temel Hook (\u00d6rneklerle)","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2024-11-10T19:00:26+00:00","description":"React 18, uygulama geli\u015ftirme deneyimini iyile\u015ftiren bir\u00e7ok yeni \u00f6zellik ve geli\u015ftirmeyle geldi. Bu yeni \u00f6zelliklerden biri de **Hooks**'tur. Hooks, React bile\u015fenleri i\u00e7indeki mant\u0131\u011f\u0131 ve durumu y\u00f6netmek i\u00e7in daha esnek ve yeniden kullan\u0131labilir bir yol sunar. Bu makalede, React 18'de kullanabilece\u011finiz 15 temel Hook'u ve \u00f6rnekleriyle birlikte inceleyece\u011fiz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-18de-bilmeniz-gereken-15-temel-hook-orneklerle\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React 18&#8217;de Bilmeniz Gereken 15 Temel Hook (\u00d6rneklerle)"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/3544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=3544"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/3544\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=3544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=3544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=3544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}