‘Hooking’ Your Audience Using Drag & Drop in React

ReactJS has become one of the leading ways to build efficient, accessible, and fast performing Web applications in JavaScript. React leads the way with functional and accessible programming, championing the User Interface (UI) in a way that simplifies code dramatically.

With a growing ecosystem of libraries and developers behind it, we’ll take a look at how engineers at Salesforce blaze trails with a newer API (Hooks) that hopes to overhaul some key features in React.

Dragging, Dropping, and Hooks

Drag and drop is an intuitive way to animate elements using ReactJS. In most cases, an open source library is sufficient to handle any required animations. However if you wanted to add other elements, you’d have to write it on your own. Hooks create a common way to reuse code by incorporating a single function call to use React features, without writing a class.

“[They] provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle. They also offer a new powerful way to combine them.” – ReactJS.org

Hooks were also created to solve for some common problems encountered when coding in ReactJS:

• Over time, complex components become difficult to break or test
• Classes have a tendency to confuse people and machines
• Optimizations that actually end up creating a slower path instead of efficient ones

Essentially, they work as a function to “hook into” the React state and lifecycle features from function components. Another key takeaway is that hooks don’t work inside of classes — allowing you to use React without them.

In Salesforce’s Tech Talks, we’re showing the world how we engineer more than software and lead the way with innovative web technologies. Shay Keinan, a Front-end Architect at Datorama, shows us step-by-step how to master the drag & drop feature using hooks by creating a sortable list.

This Tech Talk covers:

• Making the draggable component
• Creating a sortable list with drag & drop
• Modifying for a smooth release animation

New to hooks? Check out the React v16.8 Release: The One With Hooks. Let us know your thoughts on the future of React, and what you think about hooks as an alternative to classes. If you’re interested in joining the conversation on how Salesforce stays at the forefront of new technologies, check out our careers at Salesforce.