docs(Visibility|Ref): deprecate components

[layershifter]

⚠️ Deprecation notice

This PR marks Visibility and Ref components as deprecated. We will remove them in the next major release, i.e. 3.0.0.

<Ref />

Internally this component uses ReactDOM.findDOMNode() that has been deprecated in StrictMode (#3819). It's not supported in Concurrent mode, too ( ´･･)ﾉ(._.) This means that usage of .findDOMNode()` will be problem with upcoming React 18.

Migration

Semantic UI React v3 will support native ref forwarding via React.forwardRef(), but to prevent breaks during upgrade we suggest to import it from a dedicated package:

-import { Ref } from "semantic-ui-react";
+import Ref from "@semantic-ui-react/component-ref";

<Visibility />

The main reason for deprecation and upcoming removal is performance that is far away from native APIs, even in our docs we use Intersection Observer API (#3985).

Migration

We suggest to use Intersection Observer API directly or via React wrappers, for example: react-intersection-observer. As it's not a straightforward replacement that may cause issues with adoption we moved out Visibility component to a separate package (@semantic-ui-react/component-visibility). This means that you can use it already with v2 or upcoming v3:

-import { Visibility } from "semantic-ui-react";
+import Visibility from "@semantic-ui-react/component-visibility";

[github-actions]

size-limit report

Path	Size
bundle-size/dist/Button.size.js	58.76 KB (0%)
bundle-size/dist/Icon.size.js	25.21 KB (0%)
bundle-size/dist/Image.size.js	53.91 KB (0%)
bundle-size/dist/Modal.size.js	68.9 KB (0%)
bundle-size/dist/Portal.size.js	40.61 KB (0%)

[codecov-commenter]

Codecov Report

Merging #4324 (6b3d3aa) into master (e500234) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #4324   +/-   ##
=======================================
  Coverage   99.75%   99.75%           
=======================================
  Files         180      180           
  Lines        3245     3245           
=======================================
  Hits         3237     3237           
  Misses          8        8           

Impacted Files	Coverage Δ
src/behaviors/Visibility/Visibility.js	100.00% <ø> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e500234...6b3d3aa. Read the comment docs.