Build a Custom Hook: useFetch

react-hooks/home/src/Joke.js

@@ -1,19 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
+import { useFetch } from './hooks';
 
 function Joke() {
-  const [joke, setJoke] = useState({});
-
-  useEffect(() => {
-    fetch('https://official-joke-api.appspot.com/jokes/random')
-      .then(response => response.json())
-      .then(json => {
-        console.log('joke json', json);
-
-        setJoke(json);
-      });
-  }, []);
-
-  const { setup, punchline } = joke;
+  const { setup, punchline } = useFetch('https://official-joke-api.appspot.com/jokes/random', {});
 
   return (
     <div>

react-hooks/home/src/Stories.js

@@ -1,13 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
+import { useFetch } from './hooks';
 
 function Stories() {
-  const [stories, setStories] = useState([]);
-
-  useEffect(() => {
-    fetch('https://news-proxy-230704.appspot.com/topstories')
-      .then(response => response.json())
-      .then(json => setStories(json));
-  }, []);
+  const stories = useFetch('https://news-proxy-230704.appspot.com/topstories', []);
 
   return (
     <div className='Stories'>

react-hooks/home/src/hooks.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+
+export const useFetch = (url, initialValue) => {
+  const [result, setResult] = useState(initialValue);
+
+  useEffect(() => {
+    fetch(url)
+      .then(response => response.json())
+      .then(json => setResult(json));
+  }, []);
+
+  return result;
+}