自定义挂钩 State 更改未更新所有组件

Question

I have a custom hook defined as follows:

export const useData = (): [boolean, () => Promise<void>] => {

    const [isLoading, setIsLoading] = useState(false);

    const fetch = async () => {
        setIsLoading(true);
        await new Promise<void>(resolve => setTimeout(resolve, 2500)); // mock a network request timeout
        setIsLoading(false);
    };

    return [isLoading, fetch];
};

I have two components, A and B that then use the hook as follows:

const [ isLoading, fetch ] = useData();

My problem is when component A calls fetch , isLoading reflects the proper value in component A but not in Component B . In other words, isLoading is never updated in B when fetch is called by A . Am I missing something here?

Any advice would be appreciated. Thanks.

Answer 1

My problem is when component A calls fetch, isLoading reflects the proper value in component A but not in Component B. In other words, isLoading is never updated in B when fetch is called by A. Am I missing something here?

Yes, hooks are not meant to be used like that. From docs:

Do two components using the same Hook share state? No. Custom Hooks are a mechanism to reuse stateful logic (such as setting up a subscription and remembering the current value), but every time you use a custom Hook, all state and effects inside of it are fully isolated.

I think you must somehow combine your hook with Context API to achieve your goal.