Cannot update a component while rendering a different component warning

please read the error message thoroughly, mine was pointing to SignIn Component that had a bad setState. which when i examined, 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)

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>
  );
};

Just coming here because 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.

Figured I'd leave an answer here in case anyone comes looking, and they made the same simple mistake that I did.

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 stupid and something I had been doing in every other component, haha.

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>);
};

Simple and silly mistake, but took a while to realise it, so hopefully this helps out someone else with this issue.