πŸ‰ Reactive & asynchronous database for powerful React and React Native apps ⚑️

Overview

WatermelonDB

A reactive database framework

Build powerful React and React Native apps that scale from hundreds to tens of thousands of records and remain fast ⚑️

MIT License CI Status npm

WatermelonDB
⚑️ Launch your app instantly no matter how much data you have
πŸ“ˆ Highly scalable from hundreds to tens of thousands of records
😎 Lazy loaded. Only load data when you need it
πŸ”„ Offline-first. Sync with your own backend
πŸ“± Multiplatform. iOS, Android, and the web
βš›οΈ Works with React. Easily plug data into components
⏱ Fast. And getting faster with every release!
βœ… Proven. Powers Nozbe Teams since 2017 (and many others)
✨ Reactive. (Optional) RxJS API
πŸ”— Relational. Built on rock-solid SQLite foundation
⚠️ Static typing with Flow or TypeScript

Why Watermelon?

WatermelonDB is a new way of dealing with user data in React Native and React web apps.

It's optimized for building complex applications in React Native, and the number one goal is real-world performance. In simple words, your app must launch fast.

For simple apps, using Redux or MobX with a persistence adapter is the easiest way to go. But when you start scaling to thousands or tens of thousands of database records, your app will now be slow to launch (especially on slower Android devices). Loading a full database into JavaScript is expensive!

Watermelon fixes it by being lazy. Nothing is loaded until it's requested. And since all querying is performed directly on the rock-solid SQLite database on a separate native thread, most queries resolve in an instant.

But unlike using SQLite directly, Watermelon is fully observable. So whenever you change a record, all UI that depends on it will automatically re-render. For example, completing a task in a to-do app will re-render the task component, the list (to reorder), and all relevant task counters. Learn more.

React Native EU: Next-generation React Databases WatermelonDB Demo

πŸ“Ί Next-generation React databases
(a talk about WatermelonDB)

✨ Check out web Demo

Usage

Quick (over-simplified) example: an app with posts and comments.

First, you define Models:

class Post extends Model {
  @field('name') name
  @field('body') body
  @children('comments') comments
}

class Comment extends Model {
  @field('body') body
  @field('author') author
}

Then, you connect components to the data:

const Comment = ({ comment }) => (
  <View style={styles.commentBox}>
    <Text>{comment.body} β€” by {comment.author}</Text>
  </View>
)

// This is how you make your app reactive! ✨
const enhance = withObservables(['comment'], ({ comment }) => ({
  comment,
}))
const EnhancedComment = enhance(Comment)

And now you can render the whole Post:

const Post = ({ post, comments }) => (
  <View>
    <Text>{post.name}</Text>
    <Text>Comments:</Text>
    {comments.map(comment =>
      <Comment key={comment.id} comment={comment} />
    )}
  </View>
)

const enhance = withObservables(['post'], ({ post }) => ({
  post,
  comments: post.comments
}))

The result is fully reactive! Whenever a post or comment is added, changed, or removed, the right components will automatically re-render on screen. Doesn't matter if a change occurred in a totally different part of the app, it all just works out of the box!

➑️ Learn more: see full documentation

Who uses WatermelonDB

Nozbe Teams
CAPMO
Steady
Aerobotics
Smash Appz
Rocket Chat
HaloGo
SportsRecruits

Does your company or app use πŸ‰ ? Open a pull request and add your logo/icon with link here!

Contributing

We need you

WatermelonDB is an open-source project and it needs your help to thrive!

If there's a missing feature, a bug, or other improvement you'd like, we encourage you to contribute! Feel free to open an issue to get some guidance and see Contributing guide for details about project setup, testing, etc.

If you're just getting started, see good first issues that are easy to contribute to. If you make a non-trivial contribution, email me, and I'll send you a nice πŸ‰ sticker!

If you make or are considering making an app using WatermelonDB, please let us know!

Author and license

WatermelonDB was created by @Nozbe. Main author and maintainer is Radek Pietruszewski.

Contributors: @mobily, @kokusGr, @rozPierog, @rkrajewski, @domeknn, @Tereszkiewicz and more.

WatermelonDB is available under the MIT license. See the LICENSE file for more info.

