Effector react: unmounted component

[mendrik]

What is the current behavior:

I'm getting a react error while modifying a store value on fx.done

	printWarning	@	react-dom.development.js:67
	error	@	react-dom.development.js:43
	warnAboutUpdateOnUnmountedFiberInDEV	@	react-dom.development.js:23914
	scheduleUpdateOnFiber	@	react-dom.development.js:21840
	dispatchAction	@	react-dom.development.js:16139
	o2	@	apiBase.ts:131
	(anonymous)	@	apiBase.ts:102
	fn	@	createWatch.ts:8
	et	@	kernel.ts:526
	o	@	kernel.ts:389
	create	@	createUnit.ts:151
	r2	@	createUnit.ts:142
	onFocus	@	VisualNode.tsx:59

What is the expected behavior:

is that a problem with resolving promises in unmounted components? Since I don't use useEffect myself this seems like a bug in the library

"effector": "22.1.2",
"effector-react": "22.0.5"

[zerobias]

could you share an example online please? either in our repl or codesandbox

[mendrik]

this is gonna be tricky, because I have a complex app with all sorts of setups in react, so not sure how to replicate this to a small example. We could have a screen sharing chat if that would help :)

[doasync]

From the description it is not clear what kind of error you have and what code could lead to it.

[mendrik]

ok I will try to checkout effector sources and npm link it for debugging, maybe something useful comes out

[mendrik]

Hi, I have now changed .watch code I had to use sample() and the bug has disappeared. I will close this, until it comes back. I would shelve it under wrong usage of the framework.

[AlexandrHoroshih]

Can you share the error message?

Is this something like this?

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.

(If yes, then you might want to look at this discussion in reactwg repo reactwg/react-18#82)

[mendrik]

ye it is

[mendrik]

I might have closed this prematurely, still getting the bug, but what worries me is that in my flow of affected components I have no useState() or useEffect() at work and yet I'm getting this error from apiBase.ts:131

[zerobias]

Thanks for mentioning exact line of code, now I clearly see why this happened. That behavior could be improved on our side

[zerobias]

@mendrik should be fixed in effector-react 22.0.6

[mendrik]

awesome, thank you!

[mendrik]

I tested it some more, and i'm still getting it at inc && refState.active && inc()

not sure if it helps but my code is relatively simple, this is the component that causes the stacktrace:

export const VisualNode = ({ depth = 0, node }: Jsx<OwnProps>) => {
  const id = node.value.id
  const isActive = useStoreMap($selectedNode, pathEq(['value', 'id'], id))
  const openNodes = useStore($openNodes)
  const hasChildren = isNotNilOrEmpty(node.children)
  const open = openNodes[id]
  const nodeType = node.value.nodeType

  return (
    <>
      {depth > 0 && (
        <NodeGrid
          tabIndex={0}
          onFocus={() => selectNode(node)} // <- this line
          id={id}
          className={clsx('gap-1', { selectedNode: isActive })}
        >
...

and my store is:

import { createStore } from 'effector'
import { nthArg } from 'ramda'
import { TreeNode } from '~shared/algebraic/treeNode'
import { Node } from '~shared/types/domain/node'

import { resetProject } from '../events/reset'
import { selectNode } from '../events/tree'

export const $selectedNode = createStore<TreeNode<Node> | null>(null)
  .on(selectNode, nthArg(1))
  .reset(resetProject)

it happens when I quickly close and open UI nodes, which unmounts some VisualNode components. So there is some sort of race condition between component unmounting and const isActive = useStoreMap($selectedNode, pathEq(['value', 'id'], id))

[zerobias]

Damn, then it happens on the react side, don’t know how we would manage that, at least without explicit reproduction