useEffect бесконечный цикл

Question

Несмотря на передачу пустого массива, useEffect по-прежнему создает бесконечный цикл, когда я пытаюсь обновить глобальное состояние. Я пытался не передавать пустой массив, добавлять зависимости и даже пытался использовать ловушку useState внутри самого компонента, но, похоже, ничего не работает. В вызове API нет ничего плохого, когда я удаляю функцию для обновления состояния, в котором нет цикла. Когда я делаю это где-нибудь еще в моем коде, все работает нормально. Вот функциональный компонент, в котором вызывается useEffect.

const Posts = () => {
    const [{auth}] = useAuth();
    const [{profile},, setPosts] = useProfile();
    const {getPostsByUser} = PostApi()
    useEffect(() => {
        const fetch = async () => {
            const response = await getPostsByUser(auth.user._id, auth.token)
            setPosts(response)
        }
        fetch()
    }, [])
    console.log(profile)
    return(
        <div className="User-Post">
            <div className="New-Post">
                <NewPost />
            </div>
            <div className="User-Posts-Content">
                {
                    profile.posts ? profile.posts.map((item, key) => {
                        return <Post post={item} />
                    }) : null
                }
            </div>
        </div>
    )
}

Вот хук useProfile:

const useProfile = () => {
    const [{...profile}, setState] = useStore()

    const setPosts = posts => {
        setState(state => ({
            ...state,
            profile: {
                ...state.profile,
                posts: posts
            }
        }))
    }

    return [profile, setPosts]
}

Вот глобальное хранилище:

function makeStore() {
    // Make a context for the store
    const Context = React.createContext();

    // Make a provider that takes an initialValue
    const Provider = ({ initialValue, children }) => {
      // Make a new state instance (could even use immer here!)
      const [state, setState] = useState(initialValue);
      // Memoize the context value to update when the state does
      const contextValue = useMemo(() => [state, setState], [state]);

      // Provide the store to children
      return <Context.Provider value={contextValue}>{children}</Context.Provider>;
    };

    // A hook to help consume the store
    const useStore = () => useContext(Context);

    return { Provider, useStore };
}

Answer 1

это может помочь

  const [toggle, setToggle] = useState(false);
   useEffect(() => {
        const fetch = async () => {
            const response = await getPostsByUser(auth.user._id, auth.token)
            setPosts(response)
        }
        fetch()
    }, toggle)

использовать эту структуру при необходимости