npmpackage.info

Gathering detailed insights and metrics for mobx-react-lite

Other packages similar to mobx-react-lite

@nikhilthota1/mobx-react-lite

1.0.1

Lightweight React bindings for MobX based on React 16.8+ and Hooks

mobx-react-lite-context

0.1.0

MobX React Lite Context

mobx-react-lite-inject

1.0.1

mobx-react-lite inject helper

mobx-react-lite-form

0.1.0

A form framework powered by react and mobx

Gathering detailed insights and metrics for mobx-react-lite

mobx-react-lite

Simple, scalable state management.

4.1.0

27,773

MIT

TypeScript

2.20 kB

197,585,480 5.2

Installations

npm install mobx-react-lite

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

22.11.0

NPM Version

10.9.0 Pull Requests

Open

17

Total

1,340

Closed

180

Merged

1,143

Issues

Open

51

Total

1,962

Closed

1,911

Releases

112

mobx@6.13.6

Updated on Jan 30, 2025

mobx-react@9.2.0

Updated on Dec 11, 2024

mobx-react-lite@4.1.0

Updated on Dec 11, 2024

eslint-plugin-mobx@0.0.13

Updated on Oct 21, 2024

eslint-plugin-mobx@0.0.12

Updated on Oct 20, 2024

mobx@6.13.5

Updated on Oct 16, 2024

View All 112 releases

Contributors

339

View All 339 Contributors

Languages

TypeScript

JavaScript

HTML

CSS

Shell

TypeScript (54.68%)

JavaScript (42.98%)

HTML (2.04%)

CSS (0.29%)

validate.email 🚀

Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.

Developer

mobxjs

Download Statistics

Total Downloads

197,585,480

Last Day

334,973

Last Week

1,658,674

Last Month

7,036,982

Last Year

65,429,357

GitHub Statistics

MIT License

27,773 Stars

3,325 Commits

1,783 Forks

332 Watchers

32 Branches

339 Contributors

Updated on Mar 13, 2025

Bundle Size

6.51 kB

Minified

2.20 kB

Minified + Gzipped

Bundlephobia

Sponsor this package

https://opencollective.com/mobx

Maintainers

Package Meta Information

Latest Version

4.1.0

Package Id

mobx-react-lite@4.1.0

Unpacked Size

413.54 kB

Size

84.83 kB

File Count

118

NPM Version

10.9.0

Node Version

22.11.0

Published on

Dec 11, 2024

Total Downloads

Cumulative downloads

Total Downloads

197,585,480

Last Day

7.1%

334,973

Compared to previous day

Last Week

1.7%

1,658,674

Compared to previous week

Last Month

18%

7,036,982

Compared to previous month

Last Year

45%

65,429,357

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

mobx-react-lite

This is a lighter version of mobx-react which supports React functional components only and as such makes the library slightly faster and smaller (only 1.5kB gzipped). Note however that it is possible to use <Observer> inside the render of class components. Unlike mobx-react, it doesn't Provider/inject, as useContext can be used instead.

Compatibility table (major versions)

mobx	mobx-react-lite	Browser
6	3	Modern browsers (IE 11+ in compatibility mode)
5	2	Modern browsers
4	2	IE 11+, RN w/o Proxy support

mobx-react-lite requires React 16.8 or higher.

User Guide 👉 https://mobx.js.org/react-integration.html

API reference ⚒

`observer<P>(baseComponent: FunctionComponent<P>): FunctionComponent<P>`

The observer converts a component into a reactive component, which tracks which observables are used automatically and re-renders the component when one of these values changes. Can only be used for function components. For class component support see the mobx-react package.

`<Observer>{renderFn}</Observer>`

Is a React component, which applies observer to an anonymous region in your component. <Observer> can be used both inside class and function components.

`useLocalObservable<T>(initializer: () => T, annotations?: AnnotationsMap<T>): T`

Creates an observable object with the given properties, methods and computed values.

Note that computed values cannot directly depend on non-observable values, but only on observable values, so it might be needed to sync properties into the observable using useEffect (see the example below at useAsObservableSource).

useLocalObservable is a short-hand for:

const [state] = useState(() => observable(initializer(), annotations, { autoBind: true }))

`enableStaticRendering(enable: true)`

Call enableStaticRendering(true) when running in an SSR environment, in which observer wrapped components should never re-render, but cleanup after the first rendering automatically. Use isUsingStaticRendering() to inspect the current setting.

Deprecated APIs

`useObserver<T>(fn: () => T, baseComponentName = "observed", options?: IUseObserverOptions): T` (deprecated)

