Bug: Cannot update a component (`ConnectFunction`) while rendering a different component (`Unknown`) - console warning for function components without children

Warning in console logs: Cannot update a component ('ConnectFunction') while rendering a different component ('Unknown') It was described here and it is quite clear and very valid warning indicating not recommended design pattern. However, I stumbled across a different scenario similar to the described problem where the function component causing the warning does not have any children. In my case, the scenario is the component inside the <Router> of react-router-dom which observes some particular pathname and search params and triggers the redux action dispatcher.

React version: 16.8.6

Steps To Reproduce

1. use React-router-dom
2. create simple function component to observe react-router props and place it as a child of <Router>
3. use it with conjuction of withRouter from react-router-dom and connect from ‘react-redux’
4. call action creator form inside the function component

const ObservePath = (props: Props) => {
  const { location } = props;
  if (!location) {
    return null;
  }
  props.savePathname({
    location.pathname,
  });
  return null;
};

export default withRouter(connect(undefined, {
  savePathname,
})(ObservePath));

// usage

<Router>
  <ObservePath />
  ...

The current behavior

long warning in the console

The expected behavior

no warning in this case

[webduvet]

I should have pointed out that the component does not render anything it has return null, but that does not change anything as ‘rendering’ means executing the function of the function component regardless of the return. Thanks, for the explanation.

[bvaughn]

This warning doesn’t have anything to do with whether or not a component has children. The warning is whether one component tries to update state in a different component while rendering.

We recommend not doing that, so we warn about it.