Learn useEffect By Example

Get the hang of using useEffect like a pro, with useEffect By Example.

• You'll learn how to use useEffect to fetch data, and avoid pesky race conditions.
• Take the guesswork out of using the dependency array, and keep the eslint-plugin happy.
• Prevent infinite re-renders through the use of useCallback and useMemo.

---

System Requirements

• git v2.13 or greater
• NodeJS ^10.13 || 12 || 14 || 15
• npm v6 or greater

All of these must be available in your PATH. To verify things are set up properly, you can run this:

git --version
node --version
npm --version

If you have trouble with any of these, learn more about the PATH environment variable and how to fix it here for windows or mac/linux.

Setting up

For each chapter, you'll need to run:

npm install

To download the dependencies.

Running the apps

To get the app up and running (and really see if it worked), run:

npm start

This should start up your browser. If you're familiar, this is a standard react-scripts application.

Examples

• 1-fetching-data/src/before/App.js: Fetching data with useEffect
• 1-fetching-data/src/after/App.js: Fetching & displaying data with useEffect
• 2-dependency-array/src/before/App.js: Demonstrating the lack of a dependency
• 2-dependency-array/src/after/App.js: Adding a dependency to allow useEffect to re-fire
• 3-race-conditions/src/before/App.js: Demonstrating race conditions with an async useEffect
• 3-race-conditions/src/after-boolean/App.js: Fixing race conditions using a clean-up function, and a boolean
• 3-race-conditions/src/after-abortcontroller/App.js: Fixing race conditions using a clean-up function, and an AbortController
• 4-usestate-and-useeffect/src/App.js: Demonstrating use of useState, useCallback, and useEffect