findDOMNode is deprecated in StrictMode < Button / >

[uinstinct]

Bug Report

I was having this problem :
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of RefFindNode which is inside StrictMode. while working with semantic-ui-react

I would have had use refForwarding. But, now the problem is I have used Button on many different components.

Steps

This thing thing can be reproduced easily in any when we are using the Button component.

// App.js

import React from "react";

import "semantic-ui-css/semantic.min.css";
import { Button } from "semantic-ui-react";

export default function App() {
  return (
    <div className="App">
      <Button>Click Me</Button>
    </div>
  );
}

Result

Version

"semantic-ui-react": "^1.2.0"
"semantic-ui-css": "^2.4.1"

Testcase

I have added a codesandbox url to see this problem easily:

https://codesandbox.io/s/semantic-ui-react-button-issue-d6ipt?file=/src/App.js

[welcome]

👋 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.

[layershifter]

To avoid findDOMNode() we need to use React.forwardRef() internally. Duplicate for #3819.
Currently it's a warning that does not block any usage.

[uinstinct]

To avoid findDOMNode() we need to use React.forwardRef() internally. Duplicate for #3819.
Currently it's a warning that does not block any usage.

@layershifter But, it can be painful to write forwardRef() each time keeping in mind I have used the Button Component multiple times and in multiple ways.
It would be very nice if the semantic-ui-react team could find a permenant solution to this problem. 🤔

[layershifter]

@uinstinct as consumer you are not forced to write .forwardRef().

This warning comes from Button component that uses Ref & RefFindNode inside of it:

Semantic-UI-React/src/elements/Button/Button.js

Line 142 in c3640e4

<Ref innerRef={this.ref}>

Semantic-UI-React/src/elements/Button/Button.js

Line 162 in c3640e4

<Ref innerRef={this.ref}>

To remove the warning we need to remove usages of Ref component, to do this we need support ref forwarding on our components which is not currently supported.

For now, you can ignore this warning.

[uinstinct]

Sure, it will be very nice for the semantic-ui-react component are updated soon because we rely on it for doing for projects.

[hernandez-jordan]

Is there any update on this issue?

[ogradye]

could we get this on a milestone?

[layershifter]

This will be fixed by #4233.

[tennessine]

At least, semantic-ui is still in active development.

[panoxdesign]

When will this version be released?

[karlkras]

Why was this closed?

[layershifter]

Why was this closed?

Because it's a duplicate of another issue that tracks the problem. This will be fixed in v3, you can track the process in #4233.

Thanks.