Cannot update a component while rendering a different component warning

This warning was introduced since React V16.3.0.

If you are using functional components you could wrap the setState call into useEffect.

Code that does not work:

const HomePage = (props) => {
    
  props.setAuthenticated(true);

  const handleChange = (e) => {
    props.setSearchTerm(e.target.value.toLowerCase());
  };

  return (
    <div key={props.restInfo.storeId} className="container-fluid">
      <ProductList searchResults={props.searchResults} />
    </div>
  );
};

Now you can change it to:

const HomePage = (props) => {
  // trigger on component mount
  useEffect(() => {
    props.setAuthenticated(true);
  }, []);

  const handleChange = (e) => {
    props.setSearchTerm(e.target.value.toLowerCase());
  };

  return (
    <div key={props.restInfo.storeId} className="container-fluid">
      <ProductList searchResults={props.searchResults} />
    </div>
  );
};

Please read the error message thoroughly. Mine was pointing to SignIn Component that had a bad setState. I had an onPress that was not an Arrow function.

It was like this:

onPress={navigation.navigate("Home", { screen: "HomeScreen" })}

I changed it to this:

onPress={() => navigation.navigate("Home", { screen: "HomeScreen" }) }

My error message was:

Warning: Cannot update a component (ForwardRef(BaseNavigationContainer)) while rendering a different component (SignIn). To locate the bad setState() call inside SignIn, follow the stack trace as described in https://reactjs.org/link/setstate-in-render in SignIn (at SignInScreen.tsx:20)

I just had this issue and it took me a bit of digging around before I realised what I'd done wrong – I just wasn't paying attention to how I was writing my functional component.

I was doing this:

const LiveMatches = (props: LiveMatchesProps) => {
  const {
    dateMatches,
    draftingConfig,
    sportId,
    getDateMatches,
  } = props;

  if (!dateMatches) {
    const date = new Date();
    getDateMatches({ sportId, date });
  };

  return (<div>{component stuff here..}</div>);
};

I had just forgotten to use useEffect before dispatching my redux call of getDateMatches()

So it should have been:

const LiveMatches = (props: LiveMatchesProps) => {
  const {
    dateMatches,
    draftingConfig,
    sportId,
    getDateMatches,
  } = props;

  useEffect(() => {
    if (!dateMatches) {
      const date = new Date();
      getDateMatches({ sportId, date });
    }
  }, [dateMatches, getDateMatches, sportId]);

  return (<div>{component stuff here..}</div>);
};

I think that this is important. It's from this post that @Red-Baron pointed out:

@machineghost : I think you're misunderstanding what the message is warning about.

There's nothing wrong with passing callbacks to children that update state in parents. That's always been fine.

The problem is when one component queues an update in another component, while the first component is rendering.

In other words, don't do this:

function SomeChildComponent(props) {
    props.updateSomething();
    return <div />
}

But this is fine:

function SomeChildComponent(props) {
    // or make a callback click handler and call it in there
    return <button onClick={props.updateSomething}>Click Me</button>
}

And, as Dan has pointed out various times, queuing an update in the same component while rendering is fine too:

function SomeChildComponent(props) {
  const [number, setNumber] = useState(0);

  if(props.someValue > 10 && number < 5) {
    // queue an update while rendering, equivalent to getDerivedStateFromProps
    setNumber(42);
  }

  return <div>{number}</div>
}

If useEffect cannot be used in your case or if the error is NOT because of Redux

I used setTimeout to redirect one of the two useState variables to the callback queue.

I have one parent and one child component with useState variable in each of them. The solution is to wrap useState variable using setTimeout:

setTimeout(() => SetFilterData(data), 0);

Example below

Parent Component

import ExpenseFilter from '../ExpensesFilter'
    
