When we work with ReactJS, especially when making a data or to-do list, we often add drag-and-drop features to help users manage the list easily. To add such functionality, many developers choose the react-beautiful-dnd library. In this scenario, many developers encounter warnings about defaultProps.

Although this warning does not affect our project, keeping the console clear is a sign of a successful developer. So in this solution, we will teach you how to fix this problem. Also, we will learn what this error is trying to tell us and the reason behind it.

Quick Navigation

1. What Does the Warning Mean?
2. The Solution: Switching to @hello-pangea/dnd
3. Why Does This Warning Occur with react-beautiful-dnd?
4. Why Use @hello-pangea/dnd?

What Does the Warning Mean?

This warning means that the React team plans to remove support for defaultProps in memoized components (React.memo) in a future release. DefaultProps is a way to define default values ​​for props in a component. While it is useful, the React team aims to streamline the library and prefers to use JavaScript default parameters instead.

The Solution: Switching to @hello-pangea/dnd

To resolve this issue, the community has introduced @hello-pangea/dnd, a fork of react-beautiful-dnd that addresses the deprecation warning and other potential issues. Here's how you can migrate to @hello-pangea/dnd:

Install the new library:

Run the following command in your terminal:

// For npm
npm install @hello-pangea/dnd

// For yarn
yarn add @hello-pangea/dnd

Important: Check if the library is properly installed by opening your package.json file. Look under the dependencies section for the library name and it's version.

Update Import Statements:

Replace all instances of react-beautiful-dnd with @hello-pangea/dnd in your project.

For example:

// Before
import { ... } from 'react-beautiful-dnd'; ❌

// After
import { ... } from '@hello-pangea/dnd'; ✅

After installing the library, replace all instances of react-beautiful-dnd with @hello-pangea/dnd in your imports. This will remove the warning.

Why Does This Warning Occur with react-beautiful-dnd?

React is evolving, and one of the changes is to stop using defaultProps with components wrapped in React.memo. The defaultProps are default values for component props. However, using them with React.memo can be less efficient.

• The react-beautiful-dnd library uses defaultProps in its components, which triggers the warning:

React now prefers using JavaScript default parameters because they are simpler and more efficient.

Example

Instead of using this (defaultProps):

const MyComponent = React.memo(({ name }) => {
  return <div>{name}</div>;
});

MyComponent.defaultProps = {
  name: 'Default Name',
};

Use this (default parameters):

const MyComponent = React.memo(({ name = 'Default Name' }) => {
  return <div>{name}</div>;
});

To fix this issue in react-beautiful-dnd, you should switch to the updated library @hello-pangea/dnd, which has already adopted these best practices.

Why Use @hello-pangea/dnd?

Fixes Deprecation Warnings: @hello-pangea/dnd resolves the warning about defaultProps in React.memo components, ensuring your project is future-proof and compliant with React's latest guidelines.

Same Functionality: It provides the same drag-and-drop functionality as react-beautiful-dnd, so you don't have to learn a new library or change your existing code significantly. Whatever components you are importing, like { DragDropContext, Droppable, Draggable }, remain the same.

Community Support: As a community-maintained fork of react-beautiful-dnd, it benefits from ongoing updates and improvements driven by user feedback and contributions.

Easy Migration: Switching to @hello-pangea/dnd is straightforward. You only need to update your import statements and install the new package.

Better Performance: By using modern JavaScript practices like default parameters, @hello-pangea/dnd can offer better performance and cleaner code.

Take Away

Using JavaScript default parameters can sometimes be more efficient than defaultProps for better performance. Switching from react-beautiful-dnd to @hello-pangea/dnd is a straightforward and effective way to resolve the obsolescence warning about defaultProps. 

To do this, first install the @hello-pangea/dnd library in your project, and then replace all instances of react-beautiful-dnd in your project with @hello-pangea/dnd. Your project will be better maintained and perform better as a result of this migration, which not only resolves the immediate problem but also aligns your project with React updates in the future.

We hope this solution fixed the error in your project. If you have any questions about this solution or are facing another error, you can ask them in the question box given below, you will get the response quickly.