Hooks have revolutionized the way we write React components by enabling us to use state and lifecycle features in functional components.
But why stop at just useState and useEffect?
In this article, we will explore 10 clever hooks that can help you level up your React game and create cleaner, more efficient code.
Hook 1. useFetchData
import { useState, useEffect } from 'react'
const useFetchData = (url: string) => {
const [data, setData] = useState(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
setLoading(true)
fetch(url)
.then(response => response.json())
.then(data => {
setData(data)
setLoading(false)
})
}, [url])
return { data, loading }
}
useFetchData is a custom hook that simplifies the process of fetching data and managing loading state. Pass in a URL, and it will return an object containing the fetched data and a loading boolean. This hook promotes code reusability and keeps your components clean.