javascript / expert
Snippet
High-Density Array Buffer Bitmask Indexing for Virtualized React Grid State
Leverages low-level TypedArrays and bitwise array manipulation to represent large boolean selection states for virtualized React data tables with minimal memory overhead compared to standard arrays or sets.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class GridBitmaskStore {constructor(totalRows) {this.buffer = new Uint8Array(Math.ceil(totalRows / 8));}setBit(index, value) {const byteIndex = index >> 3;const bitPosition = index & 7;if (value) {this.buffer[byteIndex] |= (1 << bitPosition);} else {this.buffer[byteIndex] &= ~(1 << bitPosition);}}getBit(index) {return (this.buffer[index >> 3] & (1 << (index & 7))) !== 0;}}
react
Breakdown
1
this.buffer = new Uint8Array(Math.ceil(totalRows / 8));
Allocates a compact Uint8Array byte buffer where each byte stores 8 individual boolean row states.
2
const byteIndex = index >> 3;
Uses bitwise right shift to rapidly divide the index by 8 and find the corresponding byte location.
3
this.buffer[byteIndex] |= (1 << bitPosition);
Applies bitwise OR with a left-shifted bitmask to set a specific bit flag within the target byte to 1.
4
return (this.buffer[index >> 3] & (1 << (index & 7))) !== 0;
Applies bitwise AND with modulo 7 bitmask position to extract and evaluate the single bit state.