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

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.

For each chapter, you'll need to run:

npm install

To download the dependencies.

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.

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