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 "useScript", 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 useAsync from "../useAsync/useAsync"

export default function useScript(url) {
    return useAsync(() => {
        const script = document.createElement("script")
        script.src = url
        script.async = true
        return new Promise((resolve, reject) => {
            script.addEventListener("load", resolve)
            script.addEventListener("error", reject)
            document.body.appendChild(script)
        })
    }, [url])
}

Salah satu keuntungan signifikan dari useScript adalah kemampuannya menangani pemuatan skrip secara asinkron. Dengan menyetel atribut async skrip ke true, Anda memastikan bahwa atribut tersebut tidak akan memblokir rendering aplikasi Anda. Hal ini meningkatkan kinerja dan pengalaman pengguna secara keseluruhan, terutama ketika berhadapan dengan skrip yang lebih besar atau koneksi jaringan yang lambat.

useScript dapat digunakan dalam berbagai skenario. Misalnya, Anda dapat memuat perpustakaan eksternal seperti jQuery, memungkinkan Anda memanfaatkan fungsinya yang kuat tanpa menambahkan banyak ke paket Anda. Selain itu, Anda dapat memuat skrip analitik, widget media sosial, atau skrip lain apa pun yang diperlukan untuk perilaku dinamis aplikasi Anda.

import useScript from "./useScript"

export default function ScriptComponent() {
    const { loading, error } = useScript(
        "https://code.jquery.com/jquery-3.6.0.min.js"
    )
    if (loading) return Loading 
    if (error) return Error 
    return {window.$(window).width()}
}

Pada contoh di atas, kita melihat bagaimana useScript digunakan dalam ScriptComponent. Kait useScript dipanggil dengan URL perpustakaan jQuery sebagai argumen. Hook mengembalikan status pemuatan dan kesalahan, yang dapat digunakan untuk menampilkan spinner pemuatan atau pesan kesalahan yang sesuai. Setelah skrip berhasil dimuat, komponen menampilkan lebar jendela saat ini menggunakan jQuery.