Dlaczego powinieneś wywoływać funkcję w useState

Gdy poznawałem świat frontendu z Reactem, usłyszałem, że nie powinno się wywoływać funkcji w useState. Długo nie byłem świadomy, jak zła to była rada. Warto wiedzieć, kiedy wywoływanie funkcji w useState ma sens i jakie korzyści może to przynieść.

Załóżmy, że w przykładowej aplikacji początkowy stan zależy od obliczeń, które możemy uznać za kosztowne w wywołaniu.

const expensiveFilterFunction = (data: Data) => {
    // return result of expensive function
}

Przypisanie wyniku z funkcji do zmiennej wewnątrz komponentu, spowoduje ponowne wywoływanie tej funkcji przy każdym kolejnym renderze.

function ExampleComponent({data}: Data) {
    const initialFilteredData = expensiveFilterFunction(data)
    const [state, setState] = useState(initialFilteredData)

    return (
        // UI
    )
}

Pamiętaj, że stan początkowy potrzebujemy wyłącznie podczas pierwszego renderu komponentu. Każde kolejne wywołanie funkcji z omawianego przykładu będzie nadmiarowe.

Dokonując optymalizacji w komponencie, powinniśmy zmienić sposób inicjalizacji stanu.

function ExampleComponent({data}: Data) {
    const [state, setState] = useState(() => expensiveFilterFunction(data))

    return (
        // UI
    )
}

Ten sposób inicjalizacji stanu nazywa się leniwą inicjalizacją i pozwala uniknąć zbędnego wykonywania kosztownych operacji przy każdym re-renderze komponentu.

Powrót do artykułów