# give/4.18.0/src/Views/Components/ListTable/hooks/useFallbackAsInitial.ts

GiveWP – Donation Plugin and Fundraising Platform, version 4.18.0. 24 lines.

- Page: https://pluginprobe.com/plugins/give/4.18.0/code/src/Views/Components/ListTable/hooks/useFallbackAsInitial.ts
- Raw: https://pluginprobe.com/plugins/give/4.18.0/raw/src/Views/Components/ListTable/hooks/useFallbackAsInitial.ts
- Modified: 2023-01-18T19:19:38+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/give/4.18.0/code/src/Views/Components/ListTable/hooks/useFallbackAsInitial.ts#L10-L20`.

```typescript
import {useRef, useEffect} from 'react';

// use fallbackData as the initial data on component mount, instead of default data whenever there's a cache miss
// adapted from https://viralganatra.com/how-to-fix-swr-to-work%20correctly-with-initialData-or-fallbackData/

export default function useFallbackAsInitial(useSWRNext) {
    return (key, fetcher, config) => {
        const hasMounted = useRef(false);

        useEffect(() => {
            hasMounted.current = true;
        }, []);

        // Actual SWR hook.
        const swr = useSWRNext(key, fetcher, {
            ...config,
            fallbackData: hasMounted.current ? undefined : config?.fallbackData,
            revalidateOnMount: hasMounted.current && config?.fallbackData,
        });

        return swr;
    };
}

```