How to fetch data in a React component and handle cancellation?

How to fetch data in a React component and handle cancellation?

• A. Fetch data directly in the render method to keep UI responsive.
• B. Use useEffect to fetch data when dependencies change; cancel in cleanup with AbortController or cancel tokens; handle loading and error states.
• C. Use useLayoutEffect for data fetching.
• D. Data fetch cannot be canceled.

Answer: (B)

Fetching data as a side effect after rendering is the right approach. In functional components, useEffect runs after the component renders and can re-run whenever its dependencies change, making it the natural place to start a data request when something the UI relies on updates. To handle cancellation, create an AbortController inside the effect and pass its signal to fetch (or to other data libraries that support cancellation). In the cleanup function of the effect, call abort so if the component unmounts or the dependencies shift before the request finishes, the in-flight request is canceled. This prevents memory leaks and avoids trying to update state on an unmounted component. You’ll typically also track loading and error states in state so you can render a loading indicator or an error message while the request is in flight or if it fails. For example, using fetch with an AbortController succinctly shows the pattern: set loading true, start the request with the controller signal, update data on success, set an error if something goes wrong (ignoring AbortError), and finally reset loading. The cleanup aborts the request on unmount or dependency change. Don’t fetch inside the render method, since render should be idempotent and synchronous. That would trigger requests on every render and can lead to infinite loops. Using a layout effect is generally unnecessary for data fetching and can block visual updates; useEffect is the appropriate hook for this side effect. Cancellation is possible and common with fetch via AbortController, and similar cancellation mechanisms exist with other libraries. The idea is to tie the request to the component’s lifecycle so you don’t attempt to update state after it’s gone.

Fetching data as a side effect after rendering is the right approach. In functional components, useEffect runs after the component renders and can re-run whenever its dependencies change, making it the natural place to start a data request when something the UI relies on updates. To handle cancellation, create an AbortController inside the effect and pass its signal to fetch (or to other data libraries that support cancellation). In the cleanup function of the effect, call abort so if the component unmounts or the dependencies shift before the request finishes, the in-flight request is canceled. This prevents memory leaks and avoids trying to update state on an unmounted component.

You’ll typically also track loading and error states in state so you can render a loading indicator or an error message while the request is in flight or if it fails. For example, using fetch with an AbortController succinctly shows the pattern: set loading true, start the request with the controller signal, update data on success, set an error if something goes wrong (ignoring AbortError), and finally reset loading. The cleanup aborts the request on unmount or dependency change.

Don’t fetch inside the render method, since render should be idempotent and synchronous. That would trigger requests on every render and can lead to infinite loops. Using a layout effect is generally unnecessary for data fetching and can block visual updates; useEffect is the appropriate hook for this side effect.

Cancellation is possible and common with fetch via AbortController, and similar cancellation mechanisms exist with other libraries. The idea is to tie the request to the component’s lifecycle so you don’t attempt to update state after it’s gone.