Reactjs, useEffect выполняется несколько раз

Я создал кастомный хук. В нем есть хук useEffect, в начале он срабатывает два раза, а затем каждый раз при изменении состояния других компонентов. Как избежать лишних обновлений???

import {useState, useCallback, useEffect} from 'react';

const storageName = "UserData";

export const useAuth = () => {
    const [token, setToken]   = useState(null);
    const [userId, setUserId] = useState(null);

    const login = useCallback( (token, userId) => {
        setToken(token);
        setUserId(userId);

        localStorage.setItem(storageName, JSON.stringify({ token, userId }));
    }, [] );

    const logout = useCallback( () => {
        setToken(null);
        setUserId(null);

        localStorage.removeItem(storageName);
    }, [] );

    useEffect(() => {
        console.log('effect');
        const data = JSON.parse(localStorage.getItem(storageName));

        if(data && data.token && data.userId) {
            login(data.token, data.userId);
        }
    }, [login]);


    return {login, logout, token, userId};
}