Can I have react- hooks / exhaustive -deps for a custom hook?

Regarding the exhaustive-deps rule for React Hooks, this rule is crucial when using React hooks such as useEffect, useMemo, and useCallback. Implemented by the exhaustive-deps rule in the eslint-plugin-react-hooks package, its primary purpose is to ensure you include all dependencies from the external scope to avoid errors caused by missing dependencies.

In practice, for custom hooks, it is also recommended to apply the exhaustive-deps rule. This ensures that dependencies within your custom hooks are properly managed, making their behavior predictable and avoiding bugs resulting from dependencies not updating correctly.

For example, consider a custom hook that subscribes to data changes for a specific user:

javascript
import { useEffect } from 'react';

function useSubscribeToUser(userId, onUserData) {
    useEffect(() => {
        const subscription = subscribeToUserData(userId, onUserData);

        return () => {
            unsubscribeFromUserData(subscription);
        };
    }, [userId, onUserData]); // This applies the `exhaustive-deps` rule
}

function subscribeToUserData(userId, callback) {
    // Assume this is a function to set up the subscription
}

function unsubscribeFromUserData(subscription) {
    // Assume this is a function to unsubscribe
}

In this example, useEffect uses the external variables userId and onUserData. According to the exhaustive-deps rule, these dependencies must be included in the dependency array. This ensures that when userId or onUserData changes, useEffect re-runs and re-subscribes to the user data.

In summary, to ensure the robustness and correctness of custom hooks, it is advisable to follow the exhaustive-deps rule during development, even for custom hooks. This practice improves code quality and reduces potential runtime errors.