Can't perform a React state update on an unmounted component

[thoughtassassin]

When I use useCollection and useDocumentOnce together in one function component I periodically get index.js:1375 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. warnings.

Here is one of the components that throw that warning:

const Channels = ({user, feedId}) => {
  const [
    userValue,
    userLoading,
    userError,
  ] = useDocumentOnce(firebase.firestore().doc('users/' + user.email), {
    snapshotListenOptions: {includeMetadataChanges: true},
  });
  const [
    value,
    loading,
    error,
  ] = useCollection (
    firebase
      .firestore ()
      .collection ('channels')
      .where ('feedId', '==', feedId),
    {
      snapshotListenOptions: {includeMetadataChanges: true},
    }
  );
  return (
    <div className="channels">
      <h1>Channels</h1>
      {error && <strong>Error: {JSON.stringify (error)}</strong>}
      {loading && <div>Loading Channels...</div>}
      {value && userValue &&
        <div>
          {value.docs
            .sort ((a, b) => {
              return a.id > b.id ? 1 : -1;
            })
            .filter(doc => userValue.data().channels.includes(doc.id))
            .map (doc => (
              <React.Fragment key={doc.id}>
                <div>
                  <button onClick={() => navigate ('/messages/' + doc.id)}>
                    {capitalize (doc.id)}
                  </button>
                </div>
              </React.Fragment>
            ))}
        </div>}
    </div>
  );
};

Here is the parent component:

const App = () => {
  const [user, loading, error] = useAuthState(firebase.auth());
  const logout = () => firebase.auth().signOut();
  return (
    <div className="collaboracast">
      <header className="collaboracast-header">
        <h3><Link to="/">Don-Nan</Link></h3>
        {user && <nav><span>{user.email}</span><button onClick={logout}>logout</button></nav>}
      </header>
      <main>
        {!loading && <Router className="app-router">
          {user && <Feeds path="/feeds" />}
          {user && <Channels path="/channels/:feedId" user={user} />}
          {user && <Messages path="/messages/:channelId" user={user} />}
          <Login default path="/" user={user} />
        </Router>}
        {loading && <div>loading...</div>}
      </main>
    </div>
  );
}

I don't think the useDocumentOnce returns a cleanup function.

[chrisbianca]

useDocumentOnce is already set up with a cleanup method that will be called on unmount, however there is a small window where this could result in the above warning.

Ultimately, there's not much that can be done to prevent the warning and as it implies, this won't affect your application adversely.