如何在组件中使用 useHook，而不是将其返回的值作为 prop 传递给使用 react 和 typescript 的组件？

Question

i want to use useHook within the component itself rather than passing it as a prop to each component using react and typescript.

what i am trying to do? I have a useHook named useRefresh which returns isLoading state. This isLoading state is used to display a loading indicator in each of the pages.

so i have three pages and whenever this isLoading is true should display a loading indicator in these pages.

below is my code,

function App(){
    const user = useGetUser(); 
    return (
        <Router>
            <Switch>
                <Route
                    path="/"
                    render={props: any => (
                        user ? (<Main {...props} />) : (
                            <LoginPage/>
                        );
                    )}
                </Route>
            </Switch>
        </Router>
    );
}

export function useLoad() {
    const { refetch: refetchItems } = useGetItems();
    const { refetch: refetchOwnedItems } = useListOwnedItems();
    return async function() {
        await refreshCompany();
        refetchItems();
        refetchOwnedItems();
    };  
}

function useAnother(Id: string) {
    const [compId, setCompId] = React.useState(undefined);
    const [isLoading, setIsLoading] = React.useState(false);
    const comp = useCurrentComp(Id);
    const load = useLoad();
    if (comp && comp.id !== compId) {
        setCompId(comp.id);
        const prevCompId = compId !== undefined;
        if (prevCompId) {
            setIsLoading(true);
            load().then(() => {
                setIsLoading(false);
            });
        }
    }
}


function Main ({user}: Props) {
    useAnother(user.id);
    return (
        <Router>
            <Switch>
                <Route 
                    path="/" 
                    render={routeProps => (
                        <FirstComp {...routeProps} />
                    )}
                />
                <Route 
                    path="/items" 
                    render={routeProps => (
                        <SecondComp {...routeProps} />
                    )}
                />
                //many other routes like these
            </Switch>
        </Router>
    );
}


function FirstComp () {
    return(
        <Wrapper>
            //some jsx
        </Wrapper>
    );
}

function SecondComp () {
    return(
        <Wrapper>
            //some jsx
        </Wrapper>
    );
}

Now i want to pass isLoading state to each of the components in Main component....so i have passed it like below,

function Main ({user}: Props) {
    const isLoading = useAnother(user.id); //fetching isLoading here from useHook
    return (
        <Router>
            <Switch>
                <Route 
                    path="/" 
                    render={routeProps => (
                        <FirstComp isLoading={isLoading} {...routeProps} />
                    )}
                />
                <Route 
                    path="/items" 
                    render={routeProps => (
                        <SecondComp isLoading={isLoading} {...routeProps} />
                    )}
                />
                //many other routes like these
            </Switch>
        </Router>
    );
}


function FirstComp ({isLoading}: Props) {
    return(
        <Wrapper>
             displayIndicatorWhen(isLoading);
            //some jsx
        </Wrapper>
    );
}

function SecondComp ({isLoading}: Props) {
    return(
        <Wrapper>
            displayIndicatorWhen(isLoading);
            //some jsx
        </Wrapper>
    );
}

This works. but doesnt seem like a right approach to me.. i dont want to pass this isLoading state as a prop to each of these components. there are more than 10 of them.

is there someway that i can do it other way than this. could someone help me with this. thanks.

Answer 1

The most common solution is to create a context that wraps the entire tree of components. This context holds the state that your hook pulls in

////LoadingContext.tsx
const LoadingContext =  createContext();

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

    return (
        <LoadingContextProvider.Provider
            value={{
               isLoading,
               setIsLoading
            }}
        />
    )

}

export const useLoading = () => useContext(LoadingContext);

You need to wrap the context around anything that will be calling useLoading :

import { LoadingContextProvider } from './LoadingContext' //or wherever this is relative to Main.tsx 

<LoadingContextProvider>
    <Router>
       ...(router stuff)
    </Router>
</LoadingContextProvider>

Now you can call useLoading in your lower-level components.

//in another file defining a lower-level component:
import { useLoading } from '../../LoadingContext' //or wherever the context stuff is relative to this component definition


const FirstComp = () => 
    const [isLoading, setIsLoading] = useLoading();

    const handleClick = () => {
        setIsLoading(true);
        callMyApi().then(() => setIsLoading(false));
    } 

    if(isLoading){
        return <LoadingGif />
    }
    else{
        return <div onClick={handleClick}>Click me!</div>
    }
)}

Answer 2

What you would like to accomplish here is called global state. There are many ways to do it, but I think the simplest is the native React Context API.

All you have to do is create a ContextProvider and then use the useContext hook inside your components to access the values it provides.

Here is an example that should work for your case:

Main.js

export const LoadingContext = React.createContext(true); //creating and exporting the context

function Main ({user}: Props) {
    const isLoading = useAnother(user.id); //fetching isLoading here from useHook
    return (
        <LoadingContext.Provider value={isLoading}> {/* providing the value to the children */}
            <Router>
                <Switch>
                    <Route 
                        path="/" 
                        render={routeProps => (
                            <FirstComp {...routeProps} />
                        )}
                    />
                    <Route 
                        path="/items" 
                        render={routeProps => (
                            <SecondComp {...routeProps} />
                        )}
                    />
                    //many other routes like these
                </Switch>
            </Router>
        </LoadingContext.Provider>
    );
}

export default Main;

Other components

import {LoadingContext} from './Main.js'

function FirstComp ({}: Props) {
    const isLoading = useContext(LoadingContext); //accessing the value
    return(
        <Wrapper>
             displayIndicatorWhen(isLoading);
            //some jsx
        </Wrapper>
    );
}

function SecondComp ({}: Props) {
    const isLoading = useContext(LoadingContext); //accessing the value
    return(
        <Wrapper>
            displayIndicatorWhen(isLoading);
            //some jsx
        </Wrapper>
    );
}