function ExpensesView(props) {
    
    const [filterData, SetFilterData] = useState('')
    
    const GetFilterData = (data) => {
       // SetFilterData(data);

       //*****WRAP useState VARIABLE INSIDE setTimeout WITH 0 TIME AS BELOW.*****
       setTimeout(() => SetFilterData(data), 0);
    
    }
    
    const filteredArray = props.expense.filter(expenseFiltered => 
      expenseFiltered.dateSpent.getFullYear().toString() === filterData);
    
    
    return (
    <Window>
      <div>
        <ExpenseFilter FilterYear = {GetFilterData}></ExpenseFilter>

Child Component

const ExpensesFilter = (props) => {
    
    const [filterYear, SetFilterYear] = useState('2022')
    
    const FilterYearListener = (event) => {
        event.preventDefault()
        SetFilterYear(event.target.value)
    }
    
    props.FilterYear(filterYear)
    
    return (

If you use React Navigation and you are using the setParams or setOptions you must put these inside method componentDidMount() of class components or in useEffects() hook of functional components.

Using React and Material UI (MUI) I changed my code from:

<IconButton onClick={setOpenDeleteDialog(false)}>
        <Close />
      </IconButton>

To:

<IconButton onClick={() => setOpenDeleteDialog(false)}>
        <Close />
      </IconButton>

Simple fix

Cannot update a component while rendering a different component warning

I have the same problem but when I dispatch an action inside a component rendered. You should dispatch the action inside useEffect hook to fix that problem

//dispatch action to inform user that 'Marked days already have hours!'
  React.useEffect(() => {
    if (btn_class == 'redButton') {
      dispatch({ type: ActionType.ADD_NOTIFICATION, payload: 'Marked days already have hours!' });
    } else {
      dispatch({ type: ActionType.ADD_NOTIFICATION, payload: '' });
    }
  }, [btn_class, dispatch]);

also use union type for btn-class variable *`

type ButtonState = 'btnAddDay' | 'redButton' | 'btnAddDayBlue' | 'btnAddDayGreen';

`*

How I solved it:

As @ADTC mentions in his answer:

This is clearly one of those problems where the correct solution depends on the context in which the problem occurs.

My Problem/Context:

'use client';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';

enum Role {
  Admin = 'admin',
  Client = 'client',
}

const Page = () => {
  const router = useRouter();
  const [role, setRole] = useState<Role | undefined>(undefined);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  if(role) {           // <--------------  Problem: React doesn't like this approach
    switch (role) {
      case Role.Admin:
        router.push('/admin');
        return;
      case Role.Client:
        router.push('/client');
        return;
    }
  }

  return (
      <main>
          <form
            onSubmit={(e) => {
              e.preventDefault();
              if (username === Role.Admin && password === Role.Admin) return setRole(Role.Admin);
              return setRole(Role.Client);
            }}
          >
            <input
              onChange={(e) => setUsername(e.currentTarget.value)}
              placeholder="Username"
            />
            <input
              onChange={(e) => setPassword(e.currentTarget.value)}
              placeholder="Password"
            />
            <button type="submit">
              Login
            </button>
          </form>
      </main>
  );
};

export default Page;

Solved with useEffect

'use client';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';

enum Role {
  Admin = 'admin',
  Client = 'client',
}

const Page = () => {
  const router = useRouter();
  const [role, setRole] = useState<Role | undefined>(undefined);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  useEffect(() => {      // <--------------  Solution: use useEffect
    if (!role) return;
    switch (role) {
      case Role.Admin:
        router.push('/admin');
        return;
      case Role.Client:
        router.push('/client');
        return;
    }
  }, [role]);

  return (
      <main>
          <form
            onSubmit={(e) => {
              e.preventDefault();
              if (username === Role.Admin && password === Role.Admin) return setRole(Role.Admin);
              return setRole(Role.Client);
            }}
          >
            <input
              onChange={(e) => setUsername(e.currentTarget.value)}
              placeholder="Username"
            />
            <input
              onChange={(e) => setPassword(e.currentTarget.value)}
              placeholder="Password"
            />
            <button type="submit">
              Login
            </button>
          </form>
      </main>
  );
};

export default Page;

The useEffect will in this case be triggered whenever the [role] value is changed.

Minimal reproducing example

I was a bit confused as to what exactly triggers the problem, having a minimal immediately runnable example helped me grasp it a little better:

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function NotMain(props) {
  props.setN(1)
  return <div>NotMain</div>
}

function Main(props) {
  const [n, setN] = React.useState(0)
  return <>
    <NotMain setN={setN} />
    <div>Main {n}</div>
  </>
}

ReactDOM.render(
  <Main/>,
  document.getElementById('root')
);
</script>
</body>
</html>

fails with error:

react-dom.development.js:61 Warning: Cannot update a component (`Main`) while rendering a different component (`NotMain`). To locate the bad setState() call inside `NotMain`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

followed by a stack trace:

    at NotMain (<anonymous>:16:9)
    at Main (<anonymous>:21:31)

Presumably 16:9 would be the exact line where props.setN(1) is being called from, but the line numbers are a bit messed up because of the Babel JSX translation.

The solution like many other answers said is to do instead:

function NotMain(props) {
  React.useEffect(() => { props.setN(1) }, [])
  return <div>NotMain</div>
}

Intuitively, I think that the general idea of why this error happens is that:

You are not supposed to updat state from render methods, otherwise it could lead to different results depending on internal the ordering of how React renders things.

and when using functional components, the way to do that is to use hooks. In our case, useEffect will run after rendering is done, so we are fine doing that from there.

When using classes this becomes slightly more clear and had been asked for example at:

• Calling setState in render is not avoidable
• Calling setState() in React from render method

When using functional components however, things are conceptually a bit more mixed, as the component function is both the render, and the code that sets up the callbacks.

My case was using setState callback, instead of setState + useEffect

BAD ❌

  const closePopover = useCallback(
    () =>
      setOpen((prevOpen) => {
        prevOpen && onOpenChange(false);
        return false;
      }),
    [onOpenChange]
  );

GOOD ✅

  const closePopover = useCallback(() => setOpen(false), []);

  useEffect(() => onOpenChange(isOpen), [isOpen, onOpenChange]);

I was able to solve this after coming across a similar question in GitHub which led me to this comment showing how to pinpoint the exact line within your file causing the error. I wasn't aware that the stack trace was there. Hopefully this helps someone!

See below for my fix. I simply converted the function to use callback.

Old code

function TopMenuItems() {
  const dispatch = useDispatch();

  function mountProjectListToReduxStore(projects) {
    const projectDropdown = projects.map((project) => ({
      id: project.id,
      name: project.name,
      organizationId: project.organizationId,
      createdOn: project.createdOn,
      lastModifiedOn: project.lastModifiedOn,
      isComplete: project.isComplete,
    }));
    projectDropdown.sort((a, b) => a.name.localeCompare(b.name));
    dispatch(loadProjectsList(projectDropdown));
    dispatch(setCurrentOrganizationId(projectDropdown[0].organizationId));
  }
};

New code

function TopMenuItems() {
  const dispatch = useDispatch();

  const mountProjectListToReduxStore = useCallback((projects) => {
    const projectDropdown = projects.map((project) => ({
      id: project.id,
      name: project.name,
      organizationId: project.organizationId,
      createdOn: project.createdOn,
      lastModifiedOn: project.lastModifiedOn,
      isComplete: project.isComplete,
    }));
    projectDropdown.sort((a, b) => a.name.localeCompare(b.name));
    dispatch(loadProjectsList(projectDropdown));
    dispatch(setCurrentOrganizationId(projectDropdown[0].organizationId));
  }, [dispatch]);
};

I was facing same issue, The fix worked for me was if u are doing

setParams/setOptions

outside of useEffect then this issue is occurring. So try to do such things inside useEffect. It'll work like charm

TL;DR; For my case, what I did to fix the warning was to change from useState to useRef

react_devtools_backend.js:2574 Warning: Cannot update a component (`Index`) while rendering a different component (`Router.Consumer`). To locate the bad setState() call inside `Router.Consumer`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at Route (http://localhost:3000/main.bundle.js:126692:29)
    at Index (http://localhost:3000/main.bundle.js:144246:25)
    at Switch (http://localhost:3000/main.bundle.js:126894:29)
    at Suspense
    at App
    at AuthProvider (http://localhost:3000/main.bundle.js:144525:23)
    at ErrorBoundary (http://localhost:3000/main.bundle.js:21030:87)
    at Router (http://localhost:3000/main.bundle.js:126327:30)
    at BrowserRouter (http://localhost:3000/main.bundle.js:125948:35)
    at QueryClientProvider (http://localhost:3000/main.bundle.js:124450:21)

The full code for the context of what I did (changed from the lines with // OLD: to the line above them). However this doesn't matter, just try changing from useState to useRef!!

import { HOME_PATH, LOGIN_PATH } from '@/constants';
import { NotFoundComponent } from '@/routes';
import React from 'react';
import { Redirect, Route, RouteProps } from 'react-router-dom';
import { useAccess } from '@/access';
import { useAuthContext } from '@/contexts/AuthContext';
import { AccessLevel } from '@/models';

type Props = RouteProps & {
  component: Exclude<RouteProps['component'], undefined>;
  requireAccess: AccessLevel | undefined;
};

export const Index: React.FC<Props> = (props) => {
  const { component: Component, requireAccess, ...rest } = props;

  const { isLoading, isAuth } = useAuthContext();
  const access = useAccess();
  const mounted = React.useRef(false);
  // OLD: const [mounted, setMounted] = React.useState(false);

  return (
    <Route
      {...rest}
      render={(props) => {
        // If in indentifying authentication state as the page initially loads, render a blank page
        if (!mounted.current && isLoading) return null;
        // OLD: if (!mounted && isLoading) return null;

        // 1. Check Authentication is one step
        if (!isAuth && window.location.pathname !== LOGIN_PATH)
          return <Redirect to={LOGIN_PATH} />;
        if (isAuth && window.location.pathname === LOGIN_PATH)
          return <Redirect to={HOME_PATH} />;

        // 2. Authorization is another
        if (requireAccess && !access[requireAccess])
          return <NotFoundComponent />;

        mounted.current = true;
        // OLD: setMounted(true);
        return <Component {...props} />;
      }}
    />
  );
};

export default Index;

My example.

Code with that error:

<Form
    initialValues={{ ...kgFormValues, dataflow: dataflows.length > 0 ? dataflows[0].df_tpl_key : "" }}
    onSubmit={() => {}}
    render={({values, dirtyFields }: any) => {
      
      const kgFormValuesUpdated = {
        proj_key: projectKey,
        name: values.name,
        description: values.description,
        public: values.public,
        dataflow: values.dataflow,
        flavours: flavoursSelected,
        skipOCR: values.skipOCR
      };

      if (!_.isEqual(kgFormValues, kgFormValuesUpdated)) {
        setNewKgFormValues(kgFormValuesUpdated);
      }

Working Code:

 <Form
    initialValues={{ ...kgFormValues, dataflow: dataflows.length > 0 ? dataflows[0].df_tpl_key : "" }}
    onSubmit={() => {}}
    render={({ values, dirtyFields }: any) => {
      useEffect(() => {
        const kgFormValuesUpdated = {
          proj_key: projectKey,
          name: values.name,
          description: values.description,
          public: values.public,
          dataflow: values.dataflow,
          flavours: flavoursSelected,
          skipOCR: values.skipOCR
        };

        if (!_.isEqual(kgFormValues, kgFormValuesUpdated)) {
          setNewKgFormValues(kgFormValuesUpdated);
        }
      }, [values]);

      return (

I had the same problem. I was setting some state that was storing a function like so:

// my state definition
const [onConfirm, setOnConfirm] = useState<() => void>();

// then I used this piece of code to update the state
function show(onConfirm: () => void) {
    setOnConfirm(onConfirm);
}

The problem was from setOnConfirm. In React, setState can take the new value OR a function that returns the new value. In this case React wanted to get the new state from calling onConfirm which is not correct.

changing to this resolved my issue:

setOnConfirm(() => onConfirm);

I faced a similar issue. The cause of the error was the "useLocation()" hook of react-router-dom. I have moved it to before of the "return <Navigate to ..." then it was fixed.

I don't know what was changed but it worked. If anybody could explain this, I will be glad...

My old code is:

import { Navigate, useLocation } from 'react-router-dom';


export const Navigation = ({ children }: React.PropsWithChildren): JSX.Element => {

    const location = useLocation(); //  ---> Cause of the error

    if (Authenticator.isAuthenticated() && window.sessionStorage.getItem('isAuthenticated') === 'true') {
      return <>{children}</>;
    }


    return <Navigate to="/login" state={{ from: location }} replace />;
  };

Correct version is:

export const Navigation = ({ children }: React.PropsWithChildren): JSX.Element => {
    if (Authenticator.isAuthenticated() && window.sessionStorage.getItem('isAuthenticated') === 'true') {
      return <>{children}</>;
    }

    const location = useLocation(); // moved here and fixed

    return <Navigate to="/login" state={{ from: location }} replace />;
  };

My given error was:

Warning: Cannot update a component (`Header`) while rendering a different 
component (`Unknown`). To locate the bad setState() call inside `Unknown`, 
follow the stack trace as described in 
https://reactjs.org/link/setstate-in-render
    at http://localhost:3001/static/js/bundle.js:251:5
    at RenderedRoute (http://localhost:3001/static/js/bundle.js:60935:5)
    at Outlet (http://localhost:3001/static/js/bundle.js:61419:26)
    at aside
    at section
    at Drawer

This is clearly one of those problems where the correct solution depends on the context in which the problem occurs.

My context is completely different from the rest of the answers, hence this answer. Here's my context:

• I'm using Next.js 14, though this is also applicable to Next.js 13.
• I'm using an "App Router" setup.
• I'm using the useRouter hook in a client component.

In my case, originally it was something like this simple example:

'use client';

import { useRouter } from 'next/navigation';

export default function Component({ check }: { check: boolean }) {
  const router = useRouter();

  if (check) router.push('/some/path');       // <-- problem line

  return <div>My Component</div>
}

The problem is, (for this example) when check is true, router.push activates, but also the component returns <div>My Component</div>. It looks like React doesn't like this. You should not push the router and return a JSX.Element at the same time.

The fix is simple. Return immediately after router.push:

  ...

  if (check) {
    router.push('/some/path');
    return;
  }

  ...

This ensures the component returns early and won't return the JSX.Element if it's also pushing the router.

Note 1: You cannot do return router.push('/some/path') as the void type cannot be assigned to Element. return; by itself returns undefined which is compatible with Element.

Note 2: This error may only occur if your component is returning some complex nesting of child components. The above simple return of <div>My Component</div> is for illustration purposes only. However, it's safer to always include return; after router.push even if your component's JSX.Element return is simple.

I had this error come up and found the answers here helpful but not altogether the correct answer. In my case, I had some code that used useMemo but also had side-effects:

const { getValues, reset } = useFormContext()

const metaQuestions = useMemo(() => {
  const questions = productPropertiesToQuestions(
    jurisdiction.meta.productInfo[0].productProperties
  )
  reset(
    questions.reduce(
      (defaultValues, { code, answer }) => ({ ...defaultValues, [code]: answer }),
      {}
    )
  )
  return questions
}, [jurisdiction, reset])

When I separated out the code with side-effects into a separate useEffect hook, the problem went away:

const metaQuestions = useMemo(
  () => productPropertiesToQuestions(jurisdiction.meta.productInfo[0].productProperties),
  [jurisdiction]
)

useEffect(() => {
  reset(
    metaQuestions.reduce(
      (defaultValues, { code, answer }) => ({ ...defaultValues, [code]: answer }),
      {}
    )
  )
}, [reset, metaQuestions])

I got this when I was foolishly invoking a function that called dispatch instead of passing a reference to it for onClick on a button.

  const quantityChangeHandler = (direction) => {
    dispatch(cartActions.changeItemQuantity({title, quantityChange: direction}));
  }
...
          <button onClick={() => quantityChangeHandler(-1)}>-</button>
          <button onClick={() => quantityChangeHandler(1)}>+</button>

Initially, I was directly calling without the fat arrow wrapper.

I have a similar issue when using navigate directly inside an if statement. After I change it to Navigate, the warning is resolved

Before

import {useNavigate} from 'react-router-dom';
const navigate = useNavigate();

if (!shouldShow()) {
    navigate("/abc");
    return null;
}

After

import {Navigate} from 'react-router-dom';

if (!shouldShow()) {
    return <Navigate to="/abc" />
}

In my case i was trying to update state while setting another state.

BAD ❌

const handleClick = async (event: MouseEvent, choice: string) => {
    setUserSelections((prev) => {
      if (multiple_select) {
        let newSelected = null;
    if (prev.includes(choice)) {
      newSelected = prev.filter((item) => item !== choice);
    } else {
      newSelected = [...prev, choice];
    }
        setTmpAnswer({
      text: newSelected,
      options: options,
      question: questionText
    });
        return newSelected;
      } else {
        setAnswer({
          text: choice,
          options: options,
          question: questionText
        });
    return [choice];
      }
    });
  };

In this above code you can see that i was trying to setTmpAnswer which is itself a state inside another setState -> setUserSelections. I figured it out that you get this warning when you are trying to setState during rendering phase. In this case as you can see while calling setUserSelection we were in rendering phase and i was trying to setTmpAnswer which is another useState passed as prop from parent component. Here is how i fixed it.

GOOD ✅

const handleClick = async (event: MouseEvent, choice: string) => {
  let newSelected;
  if (multiple_select) {
    setUserSelections((prev) => {
      newSelected = prev.includes(choice)
        ? prev.filter((item) => item !== choice)
        : [...prev, choice];
      return newSelected;
    });
    setTmpAnswer({
      text: newSelected,
      options: options,
      question: questionText,
    });
  } else {
    setAnswer({
      text: choice,
      options: options,
      question: questionText,
    });
    setUserSelections([choice]);
  }
}; 

Using some of the answers above, i got rid of the error with the following:

from

if (value === "newest") {
  dispatch(sortArticlesNewest());
} else {
  dispatch(sortArticlesOldest());
}

this code was on my component top-level

to

    const SelectSorting = () => {
  const dispatch = useAppDispatch();

  const {value, onChange} = useSelect();

  useEffect(() => {
    if (value === "newest") {
      dispatch(sortArticlesNewest());
    } else {
      dispatch(sortArticlesOldest());
    }
  }, [dispatch, value]);