React Native sectionHeaderHasChanged: (s1, s2) => s1 !== s2,

Question

There's nothing really in the docs about this so can anyone tell me what this means exactly:

sectionHeaderHasChanged: (s1, s2) => s1 !== s2,

or this:

sectionHeaderHasChanged: (h1, h2) => h1 !== h2,

You see it here normally:

var ds = new ListView.DataSource({
  rowHasChanged: (r1, r2) => r1 !== r2,
  sectionHeaderHasChanged: (h1, h2) => h1 !== h2,
});

While we're at it, not quite sure what the first line regarding rowHasChanged does/means either.

Are you confused about the named parameter or the lambda expression or both? — Enigmativity, Jan 22 '16 at 04:42
Yes everything. Not sure how this is used at all by the code. — Hasen, Jan 22 '16 at 06:17

score 1 · Accepted Answer · answered Jan 22 '16 at 06:21

Two concepts here, the Arrow function and the sectionHeaderHasChanged and rowHasChanged attributes.

Arrow function: This is a new feature in ecmascript 6, which allows quick creation of small anonymous functions which stay within the context of the surrounding code enter code herefor instance:

the syntax is simple: (arguments) => {function body} e.g. the following two would assign the same function callback to onclick:

btn.onclick = (event) => {console.log(event)} 

btn.onclick = function(event){console.log(event)}

sectionHeaderHasChanged && rowHasChanged: Many features is react-native are not really as well documented as I would like them to be but it’s still early days, best I can tell,

Only re-render changed rows - the rowHasChanged function provided to the data source tells the ListView if it needs to re-render a row because the source data has changed - see ListViewDataSource for more details.

react facebook

The datasource object allows two callbacks in that vain: 1. rowHasChanged 2. sectionHeaderHasChanged The two check to see if a previously rendered row/sectionHeader (respectively) has changed and should be rendered as the user scrolls up and down the list.

In the case of your code snippet above, you are giving dataSource callback ARROW functions that accept two arguments each:

The rendered row/sectionHeader and
the current row/sectionHeader The functions return false if the row/sectionHeader has not changed and should not be re-rendered or true if it has changed and should be re-rendered.

NOTE: ARROW functions with only one statement in the body can omit the curly braces and the return operator and they will automatically return the result of their one expression. e.g. (a, b) => a + b would be the same as (a, b) => {return a + b} and function(a, b){return a + b}

Thanks for your detailed explanation but I'm still not quite clear. s1 !== s2 seems to be asking an IF but then there is nothing afterwards. — Hasen, Jan 22 '16 at 07:04
The "Strict not equal " operator (`!==`) "returns true if the operands are of the same type but not equal, or are of different type." - according to the documentation - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators — Enigmativity, Jan 22 '16 at 07:08
@Hasen yes, an arrow function with only one expression, in this case the comparison s1 !== s2 returns the result of that expression automatically, no need for the operator return. it's the exact same as function(s1, s2){return s1 !== s2} i.e. it returns true is the s1 is not the same as s2. — kamikazeOvrld, Jan 23 '16 at 06:42

React Native sectionHeaderHasChanged: (s1, s2) => s1 !== s2,

1 Answers1