title: react-beautiful-dnd: Prevent flicker when drag and drop a lists
body: <p>I'm using this react-beautiful-dnd library to be able to reorder lists. However, even though I'm able to drag and drop and re-order, <strong>there is a flicker when I try to reorder lists</strong>.
  You can see in the video:
  <a href="https://i.stack.imgur.com/jgSIA.gif" rel="nofollow noreferrer">enter image description here</a></p>
  <p>Here is my code:
  I added sorting to the array by order before mapping.</p>
  <pre><code>const Board = () =&gt; {
  const [currentId, setCurrentId] = useState(null);
  
  const lists = useSelector((state) =&gt; state.lists);
  const dispatch = useDispatch();
  
  const classes = useStyles();
  
  useEffect(() =&gt; {
      dispatch(getLists());
  }, [currentId, dispatch]);
  
  const onDragEnd = (result) =&gt; {
      const { destination, source, draggableId, type } = result;
  
      if(!destination) return;
  
      const droppableIdStart = source.droppableId;
      const droppableIdEnd = destination.droppableId;
      const droppableIndexStart = source.index;
      const droppableIndexEnd = destination.index;
  
      const newState = [...lists];
  
      // drag lists
      if(type === 'list') {
          const dragList = newState.splice(droppableIndexStart, 1);
          newState.splice(droppableIndexEnd, 0, ...dragList);
          
          // update order list to be index
          newState.forEach((list, index) =&gt; {
              list.order = index;
              dispatch(updateList(list._id , { ...list }));
          });
      }
      return newState;
  }
  
  // Arranging lists by order
  const newArrange = (a,b) =&gt; {
      return (a.order - b.order);
  }
  lists.sort(newArrange);
  
  return (
      &lt;&gt;
      &lt;DragDropContext  onDragEnd={onDragEnd} &gt;
          &lt;div&gt;
              &lt;h1&gt;Board&lt;/h1&gt; 
              &lt;Droppable droppableId=&quot;all-lists&quot; direction=&quot;horizontal&quot; type=&quot;list&quot;&gt;
                  { provided =&gt; (
                      &lt;div className={classes.listContainer} {...provided.droppableProps} ref={provided.innerRef} &gt;
                      { lists.map((list, index) =&gt; 
                          (user?.result?.googleId === list?.creator || user?.result?._id === list?.creator) ? 
                          &lt;List key={list._id} title={list.title} cards={list.cards} currentId={list._id} index={index} /&gt; :
                          null
                      )}
                          {addListFlag &amp;&amp; (
                              &lt;InputItem 
                                  value={listData.title}
                                  btnText={&quot;Add list&quot;} 
                                  type={&quot;list&quot;} 
                                  placeholder={&quot;Enter a list title...&quot;}
                                  changedHandler={handleChange} 
                                  closeHandler={closeHandlerBtn}
                                  addItem={submitHandler}
                                  /&gt;
                          )}
                          {!addListFlag &amp;&amp; (
                              &lt;AddBtn btnText={&quot;Add another list&quot;} type={&quot;list&quot;} handleClick={handleAddition} /&gt;
                          )}
                          {provided.placeholder}
                      &lt;/div&gt;
                  )}
              &lt;/Droppable&gt;
          &lt;/div&gt;
      &lt;/DragDropContext&gt;
      &lt;/&gt;
      )
  }
  
  export default Board;
  </code></pre>
  <p>Sample of data:</p>
  <pre><code>{
      _id: &quot;6163cdd306d27b&quot;,
      title: &quot;a&quot;,
      name: &quot;first one&quot;,
      order: &quot;0&quot;,
      cards:[
          {
              id: &quot;0&quot;,
              text: &quot;a1&quot;,
              _id: {_id: &quot;61d0ca2c20d27e&quot;}
          },
          {
              id: &quot;1&quot;,
              text: &quot;a2&quot;,
              _id: {_id: &quot;616541ec90630&quot;}
          },
          {
              id: &quot;2&quot;,
              text: &quot;a3&quot;,
              _id: {_id: &quot;61606e609&quot;}
          }
      ]
  }
  </code></pre>
  <p>Thank :)</p>