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

Get Help and Help Others
1

I’m trying to upgrade my app from v0.8.2 to v0.16. When I navigate around the app, I get a warning like below. I checked my code and didn’t find any references to asynchronous tasks. There’s a cell inside render method. I wonder if the Cell is triggering an async task.

This warning only appears in v0.16. The same code runs without warning on v0.8.2. Any suggestions on how to debug it?

Thanks.

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.

Screen Shot 2020-09-02 at 2.25.19 PM

2

I narrow down this issue a little bit more. It happens when I upgrade from v0.12 to v0.13. I notice in v0.13, there’s a new class RWCell. It may affect data subscription behavior and cause a warning.

3

I saw this warning yesterday when I was updating the Auth Playground to test Supabase auth.

A cell rendered a signin/up form. Based on the email/pwd and button action, the cell would render the currentUser data.

If however, the form forced a page load, then the component would unmount I’d see that error. I was able to change the form so that did not happened and the error went away.

BTW - you could move the ownerId={currentUser.sub} into DashboardsCell or even not send in the userId at all and fetch that on the api service so that way other users could never see someone else’s dashboard data. Here if I guess another user’s id I could fetch their dashboard.

import { db } from 'src/lib/db'
import { requireAuth } from 'src/lib/auth'

export const dashboards = async ({ ownerId }) => {
  if (ownerId) {

Get the currentUser from context and use the id.

You can create a new service like “me”:

import { context } from '@redwoodjs/api/dist/globalContext'

import { requireAuth } from 'src/lib/auth'
import { db } from 'src/lib/db'

export const me = () => {
  requireAuth()

  return db.user.findOne({ where: { id: context.currentUser.id } })
}

export const myDashboards = () => {
  requireAuth()

  return db.user
    .findOne({ where: { id: context.currentUser.id } })
    .dashboards()
}

and then a SDL like

import gql from 'graphql-tag'

export const schema = gql`
  type Query {
    me: User!
    myDashboards: [Dashboard!]!
  }
`
1 Like