UICollection Compositional Layout Part 4 DataSource

Figure 1
Figure 2


Figure 3

DiffableDataSource (New approach)

Figure 4
Figure 5


Figure 6.1
Figure 6.2
Figure 6.3
Figure 6.4
Figure 7

Getting Started

Figure 8
Figure 9
Figure 10
Figure 11.1
Figure 11.2


  1. For 1 section example we only conform to Hashable which means all value in the object should be same to generate same hash value and same for == operator
  2. For 2 section example we conform to Hashable and say has should be generate with serialNumber which means if onlyserialNumber value in object should be same to generate same hash value and for == operator still whole object value will same
  3. For last section if serialNumber in objects is same it will produce same hash and both object are equal as well
Figure 12
Figure 13
Figure 14.1
Figure 14.2

Insert Item

  • To show the animation initially I show only one tweet
  • On insert, we first fetch old snapshot and append new tweets and tell apply new snapshot, with animation in a declarative way
  • And diffable data source did it’s magic
Figure 15
Gif 1

Delete Item

Figure 16.1
Figure 16.2
Gif 2

Update Item

Figure 17.1
Figure 17.2
Figure 18
Figure 19
Figure 20
Figure 21
Figure 22
Figure 23
Figure 24
Figure 25
  • write your hash function combining all the values that can change in the view ex.
  • Create new snapshot and apply it will automatically find optimized diff and reader UI
Figure 26
Figure 27
Figure 28
Figure 29

In short

  • No perform batch updated ad only apply
  • Note diffable datasource diff operation complexity is O(N)
Figure 30
Figure 31

Useful links



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ali Akhtar

Ali Akhtar

Senior iOS Engineer | HungerStation | Delivery Hero