Lesson 3. Custom hooks and classic async pattern 2. Creating custom hooks

As you can extract some code into functions to make it reusable, you can create new hooks calling React's hooks. The only constraint is that you must name a hook with the use prefix.

Here what it can look like for our need:

// The custom hook
const useStarship = (starshipId) => {
  const [starship, setStarship] = useState(undefined)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(false)

  useEffect(() => {
    setLoading(true)
    setError(false)
    let active = true

    fetch(`https://swapi.dev/api/starships/${starshipId}/`)
      .then((res) => {
        if (res.status === 404) throw new Error('Not found')
        return res.json()
      })
      .then((starship) => {
        if (active) {
          setLoading(false)
          setStarship(starship)
        }
      })
      .catch((err) => {
        if (active) {
          console.error(err)
          setLoading(false)
          setError(true)
        }
      })

    return () => (active = false)
  }, [starshipId])

  return { loading, error, starship }
}

// The component using our custom hook
const Starship = ({ starshipId }) => {
  const { loading, error, starship } = useStarship(starshipId)

  if (loading) {
    return <p>Loading…</p>
  } else if (error) {
    return <p>An error occurred.</p>
  } else if (starship) {
    return <p>Starship: {starship.name}</p>
  } else {
    return null
  }
}

render(() => {
  const [id, setId] = useState(9)
  return (
    <>
      <input
        type="number"
        value={id}
        onChange={(e) => setId(Number(e.target.value))}
      />
      <Starship starshipId={id} />
    </>
  )
})
// The custom hook
const useStarship = (starshipId) => {
  const [starship, setStarship] = useState(undefined)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(false)

  useEffect(() => {
    setLoading(true)
    setError(false)
    let active = true

    fetch(`https://swapi.dev/api/starships/${starshipId}/`)
      .then((res) => {
        if (res.status === 404) throw new Error('Not found')
        return res.json()
      })
      .then((starship) => {
        if (active) {
          setLoading(false)
          setStarship(starship)
        }
      })
      .catch((err) => {
        if (active) {
          console.error(err)
          setLoading(false)
          setError(true)
        }
      })

    return () => (active = false)
  }, [starshipId])

  return { loading, error, starship }
}

// The component using our custom hook
const Starship = ({ starshipId }) => {
  const { loading, error, starship } = useStarship(starshipId)

  if (loading) {
    return <p>Loading…</p>
  } else if (error) {
    return <p>An error occurred.</p>
  } else if (starship) {
    return <p>Starship: {starship.name}</p>
  } else {
    return null
  }
}

render(() => {
  const [id, setId] = useState(9)
  return (
    <>
      <input
        type="number"
        value={id}
        onChange={(e) => setId(Number(e.target.value))}
      />
      <Starship starshipId={id} />
    </>
  )
})
Result(reset)

This custom hook returns the three values loading, error, and starship as an object so we can use them in our rendering, but there is no more way for us to update them, which is nice since we don’t have to update them manually: we hid this logic in the custom hook.

export const Starship = ({ starshipId }) => {
  const { loading, error, starship } = useStarship(starshipId)

  // ...rendering
}

It is not the case here, but if your use case requires the consumer of your hook to be able to update these values, you can return the setters as well:

const useStarship = (starshipId) => {
  // ...
  return {
    loading, setLoading,
    error, setError,
    starship, setStarship,
  }
}

Now, any other component can use useStarship to do what it wants with the returned value—an excellent way to extract component logic outside of the rendering concern.