React's StrictMode Warnings

[TriStarGod]

Warnings popping up in React's StrictMode Sample - https://codesandbox.io/s/react-sortable-hoc-test-fcmm1

Warning: Legacy context API has been detected within a strict-mode tree. Warning: findDOMNode is deprecated in StrictMode.

Are there any plans to correct these issues?

[yepes]

Just testing this library and came here to post the same. +1

[lokkomokko]

• 1

[DynamicArray]

Same here.

[DynamicArray]

Helpful looking idea here: https://medium.com/trabe/getting-rid-of-finddomnode-method-in-your-react-application-a0d7093b2660

[manang]

did you solve this warning? Thanks

[pstung92]

I have the same issue about this warning too. Please solve is as soon as possible. Thanks.

[mrleemon]

Same here. Any progress on this issue? There haven't been any commits since January.

[Harim-T]

+1

[seanmehra]

+1

[felipenmoura]

yup...pretty annoying (and makes me worry about future updates)

[mrleemon]

Does anyone know if this component is abandoned? Is there a similar alternative out there?

[nickjohngray]

I also have this issue. Something needs to be updated . Very cool component but i got it dragging at two nested levels in my tree component . NICE!

[stahlmanDesign]

This might be a good alternative library for some situations. https://github.com/atlassian/react-beautiful-dnd

[bayareacoder]

I fixed both warnings (about findDOMNode and legacy API) by making following edits.

in SortableContainer/index.js:

import { MyContext } from '../context';
import ChildComponent from '../ChildComponent';
// ...
return class WithSortableContainer extends React.Component {
    // ADD NEW CONTEXT API - START
    static ContextType = MyContext;
    // ADD NEW CONTEXT API - END

    // ADD REF FORWARDING ADD - START
    childRef = createRef();
    // ADD REF FORWARDING ADD - END

    constructor(props) {
// ...

    // REMOVE LEGACY CONTEXT - START
    // React legacy context API: add `childContextTypes` and `getChildContext` to establish a context provider
    // Any child component can then access it by defining `contextTypes`, see SortableElement
    // see: https://reactjs.org/docs/legacy-context.html
    // static childContextTypes = {
    //   manager: PropTypes.object.isRequired,
    // };

    // we set an instance of `Manager` into the legacy React context
    // getChildContext() {
    //   return {
    //     manager: this.manager,
    //   };
    // }
    // REMOVE LEGACY CONTEXT - END

// ...

getContainer() {
      const { getContainer } = this.props;
      if (typeof getContainer !== 'function') {
        // REMOVE FINDDOMNODE - START
        // return findDOMNode(this);
        // REMOVE FINDDOMNODE - END

        // ADD REF FORWARDING - START
        return this.childRef.current;
        // ADD REF FORWARDING - END
      }

// ...

render() {
      const ref = config.withRef ? 'wrappedInstance' : null;

      return (
        // ADD NEW CONTEXT API & DOM FORWARDING - START
        <MyContext.Provider value={{ manager: this.manager }}>
          <ChildComponent ref={this.childRef}>
            {/* ADD CONTEXT API & DOM FORWARDING - END */}
            <WrappedComponent ref={ref} {...omit(this.props, omittedProps)} />
            {/* ADD CONTEXT API & DOM FORWARDING - START */}
          </ChildComponent>
        </MyContext.Provider>
        // ADD CONTEXT API & DOM FORWARDING - END
      );
    }

Similar edits to SortableElement.js (to consume the new context & replace findDOMNode by ref forwarding) and SortableHandle.js(only replace findDOMNode by ref forwarding)

Then create a file ChildComponent.js with:

import React from 'react'

// ChildComponent uses React.forwardRef to obtain the ref passed to it
// and then forward it to the DOM div that it renders.
const ChildComponent = React.forwardRef((props, ref) => (
  <div ref={ref}>
    <span>{props.children}</span>
  </div>
));

export default ChildComponent;

and define your context in file context.js :

import React from 'react';
const defaultValue = { manager: {} };
export const MyContext = React.createContext(defaultValue);

This follows one of the solutions to replace findDOMNode from the article referenced by @DynamicArray. Watch out to not have a 'broken ref' as explained there.

It resolved all warnings for me.

[davvilla]

Seems like there is a fix for this issue pending to be merged. Are there any updates on that? https://github.com/clauderic/react-sortable-hoc/pull/624

Thanks!

[realestninja]

Seems like there is a fix for this issue pending to be merged. Are there any updates on that? #624

Thanks!

I gave react-sortable-hoc a try today, for the first, and I get these warnings too. It is now one year after it has been reported by @TriStarGod . The PR from above is still open...

[jleider]

This project is on life support, I would recommend switching to its successor: https://github.com/clauderic/dnd-kit

[franmastromarino]

hello any update on this issue?

[nicewaytodoit]

"Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of sortableList(_c5) which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here:"

Still present, any progress?

[asmakhalfallah2018]

any update please ?

[clauderic]

"Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of sortableList(_c5) which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here:" Still present, any progress?

There are no plans to fix this.

New consumers are strongly encouraged to check out @dnd-kit before adopting this library in a new project. It supports all of the features of react-sortable-hoc, but with a more modern and extensible architecture.

react-sortable-hoc will continue to receive critical updates and bug fixes for the foreseeable future, but there are no new features planned. In future versions of React, the findDOMNode method will be deprecated. This method is a critical piece of the architecture of react-sortable-hoc, and it's unlikely that the library could continue to exist with its current architecture once this method is deprecated. In light of this, all development efforts have been redirected towards @dnd-kit.