Czym jest useRef?

useRef to hook, który pozwala na stworzenie obiektu, którego referencja jest stała. Nawet wtedy, gdy komponent jest renderowany na nowo. Dodatkowo zmiana wartości obiektu zwróconego przez ten hook nie powoduje przerysowania komponentu.

Składnia:

const ref = useRef(some-value);

useRef przyjmuje jeden parametr. Jest to początkowa wartość, jaką będzie przechowywać stworzona referencja. Zwracany jest obiekt, który zawiera właściwość: current. Ta właściwość przechowuje wartość, którą podaliśmy przy wywołaniu useRef.

Do czego użyć useRef?

Użycie tego hook'a jest przydatne kiedy potrzebujesz przechować jakieś informacje, które nie będą wyświetlane na ekranie. Może to być na przykład ID timer'a itp.

Drugim przypadkiem, kiedy możemy wykorzystać useRef jest, gdy potrzebujemy robić jakieś zmiany w DOM. Przy użyciu tego hook'a tworzymy referencję do danego elementu i mamy do niego dostęp.

Przykłady użycia useRef

Przykład 1

import React, { useRef } from 'react';

const App = () => {
    const counter = useRef(0);

    const handle = () => {
        counter.current++;
        console.log(`Button was clicked ${counter.current} times!`);
    }
    return (
        <>
            <button onClick={handle}>Click me</button>
        </>
    );
}

Przykład 2

import React, { useRef } from 'react';

const App = () => {
    const inputRef = useRef();

    useEffect(() => {
        inputRef.current.focus();
    }, [])
    
    return (
        <>
            <input type="text" ref={inputRef} />
        </>
    );
}

Webstorm i ścieżki absolutne, jak?

We wpisie JavaScript: Ścieżki absolutne opisałem jak w JavaScript/TypeScipt skonfigurować ścieżki absolutne.

Wystarczy wykonać te kroki:

1. Stwórz/edytuj plik konfiguracyjny opisany we wpisie: ścieżki absolutne
2. Następnie już w Webstorm zlokalizuj katalog-rodzic, który zawiera Twój cały kod. Zwykle będzie to src.
3. Kliknij prawym przyciskiem myszy w ten katalog. Przejdź do: Mark Directory as i wybierz opcję Resource Root.
4. Przejdź do ustawień. Skrót klawiszowy: CTRL+ALT+S.
5. Idź do: Editor -> Code Style -> JavaScript i zaznacz opcję: Use paths relative to the project, resource or sources roots.
6. [OPCJONALNIE]: Jeśli używasz TypeScript idź do Editor -> Code Style -> TypeScript i zaznacz: Use paths relative to tsconfig.json

Czym jest useMemo?

useMemo to hook, który pozwala na zapamiętanie stanu danych. Dzięki temu aplikacja nie musi przetwarzać danych na nowo, kiedy komponent zostanie ponownie renderowany.

Ma podobną składnię jak: useEffect czy useCallback.

import React, { useMemo } from 'react';

const memoData = useMemo(() => {
...
}, []);

Przykład użycia useMemo

Dobrym przypadkiem użycia useMemo jest, gdy operujesz na dużym zbiorze danych i chcesz uniknąć obliczania tych samych danych na nowo przy ponownym renderowaniu:

