React-sortable-hoc: 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.

[harimtejada]

+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