https://github.com/rakannimer/deref-mobx-observable

Dereference mobx observables deep in your component tree.
https://github.com/rakannimer/deref-mobx-observable

Last synced: 12 days ago
JSON representation

Dereference mobx observables deep in your component tree.

• Host: GitHub
• URL: https://github.com/rakannimer/deref-mobx-observable
• Owner: rakannimer
• Created: 2018-09-30T12:14:23.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-09-30T12:32:32.000Z (over 6 years ago)
• Last Synced: 2025-01-18T00:42:13.238Z (about 1 month ago)
• Language: TypeScript
• Size: 470 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# deref-mobx-observable

[![BundlePhobia][bundlephobia-badge]][bundlephobia-href]

> Deref mobx observables deep in your component directory for better performance.

[![NPM](https://img.shields.io/npm/v/deref-mobx-observable.svg)](https://www.npmjs.com/package/deref-mobx-observable) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![Build Status](https://travis-ci.org/rakannimer/deref-mobx-observable.svg?branch=master)](https://travis-ci.org/rakannimer/deref-mobx-observable)

## Install

```bash

yarn add deref-mobx-observable  # Or npm install --save deref-mobx-observable

```

## Usage

```tsx

import * as React from "react";

import { observable } from "mobx";

import Deref from "deref-mobx-observable";

const val = observable.box(1);

export default class App extends React.Component<{ Deref: typeof Deref }> {

  static defaultProps = {

    Deref

  };

  render() {

    const { Deref } = this.props;

    return (

      


        


          
👇 won't be re-rendered

          
{Date.now()}

        

        

          {value => (

            // This will be re-rendered

            


              
👇 will be re-rendered

              
{Date.now()}

              

                {JSON.stringify(value)}

              

            

          )}

        

        
👇 won't be re-rendered

         {

            val.set(val.get() + 1);

          }}

          data-testid="change"

        >

          
 Increment 

          
 {Date.now()} 

        

      

    );

  }

}

```


## License

MIT © [rakannimer](https://github.com/rakannimer)

[bundlephobia-badge]: https://img.shields.io/bundlephobia/minzip/deref-mobx-observable.svg

[bundlephobia-href]: https://bundlephobia.com/result?p=deref-mobx-observable