function MyComponent({ data }) {
	const total = useMemo(() => data.reduce((total, current) => total + current, [data]);
	
	return (
		<>
			Total: <strong>{total}</strong>
		</>
	)
}

data to w tym przypadku tablica liczb. Nie wiem, jak może być duża, dla tego warto użyć tutaj useMemo.

Ścieżki relatywne

Ścieżka relatywna wygląda tak:

import { SomeComponent } from ‘../../../SomeComponent’;

Trudno się to czyta, im więcej zagnieżdżeń tym coraz dłuższa ścieżka. Pomijając wrażenia estetyczne problem jest większy kiedy przenosisz plik z jednej ścieżki do drugiej. A w kodzie znajduje się wiele odwołań do poprzedniej lokalizacji.

Można temu zaradzić, używając ścieżki absolutnej.

Ścieżki absolutne

Ścieżka absolutna daje nam gwarancję, że z każdego miejsca w kodzie ścieżka do danego pliku będzie taka sama.

Zamieniając poprzedni przykład na ścieżkę absolutną, może to wyglądać tak:

import { SomeComponent } from ‘components/SomeComponent’;

JavaScript konfiguracja

Żeby używać ścieżki absolutnej w projekcie JavaScript, należy dodać do pliku jsconfig.json taką konfigurację:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Gdzie src to katalog, w którym znajduje się cały Twój kod.

TypeScript konfiguracja

W przypadku TypeScript konfiguracja wygląda tak samo jak dla JavaScript. Jedyna różnica to plik konfiguracyjny. Dla TypeScript to tsconfig.json

Kiedy użyć useCallback?

useCallback to hook, który pozwala na usprawnienie wydajności Twojej aplikacji. Konkretnie chodzi o mądre zarządzanie funkcjami używanymi przez komponent.

Za każdym razem, kiedy komponent jest renderowany, wszystkie funkcje są tworzone na nowo. Dzieje się tak na przykład przy zmianie stanu komponentu. Po co za każdym razem tworzyć funkcję na nowo? Nie lepiej robić to w przypadku, gdy to jest naprawdę konieczne? Można to zrobić za pomocą useCallback.

Działa to, w taki sposób, że useCallback zapamiętuje daną funkcję i trzyma ją w pamięci cache. A Ty określasz, kiedy dana funkcja być ponownie stworzona.

Składnia useCallback

Jeśli używałeś wcześniej useEffect składnia useCallback jest podobna:

const someFunction = useCallback(() => {
...
}, []);

W pierwszym parametrze przekazujesz funkcję, którą chcesz trzymać w pamięci cache.

Drugi parametr to tablica zależności. Określasz tutaj listę wartości, które React ma śledzić. Jeśli dana wartość się zmieni useCallback powinien stworzyć funkcję na nowo. Jeśli przekażesz pustą tablicę, funkcja zostanie stworzona tylko raz.

Jeśli działanie Twojej funkcji zależy od danej zmiennej powinieneś ją umieścić w tablicy zależności.

Przykład użycia useCallback

import React, {useCallback, useState} from 'react';

const App = () => {
    const [taxpayerName, setTaxPayerName] = useState('');
    const [taxValue, setTaxValue] = useState(0);
    const [salary, setSalary] = useState(0);
    const [taxRate, setTaxRate] = useState(12);

    const onCalculateTax = useCallback(() => {
        setTaxValue(salary * (taxRate / 100));
    }, [salary, taxRate]);

    return (
        <>
            {
                taxpayerName &&
                <div>
                    The taxpayer: <strong>{taxpayerName}</strong> must pay <strong>{taxValue}</strong>
                </div>
            }
            <div>
                <label htmlFor="taxpayerName">Taxpayer name</label>
                <input type="text" id="taxpayerName" value={taxpayerName} onChange={(e) => setTaxPayerName(e.target.value)}/>
            </div>
            <div>
                <label htmlFor="salary">Salary</label>
                <input type="number" id="salary" value={salary} onChange={(e) => setSalary(e.target.value)}/>
            </div>
            <div>
                <label htmlFor="taxRate">Tax rate %</label>
                <input type="number" id="taxRate" value={taxRate} onChange={(e) => setTaxRate(e.target.value)}/>
            </div>
            <div>
                <button type="button" onClick={onCalculateTax}>Calculate</button>
            </div>
        </>
    )
}

Użytkownik wprowadza dane i wynik jest obliczany przez funkcję: onCalculateTax po kliknięciu w przycisk. Używam useCallback do trzymania funkcji onCalculateTax w pamięci cache. Zauważ, że przez useCallback śledzone są dwie zmienne: salary i taxRate. Za każdym razem, gdy zmieni się wartość, którejś z nich funkcja tworzona jest na nowo. Jeśli zmienimy dane tylko w polu taxpayerName używana jest funkcja z pamięci cache.