{"id":23399741,"url":"https://github.com/ch0ripain/react-side-effects","last_synced_at":"2026-05-18T03:02:11.264Z","repository":{"id":264947061,"uuid":"894740247","full_name":"ch0ripain/react-side-effects","owner":"ch0ripain","description":"🧙‍♂️ Handling side effects with useEffect 🧙‍♂️","archived":false,"fork":false,"pushed_at":"2024-11-28T01:03:27.000Z","size":4376,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-21T11:52:25.253Z","etag":null,"topics":["frontend","react","react-side-effect","react-useeffect","reactjs","web-development"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ch0ripain.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-26T22:43:15.000Z","updated_at":"2024-11-28T01:03:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"ef15475c-d6b4-4df7-bba3-43b49d6df6b3","html_url":"https://github.com/ch0ripain/react-side-effects","commit_stats":null,"previous_names":["ch0ripain/react-side-effects"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ch0ripain/react-side-effects","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-side-effects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-side-effects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-side-effects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-side-effects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ch0ripain","download_url":"https://codeload.github.com/ch0ripain/react-side-effects/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-side-effects/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33163413,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T22:39:12.733Z","status":"online","status_checked_at":"2026-05-18T02:00:06.436Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend","react","react-side-effect","react-useeffect","reactjs","web-development"],"created_at":"2024-12-22T10:16:20.124Z","updated_at":"2026-05-18T03:02:11.232Z","avatar_url":"https://github.com/ch0ripain.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e 🧙‍♂️ Handling side effects with useEffect 🧙‍♂️\u003c/h1\u003e\nA side effect is a task that occurs after the page has loaded or after a component has rendered. For example, once a component is displayed, you might need to perform an action that depends on it, such as fetching data, interacting with the DOM, or setting up event listeners.\n\nTo handle side effects in React, I use the \u003ccode\u003euseEffect\u003c/code\u003e hook, which is designed for these situations.\n## 🛠 Example without Dependencies\n```javascript\nuseEffect(() =\u003e {\n    navigator.geolocation.getCurrentPosition((position) =\u003e {\n      const sortedPlacesByLocation = sortPlacesByDistance(\n        AVAILABLE_PLACES,\n        position.coords.latitude,\n        position.coords.longitude\n      );\n      setSortedPlaces(sortedPlacesByLocation);\n    });\n  }, []);\n```\nIn the example above, \u003ccode\u003euseEffect\u003c/code\u003e accepts two arguments:\n\n- A function ➡️ this is the effect you want to run.\n- An array of dependencies ➡️ these determine when the effect runs again.\n\nEssentially, useEffect runs the provided function after the component has been rendered. This trigger a re-render, which can be problematic if your component is complex or you have multiple effects.\nSince the dependency array in this example is empty \u003ccode\u003e([])\u003c/code\u003e, the effect runs only once—after the initial render. If the array had dependencies, the effect would re-run whenever those dependencies changed. Dependencies can include functions, state, context values, and more.\n\n## 🛠 Example with Dependencies\n```javascript\nuseEffect(() =\u003e {\n    const timer = setTimeout(() =\u003e {\n      onConfirm();\n    }, 3000);\n\n    return () =\u003e {\n      clearTimeout(timer);\n    };\n  }, [onConfirm]);\n```\nIn this case, the effect confirms a deletion modal action after 3 seconds. Unlike the previous example, this one includes a dependency: \u003ccode\u003eonConfirm\u003c/code\u003e wich is a prop that leads to a function. If \u003ccode\u003eonConfirm\u003c/code\u003e changes, the effect will re-run.\n\n\u003e [!NOTE]\n\u003e JavaScript functions are objects, so even two equal functions are not considered equal when compared.\n\n### 🛠 Avoiding Infinite Re-renders with useCallback\nTo prevent infinite re-renders caused by function recreations, I use the useCallback hook. Here's how:\n```javascript\nconst handleRemovePlace = useCallback(() =\u003e {\n    setPickedPlaces((prevPickedPlaces) =\u003e\n      prevPickedPlaces.filter((place) =\u003e place.id !== selectedPlace.current)\n    );\n    setIsModalOpen(false);\n\n    const placesId = JSON.parse(localStorage.getItem(\"savedPlaces\")) || [];\n    localStorage.setItem(\n      \"savedPlaces\",\n      JSON.stringify(placesId.filter((id) =\u003e id !== selectedPlace.current))\n    );\n  }, []);\n```\n\u003ccode\u003euseCallback\u003c/code\u003e is similar to \u003ccode\u003euseEffect\u003c/code\u003e in that it accepts a function and a dependency array. However, it memoizes the function, storing it in React's internal memory. This prevents the function from being recreated unnecessarily, which is particularly helpful when it’s used as a dependency in useEffect or other hooks.\n\n### 🛠 Cleanup Functions in useEffect\nFinally, useEffect supports cleanup functions, which are essential when working with intervals, timeouts, or subscriptions. For example:\n```javascript\nuseEffect(() =\u003e {\n    const interval = setInterval(() =\u003e {\n      setDeletingTime((prevTime) =\u003e prevTime - 100);\n    }, 100);\n\n    return () =\u003e {\n      clearInterval(interval);\n    };\n  }, []);\n```\nThe cleanup function runs either when the component is unmounted or before the effect re-runs. This ensures that we don’t leave unnecessary intervals or subscriptions running in the background, which could cause performance issues.\n\n---\n\n\u003cp align=\"center\"\u003e🐸 This project is a practice exercise I learned from the \u003ca href='https://www.udemy.com/course/react-the-complete-guide-incl-redux/?couponCode=ST7MT110524'\u003eAcademind's React Course\u003c/a\u003e 🐸\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fch0ripain%2Freact-side-effects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fch0ripain%2Freact-side-effects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fch0ripain%2Freact-side-effects/lists"}