Chad Dower

Posted on Oct 10

Building a Chess App: Efficient Real-time Move Validation Using Bitboards in React Native

#algorithms #performance #reactnative #gamedev

Why Bitboards Transform Chess Performance

Traditional chess board representations use 2D arrays, requiring nested loops for move validation. Each move check involves multiple array accesses and comparisons - fine for desktop apps, but potentially sluggish on mobile.

Bitboards change the game entirely. By representing the board as 64-bit integers and using bitwise operations, we can validate moves in microseconds rather than milliseconds.

Key benefits:

Lightning-fast move generation - Check all possible knight moves with a single bitwise operation
Memory efficiency - Entire board state in just 12 integers (6 piece types × 2 colors)
Hardware optimization - Modern processors execute bitwise operations in single CPU cycles
Clean separation - Game logic stays independent from UI rendering

Prerequisites

Before we dive in, make sure you have:

React Native development environment set up
Intermediate JavaScript knowledge (especially bitwise operators)
Basic understanding of chess rules
Familiarity with React hooks and state management

Understanding Bitboards: The Foundation

Let's start by understanding how bitboards represent a chess board. Imagine each square as a bit in a 64-bit integer:

Mapping Squares to Bits

// Board squares mapped to bit positions
// a1 = 0, b1 = 1, ... h8 = 63
const SQUARES = {
  a1: 0n, b1: 1n, c1: 2n, d1: 3n,
  e1: 4n, f1: 5n, g1: 6n, h1: 7n,
  // ... continuing to h8
  a8: 56n, b8: 57n, c8: 58n, d8: 59n,
  e8: 60n, f8: 61n, g8: 62n, h8: 63n
};

Each piece type gets its own bitboard:

class BitboardEngine {
  constructor() {
    // Separate bitboard for each piece type
    this.whitePawns = 0n;
    this.whiteKnights = 0n;
    this.whiteBishops = 0n;
    this.whiteRooks = 0n;
    this.whiteQueens = 0n;
    this.whiteKing = 0n;
    // ... same for black pieces
  }
}

Pro Tip: Use BigInt (the n suffix) for 64-bit operations in JavaScript to avoid precision loss with regular numbers.

Setting and Clearing Bits

Here's how to manipulate individual pieces:

// Place a piece on a square
setBit(bitboard, square) {
  return bitboard | (1n << BigInt(square));
}

// Remove a piece from a square
clearBit(bitboard, square) {
  return bitboard & ~(1n << BigInt(square));
}

// Check if a square is occupied
isOccupied(bitboard, square) {
  return (bitboard & (1n << BigInt(square))) !== 0n;
}

Implementing Knight Move Validation

Knights are perfect for demonstrating bitboard power. Instead of calculating each possible move, we use pre-computed attack patterns:

Pre-computing Knight Attacks

const KNIGHT_ATTACKS = new Array(64);

function initKnightAttacks() {
  for (let sq = 0; sq < 64; sq++) {
    let attacks = 0n;
    const rank = Math.floor(sq / 8);
    const file = sq % 8;

    // All 8 possible knight moves
    const moves = [
      {r: rank + 2, f: file + 1},
      {r: rank + 2, f: file - 1},
      {r: rank - 2, f: file + 1},
      {r: rank - 2, f: file - 1},
      {r: rank + 1, f: file + 2},
      {r: rank + 1, f: file - 2},
      {r: rank - 1, f: file + 2},
      {r: rank - 1, f: file - 2}
    ];

    // Set bits for valid moves
    moves.forEach(({r, f}) => {
      if (r >= 0 && r < 8 && f >= 0 && f < 8) {
        attacks |= 1n << BigInt(r * 8 + f);
      }
    });

    KNIGHT_ATTACKS[sq] = attacks;
  }
}

Validating Knight Moves

isValidKnightMove(from, to, ownPieces) {
  const possibleMoves = KNIGHT_ATTACKS[from];
  const targetBit = 1n << BigInt(to);

  // Can move if: target is in attack pattern 
  // AND not occupied by own piece
  return (possibleMoves & targetBit) !== 0n &&
         (ownPieces & targetBit) === 0n;
}

💡 Note: This validation runs in constant time O(1) regardless of board complexity!

Sliding Piece Logic (Bishops, Rooks, Queens)

Sliding pieces require more complex logic since they can be blocked:

Ray Generation for Sliding Pieces

generateRay(from, direction, allPieces) {
  let ray = 0n;
  let current = from;

  while (true) {
    current += direction;

    // Check boundaries
    if (!isValidSquare(current)) break;

    const bit = 1n << BigInt(current);
    ray |= bit;

    // Stop at first occupied square
    if ((allPieces & bit) !== 0n) break;
  }

  return ray;
}

Bishop Move Generation

getBishopMoves(square, allPieces, enemyPieces) {
  const directions = [-9, -7, 7, 9]; // Diagonals
  let moves = 0n;

  directions.forEach(dir => {
    const ray = this.generateRay(square, dir, allPieces);
    moves |= ray;
  });

  // Can't capture own pieces
  return moves & ~(allPieces & ~enemyPieces);
}

