https://github.com/sofiane-abou-abderrahim/react-place-picker

Discover "React Place Picker" - a demo app showcasing React concepts such as managing side effects with useEffect() hook. Select and remove places easily. Check out the code on GitHub and play with the live demo! 🌟🔍💻
https://github.com/sofiane-abou-abderrahim/react-place-picker

javascript react reactjs usecallback useeffect

Last synced: about 1 month ago
JSON representation

Discover "React Place Picker" - a demo app showcasing React concepts such as managing side effects with useEffect() hook. Select and remove places easily. Check out the code on GitHub and play with the live demo! 🌟🔍💻

• Host: GitHub
• URL: https://github.com/sofiane-abou-abderrahim/react-place-picker
• Owner: sofiane-abou-abderrahim
• Created: 2024-03-30T23:12:19.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-09-26T21:04:17.000Z (over 1 year ago)
• Last Synced: 2025-04-03T20:27:26.658Z (about 1 year ago)
• Topics: javascript, react, reactjs, usecallback, useeffect
• Language: JavaScript
• Homepage: https://sofiane-abou-abderrahim.github.io/react-place-picker/
• Size: 4.29 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Dealing with Side Effects

## Keeping the UI Synchronized

- Understanding Side Effects & useEffect()

- Effects & Dependencies

- When NOT to use useEffect()

# Steps

## 0. Starting Project

1. run `npm install`

2. run `npm run dev`

3. create a `README.md` file

## 1. What's a "Side Effect"? A Thorough Example

1. get the user's current location in `App.jsx`

2. use the `sortPlacesByDistance` function imported from `loc.js`

## 2. A Potential Problem with Side Effects: An Infinite Loop

1. add a `availablePlaces`state to manage the available places in `App.jsx`

## 3. Using useEffect for Handling (Some) Side Effects

1. import `useEffect` from React in `App.jsx`

2. execute the `useEffect` hook inside the `App.jsx` component

## 4. Not All Side Effects Need useEffect

1. store the entire list of selected places in the browser storage with help of `localStorage` browser function in `App.jsx`

## 5. useEffect Not Needed: Another Example

1. delete items from local storage in `App.jsx`

2. fetch the items when the app starts

3. use `useEffect` to show that it is a redondant usage of `useEffect`

4. use `storedPlaces` to initialize the `pickedPlaces` state instead of `useEffect`

## 6. Preparing Another Use-Case For useEffect

1. use another alternative to open & close the modal in `Modal.jsx` & `App.jsx`

## 7. Using useEffect for Syncing With Browser APIs

1. try to open the modal in `Modal.jsx` without `useEffect()`

2. use `useEffect()` to synchronize the `open` prop to the `showModal()` & `close()` DOM APIs

## 8. Understanding Effect Dependencies

1. add the `open` prop as one of the `useEffect` dependencies in `Modal.jsx`

## 9. Fixing a Small Bug

1. listen to the modal being closed by adding the built-in `onClose` prop to the ``

2. In `App.jsx`, set the `handleStopRemovePlace` function as a value for the `onClose` prop on the `` component

## 10. Preparing Another Problem That Can Be Fixed with useEffect

1. set a timer in `DeleteConfirmation.jsx`

2. try to conditionally render `` component in `App.jsx`

3. or conditionally render the `{children}` prop in `Modal.jsx`

## 11. Introducing useEffect's Cleanup Function

1. use `useEffect` in `DeleteConfirmation.jsx` to stop the timer when the `` component disappears

2. return a cleanup function inside the Effect function

## 12. The Problem with Object & Function Dependencies

1. add the `onConfirm` prop as a dependency of the `useEffect` function in `DeleteConfirmation.jsx`

## 13. The useCallback Hook

1. wrap the `handleRemovePlace` function with the`useCallback`hook in`App.jsx` to prevent it from recreating again

## 14. useEffect's Cleanup Function: Another Example

1. add a progress bar in `DeleteConfirmation.jsx`

2. add a `useState` hook to manage the progress bar remaining time

3. add a `setInterval` function to update this state

4. return a cleanup function to stop the interval

## 15. Optimizing State Updates

1. outsource the progress indicator & the related state logic & the useEffect hook into a seperate component for better performance

2. create a `ProgressBar.jsx` component