Comments
  • Override entity IDs

    Override entity IDs

    Hey,

    we are currently evaluating this for our app. Since we try to implement our own sync engine on top, I'd be curious if it's possible to specify entity IDs whenever you create one.

    Right now, if I try to set an ID in the builder function, I get the following error:

    Diagnostic error: Attempt to set new value on a property Model.prototype.id marked as @readonly

    Great work by the way, this looks very promising!

    opened by sebastian-schlecht 38
  • Initial Sync Download

    Initial Sync Download

    I see in the docs the Sync API function pullChanges uses a fetch request to get the change in records

    My question is how does this fetch request handle large amounts of data, for example if an existing users, gets a new device and has to download 500,000+ records linked to their profile? Is there a way of initialising the watermelon db from the remote DB and guarantee all the data is there?

    opened by PatrickLambert1101 34
  • Adds rawQuery functionality

    Adds rawQuery functionality

    Adds rawQuery functionaility, but needs Flow coverage.

    Usage:

    const tableNameCollection = database.collections.get('table_name')
    tableNameCollection.unsafeFetchRecordsWithSQL('select * from ...')
    
    database.adapter.unsafeSqlQuery('select * from ...', 'table_name')
    

    Issue: #103

    opened by zobeirhamid 33
  • Database failed to load error

    Database failed to load error

    After some time spent to set up this package in react native, got this error:

    [DB] Uh-oh. Database failed to load, we're in big trouble, [TypeError: undefined is not an object (evaluating 'Native.setUp')]

    I am using expo for development.

    opened by theixbass 32
  • Request for TypeScript support

    Request for TypeScript support

    This project looks fantastic and it would be great to get TypeScript support as well. TypeScript has quite a big community but with this being quite a new project there doesn't appear to be a community definition yet. I'd be happy to have a crack at helping with this, but I have not written an index.d.ts definition before. Microsoft have a guide over at https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html.

    good first issue 
    opened by c-kirkeby 29
  • Batch Seeding Performance

    Batch Seeding Performance

    I'm currently running into issues while trying to use batch to seed my database. I have collections of around 50K records, which caused me to run into memory issues I assume are mentioned in #308.

    Since I'm using batch and not sync I added my own limit of around 1000 to get around the memory issue. This however has lead to very slow initial seeding performance (taking minutes to populate fully).

    #403 mentions using the new flag to achieve the 5K batch size, but I'm not sure if they've run into the slow seeding performance or not.

    Anybody had to deal with this case, or the general case of populating watermelon with many records?

    wontfix 
    opened by bzvikler 28
  • NodeJS client

    NodeJS client

    Fix #721

    note: I wanted to have the js files in the ./native folder, but as it is out of the ./src folder, I decided to change.

    pending tests, suggestions welcome cc @radex

    opened by sidferreira 24
  • [Bug][iOS] 'jsi/jsi.h' file not found

    [Bug][iOS] 'jsi/jsi.h' file not found

    Hi!

    After update from 0.16.0 to 0.16.1 I get this error:

    In file included from /node_modules/@nozbe/watermelondb/native/ios/WatermelonDB/JSLockPerfHack.mm:1:
    
    /node_modules/@nozbe/watermelondb/native/ios/WatermelonDB/JSLockPerfHack.h:3:10: fatal error: 'jsi/jsi.h' file not found
    #include <jsi/jsi.h>
             ^~~~~~~~~~~
    1 error generated.
    
    Screenshot 2020-05-19 at 13 03 05
    opened by kesha-antonov 22
  • An in-range update of eslint-plugin-jest is breaking the build 🚨

    An in-range update of eslint-plugin-jest is breaking the build 🚨

    The devDependency eslint-plugin-jest was updated from 22.9.0 to 22.10.0.

    🚨 View failing branch.

    This version is covered by your current version range and after updating it in your project the build failed.

    eslint-plugin-jest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

    Status Details

    Release Notes for v22.10.0

    22.10.0 (2019-07-17)

    Features

    Commits

    The new version differs by 7 commits.

    • 28bd1dc feat(rules): adds no-if rule (#293)
    • 7ebdc0e chore: enforce import destructure order
    • 31c7cef chore: convert to import/export (#302)
    • 9f858cb chore: delete tests instead of ignoring them with babel
    • c595ba0 chore: do not include tests in published tarball
    • 4b4eb78 chore: fix lint error in md file
    • d3ea720 chore(docs): fix typo (#304)

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper Bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 20
  • TypeError: from.from is not a function. (In 'from.from(observables[0])', 'from.from' is undefined)

    TypeError: from.from is not a function. (In 'from.from(observables[0])', 'from.from' is undefined)

    Here is my component

    const PlaylistItem = ({playlist}) => {
      console.log(playlist);
        return (
        <List.Item
          title={playlist.title}
          description="by you"
          left={props => <List.Icon {...props} icon="audiotrack" />}
        />
      );
    };
    
    const enhance = withObservables(['playlist'], ({playlist}) => ({
      playlist
    }));
    
    export default enhance(PlaylistItem);
    

    Here is how I call the component

    <FlatList
              data={this.state.playlists}
              renderItem={(item) => <PlaylistItem playlist={item} />}
            />
    

    This is my query

    async componentDidMount(){
        const playlists = database.collections.get('playlists');
        const allPlaylists = await playlists.query().fetch();
        console.log("playlist ", allPlaylists);
        this.setState({
          playlists: allPlaylists
        })
      }
    

    Please help me. I am not able to understand the problem. If I remove withObservables and export as it is, it is working fine.

    opened by YajanaRao 19
  • Sync error handling

    Sync error handling

    Are there any good examples of error handling for sync in both the frontend and backend that I can reference? I'm having trouble with the pullChanges & pushChanges changing records to synced even though some records failed to be pushed or pulled.

    EDIT: I added try catch to throw 503 error if any error occurs and it works but something about it feels off

    opened by KrisLau 18
  • build(deps): bump decode-uri-component from 0.2.0 to 0.2.2 in /examples/web

    build(deps): bump decode-uri-component from 0.2.0 to 0.2.2 in /examples/web

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies javascript 
    opened by dependabot[bot] 0
  • build(deps): bump decode-uri-component from 0.2.0 to 0.2.2 in /examples/native

    build(deps): bump decode-uri-component from 0.2.0 to 0.2.2 in /examples/native

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies javascript 
    opened by dependabot[bot] 0
  • build(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    build(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies javascript 
    opened by dependabot[bot] 0
  • Adding `observeCount()` to `useObservables` on a child component causes React `setState` to be called before the component is mounted

    Adding `observeCount()` to `useObservables` on a child component causes React `setState` to be called before the component is mounted

    I'm new to WatermelonDB and am just getting it set up in my project.

    I have a parent component called "UnsubscribeTab" which uses useObservables to listen to an observable, like so:

    Screen Shot 2022-11-27 at 1 30 02 AM

    As you can see, that parent component renders a child component called "EnhancedEmailListItem". The definition of that child component is as follows:

    Screen Shot 2022-11-27 at 1 30 47 AM

    The issue is that whenever React tries to render this child component for the first time, it throws the following error and none of the child components are rendered:

    Screen Shot 2022-11-27 at 1 25 18 AM

    A few observations:

    1. If I trigger any subsequent re-renders (by clicking around in my React web app UI, for example) the child component is able to render itself and the issue seems to be resolved. So this problem only seems to occur with the first render, before the child component is mounted.

    2. Removing the following line from the child component completely fixes the issue:

    messagesCount: sender?.messages?.observeCount(),

    This seems to be an issue seems to happen when observeCount() is executed for the very first time.

    Any ideas what might be happening here? I checked the docs for any mention of best practices for mounting, but wasn't able to find anything.

    opened by dsemelianov 1
  • Invoking `useObservables` causes React to warn me about not using UNSAFE_componentWillReceiveProps in strict mode.

    Invoking `useObservables` causes React to warn me about not using UNSAFE_componentWillReceiveProps in strict mode.

    I'm integrating WatermelonDB into my React project. Everything is fine until I add my first invocation of useObservables, like so:

    const enhance = withObservables([], () => ({ senders: db.collections.get("senders").query().observe(), }));

    export const EnhancedUnsubscribeTab = enhance(UnsubscribeTab);

    Whenever I run the project and get to the point where the EnhancedUnsubscribeTab component is rendered, React throws this error in the console:

    Screen Shot 2022-11-27 at 1 07 09 AM

    Is this normal?

    opened by dsemelianov 0
  • Use turbo json blobs not inserting?

    Use turbo json blobs not inserting?

    when we turned on use turbo one of the tables columns seemed to just come up blank. It was a column which stored some json blobs as strings. The funny thing is we have another table which has pretty much the same schema which is doesn't have the issue we are seeing.

    Here is an example of data that we have the turbo on for the initial sync:

    {
        "project_id": "4vh6vdb309sxua1t",
        "number": "4201",
        "registeredBy_id": "h7qwkegt5xma80e9",
        "registerDate": 1665715934621,
        "projectDayworks_id": "6jfxoyarzkxxp94o",
        "status": "draft",
        "floorplanReference_id": "qbfr9d3bsgk8pex4",
        "area_id": "c38q94r6c1bzez7g",
        "type": "penetration",
        "isVisible": true,
        "isLocked": false,
        "displayProps": "{\"geometry\":{\"type\":\"Point\",\"coordinates\":[882.9422402733347,1834.7897312388345]}}",
        "lowDisplayProps": "{\"geometry\":{\"type\":\"Point\",\"coordinates\":[882.9422402733347,1834.7897312388345]}}",
        "dataProps": "{\"type\":\"penetration\",\"isLocked\":false}",
        "quotePropType": "",
        "solution_id": "3ns0iif7gjbfgvbp",
        "solutionService_id": "islmcwi3jpc8ladl",
        "solutionSubstrate_id": "hto9nmbz4xkp0hhy",
        "ratingDimensionOne": 1,
        "ratingDimensionTwo": 30,
        "ratingDimensionThree": 30,
        "sizeCategoryName": "Circular",
        "notes": "",
        "name": "4201",
        "created_at": 1665715953585,
        "updated_at": 1668634362000,
        "id": "m9136l3ti7v1g7pq"
      } 
    

    in the object above the property "dataProps" always gets inserted as null, for every entry in that table.

       {
        "floorplanReference_id": "i0phpxgsunn5frqv",
        "area_id": "yk20z0n3bmvdz8ty",
        "type": "area",
        "isVisible": true,
        "isLocked": false,
        "displayProps": "{\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[689.5989980128202,1325.908859896178],[988.2366828777481,1325.908859896178],[988.2366828777481,1293.7972808784439],[1827.2427572173688,1293.7972808784439],[1827.2427572173688,1196.9703284377397],[689.5989980128202,1196.9703284377397],[689.5989980128202,1325.908859896178]]]}}",
        "lowDisplayProps": "{\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[689.5989980128202,1325.908859896178],[988.2366828777481,1325.908859896178],[988.2366828777481,1293.7972808784439],[1827.2427572173688,1293.7972808784439],[1827.2427572173688,1196.9703284377397],[689.5989980128202,1196.9703284377397],[689.5989980128202,1325.908859896178]]]}}",
        "dataProps": "{\"area\":119744.30578217609,\"type\":\"area\",\"isLocked\":false,\"stroke\":{\"color\":\"rgba(230, 83, 230, 1)\"},\"fill\":{\"color\":\"rgba(230, 83, 230, 0.25)\"}}",
        "ratingDimensionOne": 0,
        "ratingDimensionTwo": 0,
        "ratingDimensionThree": 0,
        "name": "Passage",
        "created_at": 1669229723674,
        "updated_at": 1669229781510,
        "id": "ox7u4q2ky7hj1cgp"
      }
    

    the object above is from another table and it works fine.

    EDIT: I've extracted and formatted these objects for the sake of this post. when we use turbo it comes as a 70mb string.

    opened by CDBridger 2
Owner
Nozbe
Powerful to-do app for teams for all the major platforms. Soon introducing all-new Nozbe4.com
Nozbe
A tree data structure that emits events on updates, even if the modification is triggered by one of the leaves, making it easier to think in a reactive way.

Freezer A tree data structure that emits events on updates, even if the modification is emited by one of the leaves, making it easier to think in a re

Javier Marquez 1.3k Nov 22, 2022
A tiny and unobtrusive state management library for React and Preact apps

statty A tiny and unobtrusive state management library for React and Preact apps The current size of statty/dist/statty.umd.min.js is: The problem Mos

Alessandro Arnodo 514 Nov 4, 2022
An immutable data store for managing deeply nested structure with React

Cortex is an immutable data store for managing deeply nested structure with React Key features: supports deeply nested data uses immutable data, which

Quan Nguyen 1.1k Nov 21, 2022
Highly Composable MVVM Framework for React

Astarisx Highly Composable MVVM Framework for React. Click here for the Astarisx Website and Documentation Highly Composable UI Components Astarisx Vi

Zuudo 86 Aug 13, 2019
Morearty.js - centralized state management for React in pure JavaScript

Morearty.js ![Gitter](https://badges.gitter.im/Join Chat.svg) Introduction Download Dependencies Current status Documentation Usage TodoMVC App compon

null 670 Nov 21, 2022
Async rendering & data-fetching for universal React applications.

React Resolver Async-rendering & data-fetching for universal React applications. React Resolver lets you define data requirements per-component and wi

Eric Clemmons 1.7k Nov 26, 2022
React integration for Baobab.

baobab-react Welcome to baobab's React integration (from v2.0.0 and onwards). Implemented patterns: Hooks Higher order components (curried so also usa

Guillaume Plique 309 Sep 29, 2022
Immutable data structures with history for top-to-bottom properties in component based libraries like React. Based on Immutable.js

Immstruct A wrapper for Immutable.js to easily create cursors that notify when they are updated. Handy for use with immutable pure components for view

null 376 Nov 10, 2022
A library for writing React components that automatically manage subscriptions to data sources simply by accessing them

ReSub A library for writing better React components and data stores. Uses automatic subscriptions to reduce code and avoid common data flow pitfalls.

Microsoft 612 Nov 11, 2022
React, but with built-in global state management.

ReactN ReactN is an extension of React that includes global state management. It treats global state as if it were built into React itself -- without

Charles Stover 1.9k Nov 11, 2022
experimental project for babel-plugin-mutable-react-state

Goalist Mutable React Example This example is an attempt to work with babel-plugin-mutable-react-state on a simpler project to see how complicated wou

Reaper 1 Jun 7, 2022
Immutable persistent data collections for Javascript which increase efficiency and simplicity.

Immutable collections for JavaScript Immutable data cannot be changed once created, leading to much simpler application development, no defensive copy

Immutable.js 32.3k Nov 26, 2022
JavaScript & TypeScript persistent and optionally immutable data tree with cursors.

Baobab Baobab is a JavaScript & TypeScript persistent and immutable (at least by default) data tree supporting cursors and enabling developers to easi

Guillaume Plique 3.1k Dec 2, 2022
Immutable data structures for JavaScript which are backwards-compatible with normal JS Arrays and Objects.

seamless-immutable Immutable JS data structures which are backwards-compatible with normal Arrays and Objects. Use them in for loops, pass them to fun

Richard Feldman 5.4k Nov 25, 2022
A light-weight type-safe Elm-like alternative for Redux ecosystem, inspired by hyperapp and Elmish

Hydux A light-weight Elm-like alternative for Redux ecosystem, inspired by Hyperapp and Elmish. Contents Hydux Contents Features Try it online! Instal

null 219 Nov 14, 2022
Immutable persistent data collections for Javascript which increase efficiency and simplicity.

Immutable collections for JavaScript Chat on slack Read the docs and eat your vegetables. Docs are automatically generated from README.md and immutabl

Immutable.js 32.4k Dec 6, 2022
πŸ‰ Reactive & asynchronous database for powerful React and React Native apps ⚑️

A reactive database framework Build powerful React and React Native apps that scale from hundreds to tens of thousands of records and remain fast ⚑️ W

Nozbe 8.8k Dec 4, 2022
This application contains end to end non blocking reactive flow. From Bankend( Database, Spring) and FrontEnd Angular

SpringReactiveApp This application has following projects Spring boot reactive with Mongo Database Angular with EventSource for reactive(non-blocking

null 1 Oct 26, 2021
βš›οΈ Hooks for fetching, caching and updating asynchronous data in React

Hooks for fetching, caching and updating asynchronous data in React Enjoy this library? Try the entire TanStack! React Table, React Form, React Charts

Tanner Linsley 31.5k Dec 8, 2022
Lightweight react-like library. Support for asynchronous rendering and hooks.

Recept Β· Lightweight react-like library. Like the name, this project is mainly based on the architectural idea of react, which can feel react more int

RuiLin Dong 52 Sep 17, 2022