diff --git a/exercise-10/README.md b/exercise-10/README.md
index ef81831..8749f3b 100644
--- a/exercise-10/README.md
+++ b/exercise-10/README.md
@@ -166,3 +166,5 @@ You can verify this by making a change in `data/db.json`, and making sure the ch
 ### Extra Credit
 
 - Read more about [the `useEffect` hook](https://overreacted.io/a-complete-guide-to-useeffect/).
+
+- Read (a lot!) about [loading data with `useEffect`](https://www.robinwieruch.de/react-hooks-fetch-data/).
diff --git a/exercise-10/SOLUTIONS.md b/exercise-10/SOLUTIONS.md
index 224d8cd..0559650 100644
--- a/exercise-10/SOLUTIONS.md
+++ b/exercise-10/SOLUTIONS.md
@@ -53,9 +53,12 @@ export default function FriendsEntry() {
 export default function FriendsEntry() {
   const [friends, setFriends] = useState([]);
 
-  useEffect(async () => {
-    const friends = await getFriendsFromApi();
-    setFriends(friends);
+  useEffect(() => {
+    async function load() {
+      const friends = await getFriendsFromApi();
+      setFriends(friends);
+    }
+    load();
   }, []);
 
   return <Friends friends={friends} />;
@@ -99,10 +102,13 @@ import FriendDetail from './FriendDetail';
 export default function(props) {
   const [friend, setFriend] = useState(undefined);
 
-  useEffect(async () => {
-    const id = props.match.params.id;
-    const friend = await getFriendFromApi(id);
-    setFriend(friend);
+  useEffect(() => {
+    async function load() {
+      const id = props.match.params.id;
+      const friend = await getFriendFromApi(id);
+      setFriend(friend);
+    }
+    load();
   }, [props.match.id]);
 
   return <FriendDetail friend={friend} />;
diff --git a/exercise-10/complete/friend-detail/FriendDetail.entry.js b/exercise-10/complete/friend-detail/FriendDetail.entry.js
index 3b28893..f105c1f 100644
--- a/exercise-10/complete/friend-detail/FriendDetail.entry.js
+++ b/exercise-10/complete/friend-detail/FriendDetail.entry.js
@@ -7,10 +7,13 @@ import FriendDetail from './FriendDetail';
 export default function(props) {
   const [friend, setFriend] = useState(undefined);
 
-  useEffect(async () => {
-    const id = props.match.params.id;
-    const friend = await getFriendFromApi(id);
-    setFriend(friend);
+  useEffect(() => {
+    async function load() {
+      const id = props.match.params.id;
+      const friend = await getFriendFromApi(id);
+      setFriend(friend);
+    }
+    load();
   }, [props.match.id]);
 
   return <FriendDetail friend={friend} />;
diff --git a/exercise-10/complete/friends/Friends.entry.js b/exercise-10/complete/friends/Friends.entry.js
index 4b9e04f..633ab3f 100644
--- a/exercise-10/complete/friends/Friends.entry.js
+++ b/exercise-10/complete/friends/Friends.entry.js
@@ -7,9 +7,12 @@ import Friends from './Friends';
 export default function FriendsEntry() {
   const [friends, setFriends] = useState([]);
 
-  useEffect(async () => {
-    const friends = await getFriendsFromApi();
-    setFriends(friends);
+  useEffect(() => {
+    async function load() {
+      const friends = await getFriendsFromApi();
+      setFriends(friends);
+    }
+    load();
   }, []);
 
   return <Friends friends={friends} />;
diff --git a/exercise-11/complete/friend-detail/FriendDetail.entry.js b/exercise-11/complete/friend-detail/FriendDetail.entry.js
index 3b28893..f105c1f 100644
--- a/exercise-11/complete/friend-detail/FriendDetail.entry.js
+++ b/exercise-11/complete/friend-detail/FriendDetail.entry.js
@@ -7,10 +7,13 @@ import FriendDetail from './FriendDetail';
 export default function(props) {
   const [friend, setFriend] = useState(undefined);
 
-  useEffect(async () => {
-    const id = props.match.params.id;
-    const friend = await getFriendFromApi(id);
-    setFriend(friend);
+  useEffect(() => {
+    async function load() {
+      const id = props.match.params.id;
+      const friend = await getFriendFromApi(id);
+      setFriend(friend);
+    }
+    load();
   }, [props.match.id]);
 
   return <FriendDetail friend={friend} />;
diff --git a/exercise-11/complete/friends/Friends.entry.js b/exercise-11/complete/friends/Friends.entry.js
index 4b9e04f..633ab3f 100644
--- a/exercise-11/complete/friends/Friends.entry.js
+++ b/exercise-11/complete/friends/Friends.entry.js
@@ -7,9 +7,12 @@ import Friends from './Friends';
 export default function FriendsEntry() {
   const [friends, setFriends] = useState([]);
 
-  useEffect(async () => {
-    const friends = await getFriendsFromApi();
-    setFriends(friends);
+  useEffect(() => {
+    async function load() {
+      const friends = await getFriendsFromApi();
+      setFriends(friends);
+    }
+    load();
   }, []);
 
   return <Friends friends={friends} />;
diff --git a/exercise-11/friend-detail/FriendDetail.entry.js b/exercise-11/friend-detail/FriendDetail.entry.js
index 3b28893..f105c1f 100644
--- a/exercise-11/friend-detail/FriendDetail.entry.js
+++ b/exercise-11/friend-detail/FriendDetail.entry.js
@@ -7,10 +7,13 @@ import FriendDetail from './FriendDetail';
 export default function(props) {
   const [friend, setFriend] = useState(undefined);
 
-  useEffect(async () => {
-    const id = props.match.params.id;
-    const friend = await getFriendFromApi(id);
-    setFriend(friend);
+  useEffect(() => {
+    async function load() {
+      const id = props.match.params.id;
+      const friend = await getFriendFromApi(id);
+      setFriend(friend);
+    }
+    load();
   }, [props.match.id]);
 
   return <FriendDetail friend={friend} />;
diff --git a/exercise-11/friends/Friends.entry.js b/exercise-11/friends/Friends.entry.js
index 4b9e04f..633ab3f 100644
--- a/exercise-11/friends/Friends.entry.js
+++ b/exercise-11/friends/Friends.entry.js
@@ -7,9 +7,12 @@ import Friends from './Friends';
 export default function FriendsEntry() {
   const [friends, setFriends] = useState([]);
 
-  useEffect(async () => {
-    const friends = await getFriendsFromApi();
-    setFriends(friends);
+  useEffect(() => {
+    async function load() {
+      const friends = await getFriendsFromApi();
+      setFriends(friends);
+    }
+    load();
   }, []);
 
   return <Friends friends={friends} />;
diff --git a/exercise-13/friend-detail/FriendDetail.entry.js b/exercise-13/friend-detail/FriendDetail.entry.js
index 3b28893..f105c1f 100644
--- a/exercise-13/friend-detail/FriendDetail.entry.js
+++ b/exercise-13/friend-detail/FriendDetail.entry.js
@@ -7,10 +7,13 @@ import FriendDetail from './FriendDetail';
 export default function(props) {
   const [friend, setFriend] = useState(undefined);
 
-  useEffect(async () => {
-    const id = props.match.params.id;
-    const friend = await getFriendFromApi(id);
-    setFriend(friend);
+  useEffect(() => {
+    async function load() {
+      const id = props.match.params.id;
+      const friend = await getFriendFromApi(id);
+      setFriend(friend);
+    }
+    load();
   }, [props.match.id]);
 
   return <FriendDetail friend={friend} />;
diff --git a/exercise-13/friends/Friends.entry.js b/exercise-13/friends/Friends.entry.js
index 4b9e04f..633ab3f 100644
--- a/exercise-13/friends/Friends.entry.js
+++ b/exercise-13/friends/Friends.entry.js
@@ -7,9 +7,12 @@ import Friends from './Friends';
 export default function FriendsEntry() {
   const [friends, setFriends] = useState([]);
 
-  useEffect(async () => {
-    const friends = await getFriendsFromApi();
-    setFriends(friends);
+  useEffect(() => {
+    async function load() {
+      const friends = await getFriendsFromApi();
+      setFriends(friends);
+    }
+    load();
   }, []);
 
   return <Friends friends={friends} />;
diff --git a/exercise-15/README.md b/exercise-15/README.md
index b96f1ea..430ed38 100644
--- a/exercise-15/README.md
+++ b/exercise-15/README.md
@@ -51,9 +51,12 @@ The side effect we need to run in this component calls out to an API to retrieve
 In our modern component, we are using `useEffect` to perform this side-effect. It calls out to `getFriendsFromApi` to get the list of friends, then calls the state modifier `setFriends` with the result.
 
 ```jsx
-useEffect(async () => {
-  const friends = await getFriendsFromApi();
-  setFriends(friends);
+useEffect(() => {
+  async function load() {
+    const friends = await getFriendsFromApi();
+    setFriends(friends);
+  }
+  load();
 }, []);
 ```
 
diff --git a/exercise-15/modern/Friends.entry.js b/exercise-15/modern/Friends.entry.js
index 4b9e04f..633ab3f 100644
--- a/exercise-15/modern/Friends.entry.js
+++ b/exercise-15/modern/Friends.entry.js
@@ -7,9 +7,12 @@ import Friends from './Friends';
 export default function FriendsEntry() {
   const [friends, setFriends] = useState([]);
 
-  useEffect(async () => {
-    const friends = await getFriendsFromApi();
-    setFriends(friends);
+  useEffect(() => {
+    async function load() {
+      const friends = await getFriendsFromApi();
+      setFriends(friends);
+    }
+    load();
   }, []);
 
   return <Friends friends={friends} />;
diff --git a/exercise-16/friend-detail/FriendDetail.entry.js b/exercise-16/friend-detail/FriendDetail.entry.js
index 3b28893..f105c1f 100644
--- a/exercise-16/friend-detail/FriendDetail.entry.js
+++ b/exercise-16/friend-detail/FriendDetail.entry.js
@@ -7,10 +7,13 @@ import FriendDetail from './FriendDetail';
 export default function(props) {
   const [friend, setFriend] = useState(undefined);
 
-  useEffect(async () => {
-    const id = props.match.params.id;
-    const friend = await getFriendFromApi(id);
-    setFriend(friend);
+  useEffect(() => {
+    async function load() {
+      const id = props.match.params.id;
+      const friend = await getFriendFromApi(id);
+      setFriend(friend);
+    }
+    load();
   }, [props.match.id]);
 
   return <FriendDetail friend={friend} />;
diff --git a/exercise-16/friends/Friends.entry.js b/exercise-16/friends/Friends.entry.js
index 4b9e04f..633ab3f 100644
--- a/exercise-16/friends/Friends.entry.js
+++ b/exercise-16/friends/Friends.entry.js
@@ -7,9 +7,12 @@ import Friends from './Friends';
 export default function FriendsEntry() {
   const [friends, setFriends] = useState([]);
 
-  useEffect(async () => {
-    const friends = await getFriendsFromApi();
-    setFriends(friends);
+  useEffect(() => {
+    async function load() {
+      const friends = await getFriendsFromApi();
+      setFriends(friends);
+    }
+    load();
   }, []);
 
   return <Friends friends={friends} />;
diff --git a/exercise-17/friend-detail/FriendDetail.entry.js b/exercise-17/friend-detail/FriendDetail.entry.js
index 3b28893..f105c1f 100644
--- a/exercise-17/friend-detail/FriendDetail.entry.js
+++ b/exercise-17/friend-detail/FriendDetail.entry.js
@@ -7,10 +7,13 @@ import FriendDetail from './FriendDetail';
 export default function(props) {
   const [friend, setFriend] = useState(undefined);
 
-  useEffect(async () => {
-    const id = props.match.params.id;
-    const friend = await getFriendFromApi(id);
-    setFriend(friend);
+  useEffect(() => {
+    async function load() {
+      const id = props.match.params.id;
+      const friend = await getFriendFromApi(id);
+      setFriend(friend);
+    }
+    load();
   }, [props.match.id]);
 
   return <FriendDetail friend={friend} />;
diff --git a/exercise-17/friends/Friends.entry.js b/exercise-17/friends/Friends.entry.js
index 4b9e04f..633ab3f 100644
--- a/exercise-17/friends/Friends.entry.js
+++ b/exercise-17/friends/Friends.entry.js
@@ -7,9 +7,12 @@ import Friends from './Friends';
 export default function FriendsEntry() {
   const [friends, setFriends] = useState([]);
 
-  useEffect(async () => {
-    const friends = await getFriendsFromApi();
-    setFriends(friends);
+  useEffect(() => {
+    async function load() {
+      const friends = await getFriendsFromApi();
+      setFriends(friends);
+    }
+    load();
   }, []);
 
   return <Friends friends={friends} />;