⚠️ Common Pitfall: Don't forget to handle edge wrapping! A piece on the h-file shouldn't wrap to the a-file when moving diagonally.

React Native Integration

Now let's integrate our bitboard engine with React Native components:

Creating the Chess Board Component

import { View, Pressable } from 'react-native';
import { useState, useMemo } from 'react';

const ChessBoard = () => {
  const [engine] = useState(() => new BitboardEngine());
  const [selectedSquare, setSelectedSquare] = useState(null);
  const [legalMoves, setLegalMoves] = useState(0n);

  const handleSquarePress = (square) => {
    if (selectedSquare === null) {
      // Select piece and calculate legal moves
      const moves = engine.getLegalMoves(square);
      setLegalMoves(moves);
      setSelectedSquare(square);
    } else {
      // Attempt move
      if (engine.isLegalMove(selectedSquare, square)) {
        engine.makeMove(selectedSquare, square);
        // Update UI...
      }
      setSelectedSquare(null);
      setLegalMoves(0n);
    }
  };

  // ... render logic
};

Optimizing Render Performance

import { memo } from 'react';

const Square = memo(({ square, isLegal, piece, onPress }) => {
  const style = useMemo(() => {
    return {
      backgroundColor: isLegal ? '#90EE90' : 
                       getSquareColor(square),
      // ... other styles
    };
  }, [square, isLegal]);

  return (
    <Pressable onPress={() => onPress(square)}>
      <View style={style}>
        {piece && <Piece type={piece} />}
      </View>
    </Pressable>
  );
});

Pro Tip: Use memo and useMemo to prevent unnecessary re-renders when bitboards change.

Special Moves: Castling and En Passant

Special moves require additional state tracking:

Castling Rights Management

class BitboardEngine {
  constructor() {
    // ... other initialization
    this.castlingRights = {
      whiteKingside: true,
      whiteQueenside: true,
      blackKingside: true,
      blackQueenside: true
    };
  }

  canCastle(color, side) {
    // Check castling rights
    const rights = this.castlingRights[`${color}${side}`];
    if (!rights) return false;

    // Check if path is clear
    const emptySquares = side === 'Kingside' ? 
      [5, 6] : [1, 2, 3];

    const allPieces = this.getAllPieces();
    return emptySquares.every(sq => 
      !this.isOccupied(allPieces, sq)
    );
  }
}

En Passant Detection

handleEnPassant(from, to, lastMove) {
  // Check if last move was pawn double push
  if (!lastMove || lastMove.piece !== 'pawn') return false;

  const isPawnDoubleMove = 
    Math.abs(lastMove.from - lastMove.to) === 16;

  if (!isPawnDoubleMove) return false;

  // Check if capturing pawn is in correct position
  const captureFile = lastMove.to % 8;
  const fromFile = from % 8;

  return Math.abs(captureFile - fromFile) === 1;
}

Performance Optimization Techniques

Magic Bitboards for Sliding Pieces

For production apps, consider magic bitboards for even faster sliding piece moves:

// Pre-computed magic numbers for each square
const ROOK_MAGICS = [
  0x8a80104000800020n,
  0x140002000100040n,
  // ... 64 magic numbers
];

function getRookMoves(square, occupancy) {
  const magic = ROOK_MAGICS[square];
  const index = Number((occupancy * magic) >> 52n);
  return ROOK_ATTACKS[square][index];
}

Native Module for Heavy Computation

// Consider native module for complex positions
import { NativeModules } from 'react-native';

const { ChessEngine } = NativeModules;

// Offload expensive operations
async function findBestMove() {
  const moves = await ChessEngine.findBestMove(
    this.exportPosition()
  );
  return moves;
}

✅ Best Practice: Profile your app to identify bottlenecks before optimizing. React Native's built-in profiler can help identify slow renders.

Common Issues and Solutions

Issue 1: BigInt Compatibility

Symptoms: App crashes on older devices with "BigInt is not defined"

Solution:

// Add polyfill for older devices
if (typeof BigInt === 'undefined') {
  global.BigInt = require('big-integer');
}

Issue 2: State Update Batching

Symptoms: Multiple moves appear to happen simultaneously

Solution:

// Use functional updates for sequential moves
setGameState(prev => {
  const newState = engine.makeMove(from, to);
  return { ...prev, ...newState };
});

Performance Tips

Pre-compute attack tables during app initialization, not during gameplay
Use bitwise operations for checking multiple conditions simultaneously
Cache frequently accessed calculations like piece mobility scores
Separate UI logic from chess engine calculations

When NOT to Use Bitboards

Bitboards might be overkill if you're:

Building a simple chess viewer without move validation
Targeting only modern high-end devices where performance isn't critical
Prioritizing development speed over runtime performance

Conclusion

Bitboards transform chess move validation from a computational bottleneck into a blazing-fast operation. By representing the board as bits and leveraging hardware-optimized bitwise operations, we've built a chess engine capable of validating moves in microseconds.

Key Takeaways:

Bitboards use 64-bit integers to represent chess positions efficiently
Pre-computed attack tables eliminate runtime calculations
Bitwise operations provide massive performance improvements over array-based approaches

Next Steps: