useEffect-examples
useEffect-examples copied to clipboard
Published
20 hours ago •
rozenmd
rozenmd
Material for my useEffect book.
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.
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
rozenmd