React Hooks: useState ve useEffect Sade Anlatım

https://tsh.io/wp-content/uploads/2020/10/react-hooks-best-practices-lead_.jpg

useState

Bir array döndürür. biri “state” variable diğeri de “setState” fonksiyonu. Böylece hem bir değer set edebilir hem set ettiğimiz değeri güncelleyebiliriz.

import React from 'react'
import { useState } from 'react'

function App() {
  const [number, setNumber] = useState(() => {
    return 4
  })
  function decrementNumber() {
    setNumber(number -1 )
  }
  function incrementNumber() {
    setNumber(number+1)
  }
  return (
    <div>
      <button onClick={decrementNumber}>-</button>
      {number}
      <button onClick={incrementNumber}>+</button>
    </div>
  )
}
export default App

useEffect

side effect yönetimi yapmamızı sağlar, sitede bir şey değiştirdiğimizde, render’a sebep olduğumuzda, useEffect içine koyduğumuz kodun çalıştırılmasına sebep oluruz.

İkinci parametresi dinleyeceği değişkeni belirler. Boş bırakırsan sadece başlangıçta çalışır. (onMount)

useEffect olmasaydı her yaptığımız değişiklikten sonra sayfayı yenilememiz gerekecekti. Bu da günlük hayatta yapmak istemediğimiz bir şey.

Örnek kullanım alanı. API ile useEffect nasıl kullanılır:

import React from 'react'
import { useState, useEffect } from 'react'

function App() {
  const [resourceType, setResourceType] = useState(() => {
    return 'posts'
  })
  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/${resourceType}`)
      .then(response => response.json())
      .then(json => console.log(json))
  }, [resourceType])
  return (
    <div>
      <button onClick={() => { setResourceType('post') }}>Posts</button>
      <button onClick={() => { setResourceType('users') }}>Users</button>
      <button onClick={() => { setResourceType('comments') }}>Comments</button>
      <div>
        {resourceType}
      </div>
    </div>
  )
}
export default App

Bu kod, her butona basıldığında resourseType’ı günceller ve bunun neticesinde fetch edilecek API adresinde güncelleme yapar.

User butonuna basarsız, resourceType User’a set edilir ve https://jsonplaceholder.typicode.com/User API fetch edilir.

useEffect içinde return kullanırsanız, hook tetiklendiğinde ilk return içindeki kod çağrılır çünkü bu bir temizlik anlamına gelir.

useEffect icinde eventlistener eklersen return içinde bunu kaldırman gerekir. Aksi taktirde her defasında eventlistener eklemeye çalışır.

import React from 'react'
import { useState, useEffect } from 'react'

function App() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
  const handleResize = () => {
    setWindowWidth(window.innerWidth)
  }
  useEffect(() => {
    window.addEventListener('resize', handleResize)
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  },[])
  return (
    <div>
     {windowWidth}
    </div>
  )
}
export default App

useRef

useState gibi ama compenenti tekrar render etmez. Bu durumda da uygulamamızda görünüşü etkilemeyecek değerlerin saklanmasına olanak sağlar. useState’de render’a sebep olduğumuz için sakladığımız değerler kaybolabilir. useRef ile bunun önüne geçmiş oluruz.

import { useRef } from 'react';

export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
    alert('You clicked ' + ref.current + ' times!');
  }

  return (
    <button onClick={handleClick}>
      Click me!
    </button>
  );
}

Ayrıca ek olarak DOM manipulasyonu yapmaya da olanak sağlar. Bu konuda detaylı bilgi için: https://react.dev/reference/react/useRef