Skip to content

Custom Handle Drag-and-Drop in React: A Guide to Minimising Rendering

Drag and Drop Feature in any application can provide a rich user experience. There are a number of libraries that can provide this feature, for example, 

  1. React DnD
  2. React-beautiful-dnd
  3. SortableJs


But, due to certain limitations in each library, one cannot have full access to customize things. However, building this feature from scratch can help us add more flexibility to the functioning. Our main focus in this blog is to build a drag-and-drop feature from scratch without any library and to minimize the rendering to increase the performance of the application.

Setting up the Project

Let’s start by creating a new project in react. You can use create-react-app to set up the project.

Creating the Component

Implementing the Drag and Drop Functionality

Here is the core part of this feature. By starting the dragging, the event handlers will handle the event and store the item’s ID in a state.

As the draggable item is stored in a state, we have to highlight the drag-over container. For this, we can use two different event handlers:

  • onDragOver
  • onDragEnter 

These two event handlers may provide us with the ID of drag-over items. We are going to implement this through the onDragOver event handler.

In the above function, we are checking whether a draggable item is dragging over the same container repeatedly. In this way, we will prevent the unnecessary re-rendering. Also, outside container ref can be seen being used. It’s being used to prevent the final action. If the user drops the draggable item outside the dragover container, then we have to handle the scenario, so we will use another event handler on onDragLeave, in that case.

Now, the last step is to perform the action of dropping draggable item(s).

The above function is going to handle the drop of items. It will also handle the drop outside the drag-over container.

Styling and Feedback

To make this feature visually more appealing, one can use CSS styles for the draggable items and the container. visual feedback can also be implemented by changing the appearance of the dragged item while being dragged.

Conclusion

In this article, we focused on implementing the custom drag-and-drop feature in React without using any external library. We’ve also highlighted the importance of minimizing the rendering to improve the performance. By understanding the core concepts and optimizing the components, one can create a smooth and efficient drag-and-drop experience.

LinkedIn
Twitter
Facebook

More like this:

Animations in React: A Dive into AOS, Anime JS, and Motion

Animations in React: A Dive into AOS, Anime JS, and Motion

Animation in ReactJs apps is a popular topic, and there are many ways to create different animations. Many…
How to Set Up Google OAuth 2.0 Using Passport.js in MERN?

How to Set Up Google OAuth 2.0 Using Passport.js in MERN?

Welcome to this comprehensive tutorial, where we’ll embark on an exciting journey of integrating Gmail authentication seamlessly into…
How to Build a Progressive Web App (PWA) Using React?

How to Build a Progressive Web App (PWA) Using React?

Progressive Web Apps (PWAs) have gained significant popularity in recent years as a way to deliver a native-like…

Subscribe to our newsletter for more.

We send our newsletter every two weeks, and write about building
serious technology and magnetic products.