React preserves duplicates of DOM node on re-render.

[jake-daniels]

Hi guys. I'm getting really weird behavior in my latest project. I assume it's a bug in React.
I want to override default browser context menu. I subscribed for contextmenu and click events in componentDidMount. On right click (context menu) I want to show my custom div. On left click, this div should hide. In event listeners I do:

onContextMenu = (e) => {
	if ((e.target as any).id === CONTEXT_MENU_ID) {
		const {offsetX, offsetY} = e
		const contextMenu = {
			isActive: true,
			position: {
				x: offsetX,
				y: offsetY,
			},
		}
		this.setState({contextMenu})
		e.preventDefault()
	}
}

onClick = (e) => {
	const contextMenu = {
		isActive: false,
		position: {x: 0, y: 0},
	}
	this.setState({contextMenu})
}

and in render there's:

{(this.state.contextMenu.isActive) && (
	<div className='menu-item noselect'>
		<i className='fa fa-plus'/>
		<span> Add new note </span>
	</div>
)}

I assume everybody can imagine expected behavior. But real behavior is:
right click > context menu shows up > left click > context menu is still there > right click > another context menu shows up... and so on... You can literally see DOM nodes being duplicated in Elements tab in DevTools

You can try it here: https://github.com/jake-daniels/zen-tab
The code is in src/app/controller/NotesBoard.tsx file.
Try npm install npm start, then right/left click somewhere on blue area.

Environment:
MS Windows 8.1 x64
Chrome 63.0.3239.84
React 16.2.0

[gaearon]

Can you create a minimal example without TypeScript please? Preferably as a jsfiddle.

[jake-daniels]

Actually, I have already tried to isolate the case, but I failed. In fresh-new react app with index.js file only, it works fine. It must be something deeper and not so obvious.

[jake-daniels]

I found it. I wanted to be able to use Immutable in console, so I exported Immutable to window, but as I experimented with it, I assigned window['Map'] = Immutable.Map and forgot it there. It seems to cause this bug. I know it's entirely my fault but I would have expected some kind of warning message to not override built-in objects though.

[gaearon]

Oh I see. Thanks for explaining.

We can’t really warn about this: you might intentionally be using a polyfill.