gitmyhub

WatermelonDB

JavaScript ★ 12k updated 10mo ago

🍉 Reactive & asynchronous database for powerful React and React Native apps ⚡️

WatermelonDB is a fast local database for React and React Native apps that loads only what you need, keeps the UI smooth with background SQLite queries, and auto-refreshes components when data changes.

JavaScriptTypeScriptReact NativeSQLiteRxJSFlowsetup: moderatecomplexity 3/5

WatermelonDB is a local database library built for mobile and web apps that use React or React Native. It is designed to keep apps feeling fast even when they store large amounts of data, tens of thousands of records or more. The project has been in production use at Nozbe, a task management company, since 2017, and a number of other apps including Mattermost and Rocket.Chat also use it.

The core idea is that WatermelonDB does not load all your data into memory at once. Instead it reads only the records you actually request at the moment you need them. All queries run directly against a built-in SQLite database on a separate background thread, so the main interface thread stays free and the app launches quickly. This matters most on lower-end Android devices, where loading a large dataset into JavaScript at startup can make an app feel slow.

The other main feature is that WatermelonDB is reactive. When you connect a component in your app's interface to a piece of data, the component will automatically update any time that data changes, no matter where in the app the change happened. You do not have to manually check whether something changed or write extra code to refresh the screen. A developer defines models (the shape of their data, like posts and comments) and then connects those models to interface components using a provided helper. The library handles the rest.

WatermelonDB also supports syncing with a server backend, though the sync system requires you to provide your own backend API. It works on iOS, Android, the web, and Node.js. You can use it with TypeScript or Flow for static type checking. The optional reactive API is built on RxJS, but RxJS is not required.

The project is open source under the MIT license, meaning it is free to use in personal and commercial projects.

Where it fits