DEV Community

Alex
Alex

Posted on

⚡️ Superfast, Cross-Platform String Hashing in React Native with react-native-xxhash

#reactnative #mobile #ios #android

Logo

“How can I hash strings super fast, on both Android and iOS?”

If you're building a React Native app and have ever asked this question, this post is for you.

🧹 The Problem

React Native has incredible potential for cross-platform development — but performance bottlenecks lurk beneath the surface, especially when dealing with string transformations or hashing large payloads.

Need a fast, deterministic hash function to:

  • Create stable cache keys?
  • Compare large strings quickly?
  • Identify duplicates or generate lightweight identifiers?

JavaScript isn't ideal here: hashing in JS can be slow, and worse, it runs on the main thread. That can seriously impact performance in complex apps.

🚀 Meet react-native-xxhash

react-native-xxhash is a lightweight JSI-based React Native library that uses xxHash: a lightning-fast, non-cryptographic hashing algorithm written in C++.

With zero bridge overhead and native execution, it delivers:

  • 🔥 Blazing-fast hashing
  • 🔄 Deterministic output
  • 📏 64-bit and 128-bit hash support
  • 📱 iOS and Android compatibility
  • ⚖️ JSI bindings for zero-copy, zero-bridge calls

📦 Installation 

npm install react-native-xxhash # or yarn add react-native-xxhash
Enter fullscreen mode Exit fullscreen mode

Then install pods on iOS:

cd ios && pod install
Enter fullscreen mode Exit fullscreen mode

✨ Usage Example 

import { hash64, hash128 } from 'react-native-xxhash'; const hashA = hash64('hello world'); const hashB = hash128('hello world'); console.log('64-bit hash:', hashA); console.log('128-bit hash:', hashB);
Enter fullscreen mode Exit fullscreen mode

In a Component 

import React, { useEffect } from 'react'; import { View, Text } from 'react-native'; import { hash64, hash128 } from 'react-native-xxhash'; export default function App() { useEffect(() => { const str = "react-native"; console.log("64-bit:", hash64(str)); console.log("128-bit:", hash128(str)); }, []); return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Check your console for hash results!</Text> </View> ); }
Enter fullscreen mode Exit fullscreen mode

📚 API Reference

hash64(input: string): string

  • Returns a 64-bit xxHash of the input string.

hash128(input: string): string

  • Returns a 128-bit xxHash of the input string.

🚀 Under the Hood

This library:

  • Uses the official C++ implementation of xxHash
  • Leverages JSI for direct bindings (no bridge involved)
  • Runs entirely in native code
  • Avoids serialization overhead

📂 Use Cases

This library is ideal when you need:

  • Deterministic keys for cache or storage
  • Fast string comparisons
  • Low-collision hash identifiers
  • A non-cryptographic, high-speed hash

🙌 Final Thoughts

If you're building high-performance React Native apps and need lightweight hashing, react-native-xxhash can be a perfect fit.

Check it out here: https://github.com/pioner92/react-native-xxhash

PRs, feedback, and ideas are always welcome!

Thanks for reading ✨

Top comments (0)