Dalam seri artikel ini, kami memulai perjalanan melalui bidang React hooks kustom, menemukan potensi besarnya untuk meningkatkan proyek pengembangan Anda. Fokus kita hari ini adalah pada hook "useStateWithValidation", salah satu dari banyak hook yang dibuat dengan cermat yang tersedia dalam koleksi hook kustom 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]
}

Hook useStateWithValidation menggabungkan hook useState dan useCallback dari React untuk memberikan solusi yang elegan. Dibutuhkan dua parameter: fungsi validasi dan nilai awal. Fungsi validasi menentukan apakah keadaan saat ini dianggap valid atau tidak.

Salah satu keunggulan utama pengait khusus ini adalah fleksibilitasnya. Anda dapat meneruskan fungsi validasi apa pun yang sesuai dengan kebutuhan spesifik Anda. Baik itu memeriksa panjang string, memastikan nilai numerik berada dalam rentang tertentu, atau melakukan validasi yang lebih kompleks, useStateWithValidation siap membantu Anda.

import useStateWithValidation from "./useStateWithValidation"

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

Dalam contoh ini, StateWithValidationComponent menggunakan hook useStateWithValidation untuk mengelola status nama pengguna. Fungsi validasi memeriksa apakah panjang nama pengguna lebih dari 5 karakter, dan variabel isValid mencerminkan validitas input saat ini.