Gathering detailed insights and metrics for mobx-react-lite
Installations
npm install mobx-react-liteDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
22.11.0
NPM Version
10.9.0
Releases
112
mobx@6.13.6
mobx@6.13.6
Updated on Jan 30, 2025
mobx-react@9.2.0
mobx-react@9.2.0
Updated on Dec 11, 2024
mobx-react-lite@4.1.0
mobx-react-lite@4.1.0
Updated on Dec 11, 2024
eslint-plugin-mobx@0.0.13
eslint-plugin-mobx@0.0.13
Updated on Oct 21, 2024
eslint-plugin-mobx@0.0.12
eslint-plugin-mobx@0.0.12
Updated on Oct 20, 2024
mobx@6.13.5
mobx@6.13.5
Updated on Oct 16, 2024
Contributors
339
Languages
5
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
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
Sponsor this package
Maintainers
2
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.
Reason
9 commit(s) and 3 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
security policy file detected
Details
- Info: security policy file detected: SECURITY.md:1
- Info: Found linked content: SECURITY.md:1
- Warn: One or no descriptive hints of disclosure, vulnerability, and/or timelines in security policy
- Info: Found text in security policy: SECURITY.md:1
Reason
Found 15/18 approved changesets -- score normalized to 8
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/build_and_test.yml:1
- Warn: no topLevel permission defined: .github/workflows/coveralls.yml:1
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build_and_test.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/mobxjs/mobx/build_and_test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build_and_test.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/mobxjs/mobx/build_and_test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/coveralls.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/mobxjs/mobx/coveralls.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/coveralls.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/mobxjs/mobx/coveralls.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/coveralls.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/mobxjs/mobx/coveralls.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/mobxjs/mobx/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/mobxjs/mobx/release.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/mobxjs/mobx/release.yml/main?enable=pin
- Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 2 third-party GitHubAction dependencies pinned
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 29 are checked with a SAST tool
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