React-beautiful-dnd - warning : defaultProps will be removed

Question

I don't understand this warning in my console. Can someone tell me if it's library's problem or if it's an error in my side ? Warning image

Here is my code which trigger the warning

I'm using the version 13.1.1

<DragDropContext onDragEnd={handleDrop}>
   <Droppable droppableId="list-container" >
      {(providedA: any) => (
         <div {...providedA.droppableProps} ref={providedA.innerRef}>
            {steps.map((step, index) => {
               return <Draggable  key={step.id} draggableId={step.id.toString()} index={index}>
                  {(provided: any) => (
                     <div ref={provided.innerRef} {...provided.dragHandleProps} {...provided.draggableProps}>
                        <div>{step.title}</div>
                     </div>
                   )}
                </Draggable>
              })}
           {providedA.placeholder}
         </div>
      )}
   </Droppable>
</DragDropContext>

Thanks

I tried to remove the code to find that is the Droppable element which cause the issue. I don't find on the github of React-beautiful-dnd any question on this.

Answer 1

Today, I had the exact same issue as you with react-beautiful-dnd 13.1.1 in my project until just now. The steps described below fixed it beautifully. I found what is essentially a fork of react-beautiful-dnd called @hello-pangea/dnd that provides the exact same functionality of the latest version of react-beautiful-dnd but with up-to-date dependencies. You don't even have to bother with changing the component names or implement them any differently or anything: It "just works."

In my case, all I had in my project from react-beautiful-dnd was DragDropContext, Draggable, and DropResult in my main component and then a custom helper function that utilized Droppable and DroppableProps that was defined in a separate component and imported into the main component, so I only needed to update the import statements for two components.

1. Run this in your terminal: npm install @hello-pangea/dnd or yarn add @hello-pangea/dnd
2. Replace all import { ... } from "react-beautiful-dnd" statements across all of your components with import { ... } from "@hello-pangea/dnd" statements.

Answer 2

The warning is caused by the library. Specifically, react-beautiful-dnd uses an old version of react-redux, which in turn uses the feature mentioned in the message: defaultProps.

So normally, react-beautiful-dnd would update it's code to use a new version of react-redux, and then you would update to their latest and the problem would go away. However, since react-beautiful-dnd is no longer being developed, it is unlikely that they will do that. This leaves you with a couple options:

1. The code still works, so you could just do nothing. React is warning you that defaultProps will eventually stop working, but we're not there yet. The earliest possible release that could break the code is react 19.0.0, but there isn't even a timeline for that release yet.

2. You could switch to a different library than react-beautiful-dnd. Maybe something like react-draggable would work for you, though i don't know what your needs are

3. You could fork react-beautiful-dnd and modify their code to fix it. Then you'd use the forked version of the code instead of the original.