useContext in React Native and Best Practices

In React Native, the useContext hook allows you to access the value of a context provided by a parent component. It is particularly useful when you want to access and update the state across multiple components without passing props down through the component tree.

Here’s how you can use useContext in React Native:

/** auth-content.tsx */

// react
import React, {
    createContext,
    Dispatch,
    ReactElement,
    ReactNode,
    SetStateAction,
    useContext,
    useState
} from "react";

type AuthContextType = {
    user: { [key: string]: any } | null;
    setUser: Dispatch<SetStateAction<{ [key: string]: any } | null>>;
};

const AuthContext = createContext<AuthContextType | undefined>(undefined);

function useAuth(): AuthContextType {
    const context = useContext(AuthContext);
    if (!context) {
        throw new Error("useAuth must be used within an AuthProvider");
    }
    return context;
}

const AuthProvider = (props: { children: ReactNode }): ReactElement => {
    const [user, setUser] = useState<{ [key: string]: any } | null>(null);

    return <AuthContext.Provider {...props} value={{ user, setUser }} />;
};

export { AuthProvider, useAuth };

/** app.tsx */

import { AuthProvider } from "@contexts/auth-context";

export default function App() {
  
    return (
       <AuthProvider>
           <Navigator />
       </AuthProvider>
    );
}

// set user
const { setUser } = useAuth();

// get user
const { user } = useAuth();

It's important to understand how and when to use it correctly to ensure optimal performance.

The performance of useContext largely depends on the use case and how it's implemented.

1. Context Providers: The performance impact of useContext is mainly influenced by the number of context providers in the component tree. If you have a large number of context providers, accessing context values with useContext may cause additional re-renders, which can impact performance.
2. Memoization: React automatically memoizes the context value provided by the nearest context provider. This means that even if many components use useContext to access the same context value, it won't cause unnecessary re-renders. React efficiently compares context values to avoid unnecessary updates.
3. Avoid Excessive Usage: It’s important to use useContext judiciously and only when necessary. Overusing useContext can lead to code that is harder to maintain and understand. It's generally recommended to use context for values that are shared across many components in the application, rather than individual component-specific data.

Overall, here are some situations when you should consider using useContext:

1. Accessing global data: If you have data or state that needs to be accessible by multiple components throughout your application, you can store this data in a context and use the useContext hook to access it from any component within the context.
2. Avoiding prop drilling: Prop drilling is the process of passing down props through multiple levels of nested components, even if the intermediate components do not directly use the props. If you find yourself passing the same prop through multiple levels, it can be more efficient to use the useContext hook to directly access the required value from the context.
3. Simplifying component hierarchy: If your component tree structure becomes complex with multiple levels of components, using useContext can help simplify the hierarchy by eliminating the need to pass props explicitly between intermediate components.