В этой серии статей мы отправляемся в путешествие по сфере пользовательских хуков React, открывая их огромный потенциал для улучшения ваших проектов разработки. Сегодня мы сосредоточимся на хуке useStateWithValidation, одном из многих тщательно созданных хуков, доступных в коллекции пользовательских хуков React.

Github: https://github.com/sergeyleschev/react-custom-hooks

import { useState, useCallback } from "react"

export default function useStateWithValidation(validationFunc, initialValue) {
    const [state, setState] = useState(initialValue)
    const [isValid, setIsValid] = useState(() => validationFunc(state))
    const onChange = useCallback(
        nextState => {
            const value =
                typeof nextState === "function" ? nextState(state) : nextState
            setState(value)
            setIsValid(validationFunc(value))
        },
        [validationFunc]
    )
    return [state, onChange, isValid]
}

Хук useStateWithValidation объединяет хуки useState и useCallback из React, обеспечивая элегантное решение. Он принимает два параметра: функцию проверки и начальное значение. Функция проверки определяет, считается ли текущее состояние действительным или нет.

Одним из ключевых преимуществ этого специального крючка является его гибкость. Вы можете передать любую функцию проверки, которая соответствует вашим конкретным требованиям. Будь то проверка длины строки, попадание числового значения в определенный диапазон или выполнение более сложных проверок, useStateWithValidation поможет вам.

import useStateWithValidation from "./useStateWithValidation"

export default function StateWithValidationComponent() {
    const [username, setUsername, isValid] = useStateWithValidation(
        name => name.length > 5,
        ""
    )
    return (
        <>
            <div>Valid: {isValid.toString()}</div>
            <input
                type="text"
                value={username}
                onChange={e => setUsername(e.target.value)}
            />
        </>
    )
}

В этом примере StateWithValidationComponent использует перехватчик useStateWithValidation для управления состоянием имени пользователя. Функция проверки проверяет, превышает ли длина имени пользователя 5 символов, а переменная isValid отражает достоверность текущего ввода.

Полная версия | Пользовательские хуки React: https://medium.com/@sergeyleschev/supercharge-your-projects-with-custom-hooks-4d946b297d18