Using Fetcher keys to conditionally render a component

[arpitdalal]

I was under the impression that when keys were introduced with Remix 2.2.0, fetchers wouldn't be canceled when the component that made that call unmounts. But, I think I misunderstood this and would like to confirm this behavior.
I've made a simple example of completing tasks and using fetcher keys for optimistic updates. There are 2 versions, one uses conditional rendering the CompleteTask component which makes the fetcher request, while the other approach hides the CompleteTask component using CSS. The conditional rendering approach doesn't work because the request made by the fetcher actually gets canceled in that case while in the CSS approach, the request actually goes through and thus Remix revalidates the route and it all works fine!
While the CSS approach works fine, I was under the impression that now we can conditionally render the component that makes the fetcher call and the call won't be aborted by Remix if the component gets unmounted.

[sergiodxa]

In your remix.config.js you need to enable the future flag v3_fetcherPersist

[arpitdalal]

Yes! I guess I missed this in the release notes, thanks @sergiodxa!