react-component / react-component/slider
findDOMNode is deprecated in StrictMode
Open
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.1k
- Forks
- 768
- Avg merge
- 11d 22h
- Merged PRs (30d)
- 5
Description
Using rc-slider with a custom Handle throws the following error on the console:
findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Handle which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
at div
at Handle
Code for reproducing the bug:
import Slider, { Handle } from "rc-slider";
....
<Slider
handle={({ dragging, ...restProps }: any) => {
return (
<Handle dragging={dragging.toString()} {...restProps}>
<MyIcon width="8px" />
</Handle>
);
}}
handleStyle={{
borderColor: "white",
height: 32,
width: 32,
marginTop: -14,
boxShadow: "0 2px 6px 0 rgba(0, 0, 0, 0.28)",
}}
trackStyle={{ backgroundColor: "black" }}
min={min}
max={max}
{...rest}
/>
Steps to reproduce:
- Use a custom Handle as given in the above code
- Open the console in Chrome
OS: Ubuntu 20.04 LTS
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked hazel-ui Slider.tsx reproduction and inspect rc-slider's custom Handle path. Run the example in React StrictMode and trace where the warning is triggered; done means the custom Handle works without the findDOMNode deprecation warning.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100