Registry / testing / react-fetch-component

react-fetch-component

library7.0.1jsnpmunverified

A React component for declarative data fetching using the Fetch API. Current version 7.0.1 provides a simple <Fetch> component that handles loading, error, and success states. Active development with frequent releases. Key differentiators: lightweight, no external dependencies beyond React, works with any fetch-compatible API, and supports TypeScript out of the box. Ideal for small to medium projects where a full data fetching library like React Query or SWR would be overkill.

testing

npm install react-fetch-component

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-FETCH-COMPON

react-fetch-component

testingjavascriptv7.0.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Fetch

✓ import { Fetch } from 'react-fetch-component'

✗ import Fetch from 'react-fetch-component'

Named export, not default. This is the main component.

useFetch

✓ import { useFetch } from 'react-fetch-component'

✗ import useFetch from 'react-fetch-component'

Named export, available as a hook alternative to the component.

FetchProps

✓ import type { FetchProps } from 'react-fetch-component'

✗ import { FetchProps } from 'react-fetch-component' (no type import)

TypeScript users should use the type import for better tree-shaking and to avoid bundling runtime code.

Shows the basic usage of the <Fetch> component with loading, error, and success states.

import React from 'react'; import { Fetch } from 'react-fetch-component'; function App() { const url = process.env.REACT_APP_API_URL ?? 'https://api.example.com/data'; return ( <Fetch url={url}> {({ loading, error, data }) => { if (loading) return <p>Loading...</p>; if (error) return <p>Error: {error.message}</p>; return <pre>{JSON.stringify(data, null, 2)}</pre>; }} </Fetch> ); } export default App;

Debug

Known issues

breakingVersion 7.0.0 removed the 'render' prop in favor of children as a function. Old code using <Fetch render={...} /> will break.

fix

Replace render prop with children: <Fetch url="...">{...}</Fetch>

affects: <7.0.0

deprecatedThe 'response' property in render props was deprecated in v7. Use 'data' instead.

fix

Replace 'response' with 'data' in the render function.

affects: >=7.0.0

gotchaThe component does not abort fetch requests on unmount by default. This can cause state updates on unmounted components and memory leaks.

fix

Set the 'abortOnUnmount' prop to true or use the useFetch hook which supports aborting via AbortController.

affects: >=1.0.0

gotchaWhen using the 'useFetch' hook, you must ensure the component is mounted before calling the returned 'refetch' function to avoid updating state on unmounted component.

fix

Check if component is mounted or use a cleanup flag.

affects: >=7.0.0

deprecatedThe 'onComplete' and 'onError' callbacks in the <Fetch> component are deprecated in v7 in favor of handling state in the render function.

fix

Remove callbacks and handle side effects in componentDidUpdate or useEffect.

affects: >=7.0.0

Errors

Common errors & fixes

TypeError: Cannot read property 'loading' of undefined

Using the render props incorrectly where children is not a function.

fix

Ensure children is a function: <Fetch url="...">{({ loading }) => ...}</Fetch>

Warning: Can't perform a React state update on an unmounted component.

Fetch request completes after component unmounts and updates state.

fix

Set abortOnUnmount prop to true on <Fetch> or use cleanup in custom hook.

Module not found: Can't resolve 'react-fetch-component'

Package not installed or incorrect import path.

fix

Run 'npm install react-fetch-component' and verify the import is correct: 'import { Fetch } from 'react-fetch-component''

TypeScript error: Property 'abortOnUnmount' does not exist on type 'IntrinsicAttributes & FetchProps'

FetchProps type definition missing the 'abortOnUnmount' property in older TypeScript definitions.

fix

Upgrade to react-fetch-component v7.0.1+ which includes the missing type. If still missing, manually augment the type.

Upgrade

Version history

7.0.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency: React 16.3+ required for component context and hooks

Agent activity

9 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/techniq/react-fetch-component ↗

packagereact-fetch-component ↗

homepagehttps://github.com/techniq/react-fetch-component ↗