🗑️ Deprecated useFetch

juliencrn · Feb 7, 2024 · 2660580 · 2660580
1 parent 1b29cec
commit 2660580
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 19 deletions.
diff --git a/.changeset/odd-camels-laugh.md b/.changeset/odd-camels-laugh.md
@@ -0,0 +1,5 @@
+---
+"usehooks-ts": patch
+---
+
+Depreciated `useFetch`, see documentation for more information
diff --git a/README.md b/README.md
@@ -45,11 +45,8 @@
 - [`useDebounceValue()`](https://usehooks-ts.com/react-hook/use-debounce-value)
 - [`useDocumentTitle()`](https://usehooks-ts.com/react-hook/use-document-title)
 - [`useEffectOnce()`](https://usehooks-ts.com/react-hook/use-effect-once)
-- [`useElementSize()`](https://usehooks-ts.com/react-hook/use-element-size)
 - [`useEventListener()`](https://usehooks-ts.com/react-hook/use-event-listener)
-- [`useFetch()`](https://usehooks-ts.com/react-hook/use-fetch)
 - [`useHover()`](https://usehooks-ts.com/react-hook/use-hover)
-- [`useImageOnLoad()`](https://usehooks-ts.com/react-hook/use-image-on-load)
 - [`useIntersectionObserver()`](https://usehooks-ts.com/react-hook/use-intersection-observer)
 - [`useInterval()`](https://usehooks-ts.com/react-hook/use-interval)
 - [`useIsClient()`](https://usehooks-ts.com/react-hook/use-is-client)
@@ -62,6 +59,7 @@
 - [`useMediaQuery()`](https://usehooks-ts.com/react-hook/use-media-query)
 - [`useOnClickOutside()`](https://usehooks-ts.com/react-hook/use-on-click-outside)
 - [`useReadLocalStorage()`](https://usehooks-ts.com/react-hook/use-read-local-storage)
+- [`useResizeObserver()`](https://usehooks-ts.com/react-hook/use-resize-observer)
 - [`useScreen()`](https://usehooks-ts.com/react-hook/use-screen)
 - [`useScript()`](https://usehooks-ts.com/react-hook/use-script)
 - [`useSessionStorage()`](https://usehooks-ts.com/react-hook/use-session-storage)

diff --git a/packages/usehooks-ts/README.md b/packages/usehooks-ts/README.md
@@ -45,11 +45,8 @@
 - [`useDebounceValue()`](https://usehooks-ts.com/react-hook/use-debounce-value)
 - [`useDocumentTitle()`](https://usehooks-ts.com/react-hook/use-document-title)
 - [`useEffectOnce()`](https://usehooks-ts.com/react-hook/use-effect-once)
-- [`useElementSize()`](https://usehooks-ts.com/react-hook/use-element-size)
 - [`useEventListener()`](https://usehooks-ts.com/react-hook/use-event-listener)
-- [`useFetch()`](https://usehooks-ts.com/react-hook/use-fetch)
 - [`useHover()`](https://usehooks-ts.com/react-hook/use-hover)
-- [`useImageOnLoad()`](https://usehooks-ts.com/react-hook/use-image-on-load)
 - [`useIntersectionObserver()`](https://usehooks-ts.com/react-hook/use-intersection-observer)
 - [`useInterval()`](https://usehooks-ts.com/react-hook/use-interval)
 - [`useIsClient()`](https://usehooks-ts.com/react-hook/use-is-client)
@@ -62,6 +59,7 @@
 - [`useMediaQuery()`](https://usehooks-ts.com/react-hook/use-media-query)
 - [`useOnClickOutside()`](https://usehooks-ts.com/react-hook/use-on-click-outside)
 - [`useReadLocalStorage()`](https://usehooks-ts.com/react-hook/use-read-local-storage)
+- [`useResizeObserver()`](https://usehooks-ts.com/react-hook/use-resize-observer)
 - [`useScreen()`](https://usehooks-ts.com/react-hook/use-screen)
 - [`useScript()`](https://usehooks-ts.com/react-hook/use-script)
 - [`useSessionStorage()`](https://usehooks-ts.com/react-hook/use-session-storage)

diff --git a/packages/usehooks-ts/src/useFetch/useFetch.md b/packages/usehooks-ts/src/useFetch/useFetch.md
@@ -1,16 +1,9 @@
-Here is a React Hook which aims to retrieve data on an API using the native Fetch API.
+`useFetch` is now **deprecated** and will be removed in the next major release.
 
-I used a reducer to separate state logic and simplify testing via functional style.
+The current implementation is not enterprise-grade and it's a bad example of `useEffect` usage, see this [talk on Youtube](https://www.youtube.com/watch?v=bGzanfKVFeU) for more information.
 
-The received data is saved (cached) in the application via useRef, but you can use LocalStorage (see [`useLocalStorage()`](/react-hook/use-local-storage)) or a caching solution to persist the data.
+Instead, consider these options:
 
-The fetch is executed when the component is mounted and if the url changes. If ever the url is undefined, or if the component is unmounted before the data is recovered, the fetch will not be called.
-
-This hook also takes the request config as a second parameter in order to be able to pass the authorization token in the header of the request, for example. Be careful though, the latter does not trigger a re-rendering in case of modification, go through the url params to dynamically change the request.
-
-**Side notes:**
-
-- To better understand how this hook works step by step, you can read [this article](https://www.smashingmagazine.com/2020/07/custom-react-hook-fetch-cache-data/) from "Smashing Magazine" which explains how to build a custom react hook to fetch and cache data
-- For usage in SSR, consider using [window.fetch.polyfill](https://www.npmjs.com/package/whatwg-fetch)
-- It's a very simple fetch hook for basic use cases and learning purposes.
-  For advanced usages and optimisations, see these other hooks more powerfull like [useSWR](https://swr.vercel.app/), [useQuery](https://github.com/tannerlinsley/react-query) or if you're using Redux Toolkit, consider [RTK Query](https://redux-toolkit.js.org/rtk-query/overview).
+- Use your own framework feature (like `RSC` or `getServerSideProps` for NextJS by example)
+- Use caching libraries like [`useSWR`](https://swr.vercel.app/) or [`react-query`](https://github.com/tannerlinsley/react-query)
+- Use the React built-in `use` hook.
diff --git a/packages/usehooks-ts/src/useFetch/useFetch.ts b/packages/usehooks-ts/src/useFetch/useFetch.ts
@@ -33,6 +33,7 @@ type Action<T> =
   | { type: 'error'; payload: Error }
 
 /**
+ * @deprecated - `useFetch` is deprecated and will be removed in the next major version. See the documentation for more information.
  * Custom hook for making HTTP requests and managing the state of the request.
  * @template T - The type of data expected in the response.
  * @param {string | undefined} url - The URL to make the HTTP request to.

diff --git a/scripts/updateReadme.mjs b/scripts/updateReadme.mjs
@@ -12,9 +12,17 @@ const srcDir = path.resolve('./packages/usehooks-ts/src')
 const readmeFile = path.resolve('./README.md')
 const readmeUseHook = path.resolve('./packages/usehooks-ts/README.md')
 
+const excludeHooks = [
+  'useSsr', // @deprecated
+  'useImageOnLoad', // @deprecated
+  'useElementSize', // @deprecated
+  'useFetch', // @deprecated
+]
+
 const markdown = fs
   .readdirSync(srcDir)
   .filter(isHookFile)
+  .filter(filename => !excludeHooks.includes(filename))
   .map(formatHook)
   .reduce((acc, line) => acc + line, '')
 

diff --git a/scripts/updateTestingIssue.mjs b/scripts/updateTestingIssue.mjs
@@ -11,6 +11,7 @@ const excludeHooks = [
   'useSsr', // @deprecated
   'useImageOnLoad', // @deprecated
   'useElementSize', // @deprecated
+  'useFetch', // @deprecated
   'useIsomorphicLayoutEffect', // Combination of useLayoutEffect and useEffect without custom logic
 ]