title: ReactJs Beautiful DnD doesn't work on page refresh
body: <p>I am quite a newbie in developing web app with ReactJs. Currently I tried to develop a drag and drop list item to re-order the items in the list.</p>
  <p>I copied the codes identically from here:
  <a href="https://codesandbox.io/s/react-beautiful-dnd-tutorial-forked-sb2bdi" rel="nofollow noreferrer">https://codesandbox.io/s/react-beautiful-dnd-tutorial-forked-sb2bdi</a></p>
  <p>The only changes I made are:</p>
  <ol>
  <li>I change the <code>innerRef={provided.innerRef}</code> to <code>ref={provided.innerRef}</code> in both <code>column.js</code> and <code>task.js</code></li>
  <li>I create a new component called <code>TestDraggable.js</code> instead of directly rendering the list in <code>index.js</code></li>
  </ol>
  <p>here is my TestDraggable code:</p>
  <pre><code>import React from 'react'
  import { DragDropContext } from 'react-beautiful-dnd'
  import styled from 'styled-components'
  import Column from './column'
  import initialData from './initial-data'
  
  const Container = styled.div`
    display: flex;
  `
  
  class TestDraggable extends React.Component {
    state = initialData
  
    onDragEnd = (result) =&gt; {
      const { destination, source, draggableId } = result
  
      if (!destination) {
        return
      }
  
      if (
        destination.droppableId === source.droppableId &amp;&amp;
        destination.index === source.index
      ) {
        return
      }
  
      const start = this.state.columns[source.droppableId]
      const finish = this.state.columns[destination.droppableId]
  
      if (start === finish) {
        const newTaskIds = Array.from(start.taskIds)
        newTaskIds.splice(source.index, 1)
        newTaskIds.splice(destination.index, 0, draggableId)
  
        const newColumn = {
          ...start,
          taskIds: newTaskIds
        }
  
        const newState = {
          ...this.state,
          columns: {
            ...this.state.columns,
            [newColumn.id]: newColumn
          }
        }
  
        this.setState(newState)
        return
      }
  
      // Moving from one list to another
      const startTaskIds = Array.from(start.taskIds)
      startTaskIds.splice(source.index, 1)
      const newStart = {
        ...start,
        taskIds: startTaskIds
      }
  
      const finishTaskIds = Array.from(finish.taskIds)
      finishTaskIds.splice(destination.index, 0, draggableId)
      const newFinish = {
        ...finish,
        taskIds: finishTaskIds
      }
  
      const newState = {
        ...this.state,
        columns: {
          ...this.state.columns,
          [newStart.id]: newStart,
          [newFinish.id]: newFinish
        }
      }
      this.setState(newState)
    }
  
    render() {
      return (
        &lt;DragDropContext onDragEnd={this.onDragEnd}&gt;
          &lt;Container&gt;
            {this.state.columnOrder.map((columnId) =&gt; {
              const column = this.state.columns[columnId]
              const tasks = column.taskIds.map(
                (taskId) =&gt; this.state.tasks[taskId]
              )
  
              return (
                &lt;Column key={column.id} column={column} tasks={tasks} /&gt;
              )
            })}
          &lt;/Container&gt;
        &lt;/DragDropContext&gt;
      )
    }
  }
  
  export default TestDraggable
  </code></pre>
  <p>My <code>column.js</code> code:</p>
  <pre><code>import React from &quot;react&quot;
  import styled from &quot;styled-components&quot;
  import Task from &quot;./task&quot;
  import { Droppable } from &quot;react-beautiful-dnd&quot;
  
  const Container = styled.div`
    margin: 8px;
    border: 1px solid lightgrey;
    border-radius: 2px;
    width: 220px;
  
    display: flex;
    flex-direction: column;
  `
  const Title = styled.h3`
    padding: 8px;
  `
  const TaskList = styled.div`
    padding: 8px;
    transition: background-color 0.2s ease;
    background-color: ${(props) =&gt; (props.isDraggingOver ? &quot;skyblue&quot; : &quot;white&quot;)}
    flex-grow: 1;
    min-height: 100px;
  `
  
  export default class Column extends React.Component {
    render() {
      return (
        &lt;Container&gt;
          &lt;Title&gt;{this.props.column.title}&lt;/Title&gt;
          &lt;Droppable droppableId={this.props.column.id} type=&quot;TASK&quot;&gt;
            {(provided, snapshot) =&gt; (
              &lt;TaskList
                ref={provided.innerRef}
                {...provided.droppableProps}
                isDraggingOver={snapshot.isDraggingOver}
              &gt;
                {this.props.tasks.map((task, index) =&gt; (
                  &lt;Task key={task.id} task={task} index={index} /&gt;
                ))}
                {provided.placeholder}
                
              &lt;/TaskList&gt;
            )}
          &lt;/Droppable&gt;
        &lt;/Container&gt;
      )
    }
  }
  </code></pre>
  <p>The drag and drop works, but when I refresh the page in the browser, the drag and drop won't work anymore.</p>
  <p>If I add a new line to <code>column.js</code> and ctrl + S the file, the drag and drop works again. But if I simply ctrl + S without any changes, then it won't work.</p>
  <p>May I know what possibly be the cause here?</p>