Semantic-ui-react: findDOMNode is deprecated in StrictMode < Button / >

Created on 27 Aug 2020  路  5Comments  路  Source: Semantic-Org/Semantic-UI-React

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

duplicate

All 5 comments

馃憢 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.

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

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. 馃

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

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

https://github.com/Semantic-Org/Semantic-UI-React/blob/c3640e4b9527a932661af4f786e9c03c726a708e/src/elements/Button/Button.js#L142
https://github.com/Semantic-Org/Semantic-UI-React/blob/c3640e4b9527a932661af4f786e9c03c726a708e/src/elements/Button/Button.js#L162

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.

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

nix1 picture nix1  路  3Comments

mattmacpherson picture mattmacpherson  路  3Comments

laukaichung picture laukaichung  路  3Comments

ryanpcmcquen picture ryanpcmcquen  路  3Comments

dilizarov picture dilizarov  路  3Comments