IOS TUTORIALS

HOW TO
USE DIFFABLE DATA
SOURCES IN SWIFT

Shubham Singh
@shubham_iosdev 􀆌
IOS TUTORIALS

What is a Diffable Data Source?

A Diffable Data Source object is a specialised type of data
source that you can use with your table/collection Views.

Diffable data source removes the need to implement the

UITableViewDataSource/UICollectionViewDataSource.

Its APIs allow you to define data sources for table/collection

views in terms of snapshots, & it represents their current states.

It handles any updates to your table/collection views

efficiently. You won’t get errors like `Invalid update: invalid
number of items in section 0 …`

Let us first look into the working of Diffable Data source for a
TableView.
Note- You can use Diffable Data Sources in projects running >= iOS 13

Shubham Singh
@shubham_iosdev 􀆌
IOS TUTORIALS

Working of Diffable Sources

To use Diffable Data source in a TableView/CollectionView, you
need to implement two things-

1. UITableViewDiffableDataSource

This class has two generic types, one for Section and the other
one for Item(Row). The only requirement is that both of them
should conform to Hashable protocol.

The data source will use hash values to determine changes in the
data set. So it’s important they both the Section and Item are
unique.

Shubham Singh
@shubham_iosdev 􀆌
IOS TUTORIALS

Let us see an example for constructing a UITableView Diffable

DataSource-

We first create a struct named Item, and we pass this as the

ItemIdentifier to the DiffableDataSource. For the SectionIdentifier,
We simply pass an Int. (You can create a custom type for the Section as well
if required, depending on your use case).

For the third parameter, you have to pass the tableView for which
the cells needs to be returned and displayed.

In the closure, you get a TableView reference and an IndexPath

for dequeuing cells. You also get an item that you can use to
setup your cells.

Shubham Singh
@shubham_iosdev 􀆌
IOS TUTORIALS

Data is provided to the DiffableDataSource by using a struct

called NSDiffableDataSourceSnapshot.

2. NSDiffableDataSourceSnapshot

You can see that it has the same Section and Item types
requirement as the DiffableDataSource.

A snapshot is a representation of the state of the data in a view at

a specific point in time.

With a snapshot, you can set the initial state of the data for The
table/Collection views and later, Update the data when needed.

The data in a snapshot is made up of the sections and items you want
to display. This data is reflected in the tableView when passed to the
dataSource.

Shubham Singh
@shubham_iosdev 􀆌
IOS TUTORIALS

Let us populate a NSDiffableDataSourceSnapshot and apply it to

the dataSource-

First, we create an instance of NSDiffableDataSourceSnapshot by

providing the types used by the DataSource.

Next, we add a single section to the snapshot with ID as `112`. After

adding a section, we add items/rows to that section.

The last step is to apply/pass the created snapshot to the

dataSource. With this, the tableView will display the data.

Shubham Singh
@shubham_iosdev 􀆌
IOS TUTORIALS

Tutorial
Let us create an app to display books based on trends. First, let us
create the model for the same.

The Book struct contains the

properties for a book. We will
use this as Item.

The BookShelf contains a shelfTitle and a list of books. We did not

make this as Hashable as we only need to pass the shelf title to the
Section.

Now, we have to create a TableViewCell with a XIB for the Book

entries. Connect the outlets and define a function setupCell to pass
the data to the cell.

Shubham Singh
@shubham_iosdev 􀆌
IOS TUTORIALS

In the ViewController, we first add the tableView, connect its outlet

and create a dataset of BookShelves.
􀆊

Next, we create a Diffable DataSource,

and initialise it in the viewDidLoad().

In the closure of the dataSource, we

initialise the cell, provide data to it and
return it.

PS- You still need to set the tableView delegate and implement rowHeight, section etc.

Shubham Singh
@shubham_iosdev 􀆌
IOS TUTORIALS

Now we write the function to create a snapshot based on the values

of Bookshelves and pass it to the DataSource.

The applySnapshot() functions

create an NSDiffable
DataSource Snapshot, iterates
through the bookshelves
variable, adds the sections &
the items and passes it to
dataSource.

Suppose we add a button to shuffle the data, we just need to do this-

Once a new snapshot is passed the TableView finds the minimum amount
of changes needed to go from old to new and animates the changes.

Shubham Singh
@shubham_iosdev 􀆌
IOS TUTORIALS

Shubham Singh
@shubham_iosdev

THAT’S IT, DIFFABLE DATASOURCES ARE

QUICK AND SIMPLIFIES THE WAY WE
BUILD AND UPDATE OUR DATA
Find the link to my Diffable DataSources project in my GitHub.

􀌩 COMMENT

􀊵 LIKE

􀉟 SAVE FOR LATER