React Hookok

A React hookok a React 16.8 verziójában kerültek bevezetésre, és lehetővé teszik, hogy a funkcionális komponensek állapotkezelést és életciklus-műveleteket végezzenek. Két alapvető hook, a useState és useEffect, alapvető fontosságúak a modern React fejlesztésben.

useState

Mi az a useState?

A useState hook egy állapotváltozót és egy állapotfrissítő függvényt ad vissza. Használata egyszerű, és lehetővé teszi, hogy a funkcionális komponensek állapotot kezeljenek anélkül, hogy osztályokat kellene használni.

Szintaxis

const [state, setState] = useState<T>(initialValue);

• state: az aktuális állapot értéke
• setState: az állapot frissítésére szolgáló függvény
• T: az állapot típusát jelöli (TypeScript esetén)
• initialValue: az állapot kezdeti értéke

1. példa

Ez a React példa egy egyszerű alkalmazást valósít meg, amely egy felhasználó által beírt számot vesz be, és egy gombnyomásra kiszámítja és megjeleníti annak négyzetét. Az állapotkezeléshez a useState hookot használja, míg az eredmény megjelenítésére egy React komponens elemet alkalmaz. Az alkalmazás tartalmaz egy bemeneti mezőt, egy gombot a számítás indításához, és egy linket, amely az eredményt mutatja.

import React, { useState } from 'react';

function App() {
    const [szam, setSzam] = useState<number>(0);
    const [eredmeny, setEredmeny] = useState<string>('');

    const onBtnClick = () => {
        setEredmeny(`Az eredmény: ${szam * szam}`);
    };

    return (
        <div>
            <input
                type="number"
                placeholder="Add meg a számot"
                onChange={(e) => setSzam(Number(e.target.value))}
            />

            <button onClick={onBtnClick}>Számítás</button>

            <br />

            <h2>{eredmeny}</h2>
        </div>
    );
}

export default App;

2. példa

Ez a React példa egy egyszerű összeadó alkalmazást valósít meg, ahol a felhasználó két számot adhat meg két külön bemeneti mezőben. A gomb megnyomásával az onBtnClick függvény összeadja a két számot, és az eredményt megjeleníti az alkalmazásban. Az állapotkezeléshez a useState hookot használja mindkét számhoz és az eredményhez.

import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [elso, setElso] = useState<number>(0);
  const [masodik, setMasodik] = useState<number>(0);
  const [eredmeny, setEredmeny] = useState<string>("");

  const onBtnClick = () => {
    setEredmeny(`Az eredmény: ${elso + masodik}`);
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        {eredmeny}

        <input
          type="number"
          placeholder="Add meg az 1. számot"
          onChange={(e) => setElso(Number(e.target.value))}
        />

        {"+"}

        <input
          type="number"
          placeholder="Add meg az 2. számot"
          onChange={(e) => setMasodik(Number(e.target.value))}
        />

        <button onClick={onBtnClick}>Összead</button>
      </header>
    </div>
  );
}

export default App;

useRef

A useRef egy olyan hook React-ben, amelyet arra használunk, hogy közvetlen hozzáférést biztosítson egy komponens DOM eleméhez vagy tároljon egy változót úgy, hogy annak megváltozása ne okozzon újrarenderelést.

Mire jó a useRef?

1. DOM elemek elérése: A useRef segítségével közvetlenül hozzáférhetünk a DOM elemekhez. Például egy input mezőhöz hozzáadhatunk egy ref-et, hogy gyorsan elérhessük az értékét, módosíthassuk annak stílusát, vagy fókuszt állíthassunk be rajta.
2. Nem újrarenderelődő változók tárolása: A useRef megőrzi az értéket két renderelés között, és nem okoz új renderelést, ha az érték megváltozik. Ez akkor hasznos, ha egy változót nyomon kell követnünk a komponens élettartama alatt, de nem szeretnénk, hogy a változás befolyásolja a felhasználói felületet.

Hogyan működik a useRef?

Amikor létrehozunk egy ref-et a useRef segítségével, egy objektumot kapunk vissza, amelynek van egy current nevű tulajdonsága. Ezen keresztül érhetjük el és módosíthatjuk a ref értékét.

useEffect

A useEffect egy olyan hook React-ben, amely lehetővé teszi, hogy mellékhatásokat (side effects) kezeljünk a funkcionális komponensekben. A mellékhatások olyan műveletek, amelyek nem közvetlenül kapcsolódnak a komponens rendereléséhez, például adatlekérés, eseménykezelés vagy időzítők beállítása.

Mire jó a useEffect?

1. Adatlekérés: A useEffect segítségével könnyedén lekérhetünk adatokat egy API-ból, amikor a komponens betöltődik vagy frissül.
2. Eseménykezelés: A useEffect segítségével eseményeket figyelhetünk, például ablakméret változását vagy görgetést.
3. Időzítők beállítása: A useEffect segítségével időzítőket állíthatunk be, például egy adott idő után végrehajtandó műveleteket.
4. Takarítás (cleanup): A useEffect lehetőséget ad arra, hogy takarító műveleteket végezzünk, például eseményfigyelők eltávolítását vagy időzítők törlését, amikor a komponens eltávolításra kerül vagy frissül.