03-effects

Step 3 - Effects

Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects. They are not part of the main render loop of a component, but are very common in React components.

🏅 The goal of this step is to learn how to use the useEffect hook for managing side effects.

Help! I didn't finish the previous step! 🚨

If you didn't successfully complete the previous step, that's okay! The steps are meant to push you. 😄

However, you may find yourself in a position where you app is not compiling, and it's preventing you from working on this step. No problem! Stash your changes in a new terminal window, and you should be good to continue:

git stash push -m "In-progress Step 2 exercises"

Your app should automatically reset and you should be able to continue on with the current step.

⭐ Concepts

• Handling effects with and without cleanup using useEffect
• Optimizing useEffect performance by skipping redundant effects
• Making API calls with the useEffect hook

💡 Exercises

In App.js, use the useEffect hook to make an API request for Giphy results whenever the query changes and update the new results state with the API response.

NOTE: The API results are only logged to the console for now. We will render the results in Step 4.

(If at any point you get stuck, you can take a peek at the answers)

🧠 Elaboration & Feedback

After you're done with the exercise and before jumping to the next step, please fill out the elaboration & feedback form. It will help seal in what you've learned.

🤓 Bonus!

1. Polling

Add polling to GiphySearch such that it will continually retrieve new Giphy results after a configurable amount of seconds. Add a pollInterval prop to GiphySearch and set it to 5 seconds in App. Verify that if you change pollInterval in the React Developer Tools the previous interval is cleaned up and a new one is created.

2. Async useEffect

Use an async function for the call to await getResults() within useEffect() instead of calling .then() on its return Promise value.

🔑 HINT: Remember that an async function always returns a Promise, but the only return value allowed for useEffect() is the cleanup function callback.

📕 Resources

• Using the Effect Hook
• useEffect API Reference
• React Hooks 📺
• Successfully using async functions in React useEffect
• Object & array dependencies in the React useEffect Hook
• Helper functions in the React useEffect hook
• Handling async React component effects after unmount
• Introducing Hooks 📺
• Rules of Hooks
• eslint-plugin-react-hooks
• Fetch API & Github's fetch polyfill
  • Learning ES6: Promises
  • Async functions
  • HTTP Methods
  • Postman

👉🏾 Next Step

Go to Step 4 - Lists & Conditionals.