Warn: State updates from the useState() and useReducer() Hooks don't support the " + ... MERN Stack Application

Question

Why my setUser returns that warning when I console.log it? :

function dispatchAction(fiber, queue, action) {
  {
    if (typeof arguments[3] === 'function') {
      error("State updates from the useState() and useReducer() Hooks don't support the " + 'second callback argument. To execute a side effect after ' + 'rendering, declare it in the component body with useEffect().');
    }
  }

Here is the function:

const UserContextProvider = (props) => {
    const [user, setUser] = useState({})
    
    useEffect(() => {
        fetch(`${API}/auth/user`, {
            method: 'GET',
            withCredentials: true,
            credentials: 'include'
        })
        .then (response => response.json())
        .then (response => {
            setUser(response.user)
            console.log(setUser)
        })
        .catch (error => {
            console.error (error);
        });
    }, [setUser])

Note: The response.user is just an object. And I can access the data in the user with no problem in the children components.

Answer 1

I was having this problem too; in my case it was happening because I wasn't declaring all of the passed contexts in child components. For instance, in my provider I had:

<Outlet context={[user, setUser, filter, setFilter]} />

But I was only declaring the content states within my child components:

const [user, filter] = useOutletContext();

So it was thinking that the filter state was the setter for user. I changed it to include all of the passed contexts:

const [user, setUser, filter, setFilter] = useOutletContext();

And it worked fine.