So the large hype on React Hooks is over and the community isn't talking about them that much anymore. But seriously hooks are beasts. In this post I'll explain how you can use React Hooks to fetch and submit data to any API (I'll use REST in this guide).
Writing your own hook
We'll start with writing our first hook to fetch books from an API. Here is the example code:
import { useEffect, useState } from 'react'
// The hook is just a simple function which we can export
export const useFetchBooks = () => {
// First we define the necessary states for our hook
// this includes book, the loading state and potential errors
const [books, setBooks] = useState([])
const [loading, setLoading] = useState(false)
const [error, setError] = useState(null)
// useEffect can be compared to componentDidMount,
// componentDidUpdate and componentDidUnmount
// read more about useEffect here:
// https://reactjs.org/docs/hooks-effect.html
useEffect(() => {
// First we set the loading and error states
setLoading(true)
setError(null)
fetch('https://library.com/api/books')
.then(res => res.json())
.then(json => {
setLoading(false)
if (json.books) {
setBooks(json.books)
} else {
setBooks([])
}
})
.catch(err => {
setError(err)
setLoading(false)
})
}, [])
return { books, loading, error }
}
Now this looks complicated but really it isn't. Remove the comments and it will be a really short function which fetches data and updates states.
Now that we have the hook, we can use it in a component like this:
import React from 'react'
import { useFetchBooks } from './utils/hooks'
const BookList = () => {
// use your own hook to load the data you need
const { books, loading, error } = useFetchBooks()
if (loading) return <div>Loading...</div>
if (error) return <div>{error}</div>
return (
<div>
{
books &&
books.length > 0 &&
books.map(book => <div key={book.id}>{book.title}</div>)
}
</div>
)
}
export default BookList
Use parameters in your hook
Now our hook works fine but it's still a bit stupid. Lets say you want your users to be able to search for books in the list. You could do it like this:
import { useEffect, useState } from 'react'
// Note here the new parameter we pass into the hook called "search"
// this will be used to search the api for specific books
export const useFetchBooks = (search) => {
const [books, setBooks] = useState([])
const [loading, setLoading] = useState(false)
const [error, setError] = useState(null)
useEffect(() => {
setLoading(true)
setError(null)
// Change the apiUrl according to the search string
const apiUrl = search && search.length > 0 ?
`https://library.com/api/books?search=${search}` :
'https://library.com/api/books'
fetch(apiUrl)
.then(res => res.json())
.then(json => {
setLoading(false)
if (json.books) {
setBooks(json.books)
} else {
setBooks([])
}
})
.catch(err => {
setError(err)
setLoading(false)
})
// This is important. We pass the new search parameter into
// the empty array we had before. This means, the effect
// will run again if this parameter changes
}, [search])
return { books, loading, error }
}
Now you can use the hook like this in your component:
const { books, loading, error } = useFetchBooks(props.search)
This should be enough for part 1 and should clarify how to use hooks to fetch data from any API.
I'll update this post with a link to part 2 as soon as I'm done with it.
Have fun!
Top comments (11)
I had recently implemented something similar to this.
I did the same thing, initializing
loadingstate tofalse. However, my coworkers argued that it could bebecause the Hook will eventually set
loadingstate totrueany way. I argued that the Hook isn't actually fetching until the effect runs, which is why I initializedloadingstate tofalse. I eventually gave in and initializedloadingstate totruebecause I felt like we were bikeshedding.Anyway, what do you think?
Eventually found one good thing about initializing
loadingstate totrue. If the component using this custom fetch Hook rendered some other content, it won't flicker. In your case, this shouldn't happen though since BookList isn't rendering anything other than the fetched books.That's true! I'll update the post and add your note to it.
How do you deal with this part:
This causes annoying flashing, before promise is resolved. Is there a way to show this loader inside actual markup, instead of this single element with Loading...?
Loved your explanation. Can you describe useEffect in detail in next post. I couldn't understand the use case
Hey, thank you a lot.
I won't write about useEffect in the next post but I just wrote a quick explanation here:
dev.to/bdbch/a-quick-explanation-o...
Let me know if it helped you! :)
Nice Article...
useful info, remarkable clarity, one small typo (closing paren):
Thank you very much! Fixed!
I'd say because of the comments which are cluttering the actual source code and the new way to update states etc.
This code is subject to race conditions. Check my post about that subject here: dev.to/sebastienlorber/handling-ap...
what would be the pros and cons on using fetch vs axios ?