React Hooks for Data Part 1 - Fetching Data

import { useEffect, useState } from 'react'// The hook is just a simple function which we can exportexport 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 }}

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

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 booksexport 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 }}

const { books, loading, error } = useFetchBooks(props.search)