Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

findDOMNode is deprecated in StrictMode < Button / > #4050

Closed
uinstinct opened this issue Aug 27, 2020 · 12 comments
Closed

findDOMNode is deprecated in StrictMode < Button / > #4050

uinstinct opened this issue Aug 27, 2020 · 12 comments

Comments

@uinstinct
Copy link

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

Button Ref Problem

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
Copy link

welcome bot commented Aug 27, 2020

👋 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
Copy link
Member

layershifter commented Aug 27, 2020

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
Copy link
Author

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
Copy link
Member

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

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

<Ref innerRef={this.ref}>

<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
Copy link
Author

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
Copy link

Is there any update on this issue?

@ogradye
Copy link

ogradye commented Jul 26, 2021

could we get this on a milestone?

@layershifter
Copy link
Member

This will be fixed by #4233.

@tennessine
Copy link

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

@panoxdesign
Copy link

When will this version be released?

@karlkras
Copy link

karlkras commented Oct 2, 2021

Why was this closed?

@layershifter
Copy link
Member

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.

@Semantic-Org Semantic-Org locked as resolved and limited conversation to collaborators Oct 3, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

7 participants