W marcu opublikowałem 5 wpisów:

JavaScript:

1. Ścieżki absolutne
2. Jak rzutować string na wartość typu boolean?

React:

1. Do czego służy useRef?

Webstorm:

1. Jak skonfigurować ścieżki absolutne?

Narysowałem jeden komiks:

1. Eat that frog!

Przeczytałem jedną książkę:

1. Krwawy południk - Cormac McCarthy

Przesłuchałem trzy audiobooki:

1. Virion. Zamek. Tom 1 - Andrzej Ziemiański
2. Ptaki i inne opowiadania - Daphne Du Maurier
3. Ślady - Jakub Małecki

Boolean jako string

Załóżmy, że backend zwraca dane w takiej postaci:

{
	property1: 'true',
	property2: 'false'
}

Jak widać wartości, zwracana są w postaci ciągu znaków. My potrzebujemy zmienić je w typ boolean. Jak to zrobić?

Jak zmienić string w typ boolean?

Najłatwiej można zrobić to tak:

const stringValue = 'true';
const value = stringValue === 'true'; // true

Ale uwaga na:

'True' === 'true'; // false
'TRUE' === 'true'; // false

Ten problem można rozwiązać na przykład tak:

'True'.toLowerCase() === 'true'; // true
'FALSE'.toLowerCase() === 'true'; // false

Powyższy zapis można jeszcze usprawnić:

String('True').toLowerCase() === 'true'; // true
String('FALSE').toLowerCase() === 'true'; // false

Jest to szczególnie przydatne jeśli nie masz kontroli nad tym, co jest zwracane.

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.