I now know exactly why this is happening! After hours of searching, I found the answer. This data call within the same component, is, first-of-all, bad practice, and second, it is causing that drag to not be as fluid and friendly as you would like. Comment these lines out and you are done!
Just kidding.
The way to still get this data and still have your dragula be extra smooth is to employ a design ideology in React called Container vs. Presentational Components. I learned about this through this article: https://css-tricks.com/learning-react-container-components/
It pretty much says to seperate your components into parent componets that get the data and make sure its right, as well as handle events, and then have child components to basically be the "looks" of the data-driven components. This worked for me. Don't forget to put the
dragula([arrayOfDivs])
in the componentDidMount() of the container component.
So, as an example, here:
class DataContainer extends Component {
constructor() {
super();
this.state = {
data: null
}
}
componentDidMount() {
getData().then(data => this.setState({ data: data }));
}
render() {
if(dataIsRight(this.state.data)) {
return <PresentationalComponent data={data} />;
}
}
and the presentational component would be really simple
class PresentationComponent extends Component {
render() {
<div> {this.props.data} </div>
}
}
If anyone else has had this issue and this helped, let me know!
