Custom Hook

[zamarrowski]

TodoList.js

import React, { useState, useEffect } from 'react'
import useApiCall from './useApiCall'

export default () => {

  const [todos, loading] = useApiCall('https://jsonplaceholder.typicode.com/todos')

  return (
    <>
      <h1>Todos</h1>
      <ul>
        {todos && todos.map(todo => (
          <li key={todo.id}>
            {todo.title}
          </li>
        ))}
      </ul>
    </>
  )
}

useApiCall.js

import { useState, useEffect } from 'react'

export default url => {

  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(false)

  const fetchData = async (url) => {
    setLoading(true)
    let response = await fetch(url)
    let data = await response.json()
    setData(data)
    setLoading(false)
  }

  useEffect(() => {
    fetchData(url)
  }, [url])

  return [data, loading]
}