This API is deprecated in 3.*. It is often used wrong (e.g. to select data rather than for rendering, and <Observer> better decouples the rendering from the component updates

1interface IUseObserverOptions {
2    // optional custom hook that should make a component re-render (or not) upon changes
3    // Supported in 2.x only
4    useForceUpdate: () => () => void
5}

It allows you to use an observer like behaviour, but still allowing you to optimize the component in any way you want (e.g. using memo with a custom areEqual, using forwardRef, etc.) and to declare exactly the part that is observed (the render phase).

`useLocalStore<T, S>(initializer: () => T, source?: S): T` (deprecated)

This API is deprecated in 3.*. Use useLocalObservable instead. They do roughly the same, but useLocalObservable accepts an set of annotations as second argument, rather than a source object. Using source is not recommended, see the deprecation message at useAsObservableSource for details

Local observable state can be introduced by using the useLocalStore hook, that runs its initializer function once to create an observable store and keeps it around for a lifetime of a component.

The annotations are similar to the annotations that are passed in to MobX's observable API, and can be used to override the automatic member inference of specific fields.

`useAsObservableSource<T>(source: T): T` (deprecated)

The useAsObservableSource hook can be used to turn any set of values into an observable object that has a stable reference (the same object is returned every time from the hook).

This API is deprecated in 3.* as it relies on observables to be updated during rendering which is an anti-pattern. Instead, use useEffect to synchronize non-observable values with values. Example:

1// Before:
2function Measurement({ unit }) {
3    const observableProps = useAsObservableSource({ unit })
4    const state = useLocalStore(() => ({
5        length: 0,
6        get lengthWithUnit() {
7            // lengthWithUnit can only depend on observables, hence the above conversion with `useAsObservableSource`
8            return observableProps.unit === "inch"
9                ? `${this.length / 2.54} inch`
10                : `${this.length} cm`
11        }
12    }))
13
14    return <h1>{state.lengthWithUnit}</h1>
15}
16
17// After:
18function Measurement({ unit }) {
19    const state = useLocalObservable(() => ({
20        unit, // the initial unit
21        length: 0,
22        get lengthWithUnit() {
23            // lengthWithUnit can only depend on observables, hence the above conversion with `useAsObservableSource`
24            return this.unit === "inch" ? `${this.length / 2.54} inch` : `${this.length} cm`
25        }
26    }))
27
28    useEffect(() => {
29        // sync the unit from 'props' into the observable 'state'
30        state.unit = unit
31    }, [unit])
32
33    return <h1>{state.lengthWithUnit}</h1>
34}

Note that, at your own risk, it is also possible to not use useEffect, but do state.unit = unit instead in the rendering. This is closer to the old behavior, but React will warn correctly about this if this would affect the rendering of other components.

Observer batching (deprecated)

Note: configuring observer batching is only needed when using mobx-react-lite 2.0.* or 2.1.*. From 2.2 onward it will be configured automatically based on the availability of react-dom / react-native packages

Check out the elaborate explanation.

In short without observer batching the React doesn't guarantee the order component rendering in some cases. We highly recommend that you configure batching to avoid these random surprises.

Import one of these before any React rendering is happening, typically index.js/ts. For Jest tests you can utilize setupFilesAfterEnv.

React DOM:

import 'mobx-react-lite/batchingForReactDom'

React Native:

import 'mobx-react-lite/batchingForReactNative'

Opt-out

To opt-out from batching in some specific cases, simply import the following to silence the warning.

import 'mobx-react-lite/batchingOptOut'

Custom batched updates

Above imports are for a convenience to utilize standard versions of batching. If you for some reason have customized version of batched updates, you can do the following instead.

1import { observerBatching } from "mobx-react-lite"
2observerBatching(customBatchedUpdates)

Testing

Running the full test suite now requires node 14+ But the library itself does not have this limitation

In order to avoid memory leaks due to aborted renders from React fiber handling or React StrictMode, on environments that does not support FinalizationRegistry, this library needs to run timers to tidy up the remains of the aborted renders.

This can cause issues with test frameworks such as Jest which require that timers be cleaned up before the tests can exit.

`clearTimers()`

Call clearTimers() in the afterEach of your tests to ensure that mobx-react-lite cleans up immediately and allows tests to exit.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

9

Security-Policy

Determines if the project has published a security policy.

8

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

104 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-pp7h-53gx-mx7r
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-qgfr-5hqp-vrw9
Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx
Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9
Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
Warn: Project is vulnerable to: GHSA-3949-f494-cm99
Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-jv35-xqg7-f92r
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-7q7g-4xm8-89cq
Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-wrvr-8mpx-r7pp
Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v

Score

5.2

/10

Last Scanned on 2025-03-03

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to mobx-react-lite

Other packages similar to mobx-react-lite

mobx-react-lite

Installations

Developer Guide

Yes

CommonJS

22.11.0

10.9.0

Pull Requests

17

1,340

180

1,143

Issues

51

1,962

1,911

Releases

Contributors

Languages

validate.email 🚀

Developer

Download Statistics

GitHub Statistics

Bundle Size

6.51 kB

2.20 kB

Sponsor this package

Maintainers

Package Meta Information

Total Downloads

197,585,480

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

mobx-react-lite

Compatibility table (major versions)

User Guide 👉 https://mobx.js.org/react-integration.html

API reference ⚒

observer<P>(baseComponent: FunctionComponent<P>): FunctionComponent<P>

<Observer>{renderFn}</Observer>

useLocalObservable<T>(initializer: () => T, annotations?: AnnotationsMap<T>): T

enableStaticRendering(enable: true)

Deprecated APIs

useObserver<T>(fn: () => T, baseComponentName = "observed", options?: IUseObserverOptions): T (deprecated)

useLocalStore<T, S>(initializer: () => T, source?: S): T (deprecated)

useAsObservableSource<T>(source: T): T (deprecated)

Observer batching (deprecated)

Opt-out

Custom batched updates

Testing

clearTimers()

10

10

10

10

9

8

0

0

0

0

0

0

5.2

/10

`observer<P>(baseComponent: FunctionComponent<P>): FunctionComponent<P>`

`<Observer>{renderFn}</Observer>`

`useLocalObservable<T>(initializer: () => T, annotations?: AnnotationsMap<T>): T`

`enableStaticRendering(enable: true)`

`useObserver<T>(fn: () => T, baseComponentName = "observed", options?: IUseObserverOptions): T` (deprecated)

`useLocalStore<T, S>(initializer: () => T, source?: S): T` (deprecated)

`useAsObservableSource<T>(source: T): T` (deprecated)

`clearTimers()`