Warning when using Popup with React.StrictMode

[MatthewScholefield]

Bug Report

React.StrictMode is a wrapper that is helpful for detecting common react pitfalls/anti-patterns. When I use <Popup .../> within a project using React.StrictMode, I see a warning about a deprecated method of element reference. This leads me to choose between having a warning I can't silence or removing React.StrictMode and not accessing its benefits for my own project.

Can we add a new field like renderTrigger={() => <p>Hover here</p>} to allow instantiating a Popup without passing a react node reference directly? I belief this would work around the issue by not passing a direct reference to a react node via props.

Steps

Open this code sandbox. Source is the following:

import React from "react";
import { render } from "react-dom";
import { Popup } from "semantic-ui-react";

render(
  <React.StrictMode>
    <Popup trigger={<p>Hover me</p>} content='Hover content'/>
  </React.StrictMode>,
  document.getElementById("root")
);

Expected Result

No warnings in the javascript console.

Actual Result

The following warning appears in the browser console:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of RefFindNode which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in p (at index.js:6)
    in RefFindNode (created by Ref)
    in Ref (created by Portal)
    in Portal (created by Popup)
    in Popup (at index.js:6)
    in StrictMode (at index.js:5)

Version

2.1.3 (Latest as of right now)

Testcase

https://codesandbox.io/s/semantic-ui-react-forked-p5zpc9

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[GGAlanSmithee]

This is also the case with the <TextArea /> Component:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of RefFindNode which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

[beaugunderson]

I believe this is also extremely important for performance as directly passing JSX as a prop causes the component to re-render on every update.

[layershifter]

Have you tried latest semantic-ui-react@3.0.0-beta.0?

[GGAlanSmithee]

Not sure, but i will check it out

[layershifter]

This have been fixed in v3. We don't use .findDOMNode() internally anymore.