I've been playing around with Cellular Automata in React Native. I use an array of objects containing the view for one row of cells (the CellRow Component below), and return every CellRow from that array using the map function in the parent component.

const CellRow = (props) => {
  const arr = props.arr
  const yOffset = props.count

  let mappedRow = arr.map((cell, index) => {
    if ((index > arrayOffset - 1 && index < arraySize - arrayOffset) && cell === 1) { // OG expression
      // if (cell && index < arraySize + (-1 && arrayOffset) && index > -1 + arrayOffset) {

        return (
        <View key={index} style={{ width: cellSize, height: cellSize, backgroundColor: "black", position: 'absolute', top: yOffset * cellSize, left: (index * cellSize) - (arrayOffset * cellSize) }} />
      )
    }
  })

  return (
    <View >
      {mappedRow}
    </View>
  )

}

Here is a screenshot:

Everything works as expected so I've been cleaning my code, and thought I should try simplifying any boolean expressions. I took the if statement in my CellRow component

if ((index > arrayOffset - 1 && index < arraySize - arrayOffset) && cell === 1)

put it into a boolean algebra calculator, and it returned this:

if (cell && index < arraySize + (-1 && arrayOffset) && index > -1 + arrayOffset)

The new expression seemed to work just as well. But, after a few pages of generating cells, the app begins to slow down drastically. Rows appear slower and slower even at the start of a new page when the array being mapped is empty.

I fixed this by switching back to my old expression, but am very confused why the new expression worked but performed much worse. Does react have some preference for the way boolean logic should be expressed?