{"id":13450308,"url":"https://github.com/mobxjs/mobx-react-lite","last_synced_at":"2025-09-28T21:30:42.267Z","repository":{"id":37458440,"uuid":"156963479","full_name":"mobxjs/mobx-react-lite","owner":"mobxjs","description":"Lightweight React bindings for MobX based on React 16.8 and Hooks","archived":true,"fork":false,"pushed_at":"2020-12-30T16:20:49.000Z","size":3051,"stargazers_count":2129,"open_issues_count":0,"forks_count":90,"subscribers_count":29,"default_branch":"master","last_synced_at":"2024-09-27T03:21:46.351Z","etag":null,"topics":["mobx","observables","react","react-hooks"],"latest_commit_sha":null,"homepage":"https://mobx.js.org/react-integration.html","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mobxjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"open_collective":"mobx"}},"created_at":"2018-11-10T08:46:56.000Z","updated_at":"2024-09-10T03:15:21.000Z","dependencies_parsed_at":"2022-07-15T21:30:48.456Z","dependency_job_id":null,"html_url":"https://github.com/mobxjs/mobx-react-lite","commit_stats":null,"previous_names":[],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mobxjs%2Fmobx-react-lite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mobxjs%2Fmobx-react-lite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mobxjs%2Fmobx-react-lite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mobxjs%2Fmobx-react-lite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mobxjs","download_url":"https://codeload.github.com/mobxjs/mobx-react-lite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234563132,"owners_count":18853059,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mobx","observables","react","react-hooks"],"created_at":"2024-07-31T07:00:33.501Z","updated_at":"2025-09-28T21:30:41.791Z","avatar_url":"https://github.com/mobxjs.png","language":"TypeScript","readme":"# mobx-react-lite\n\n----\n\n## 🚨🚨🚨 This repo has been moved to [mobx](https://github.com/mobxjs/mobx/tree/main/packages/mobx-react-lite)\n\n----\n\n[![CircleCI](https://circleci.com/gh/mobxjs/mobx-react-lite.svg?style=svg)](https://circleci.com/gh/mobxjs/mobx-react-lite)[![Coverage Status](https://coveralls.io/repos/github/mobxjs/mobx-react-lite/badge.svg)](https://coveralls.io/github/mobxjs/mobx-react-lite)[![NPM downloads](https://img.shields.io/npm/dm/mobx-react-lite.svg?style=flat)](https://npmjs.com/package/mobx-react-lite)[![Minzipped size](https://img.shields.io/bundlephobia/minzip/mobx-react-lite.svg)](https://bundlephobia.com/result?p=mobx-react-lite)\n\n[![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n[![Discuss on Github](https://img.shields.io/badge/discuss%20on-GitHub-orange)](https://github.com/mobxjs/mobx/discussions)\n[![View changelog](https://img.shields.io/badge/changelogs.xyz-Explore%20Changelog-brightgreen)](https://changelogs.xyz/mobx-react-lite)\n\nThis is a lighter version of [mobx-react](https://github.com/mobxjs/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 `\u003cObserver\u003e` inside the render of class components.\nUnlike `mobx-react`, it doesn't `Provider`/`inject`, as `useContext` can be used instead.\n\n## Compatibility table (major versions)\n\n| mobx | mobx-react-lite | Browser                                        |\n| ---- | --------------- | ---------------------------------------------- |\n| 6    | 3               | Modern browsers (IE 11+ in compatibility mode) |\n| 5    | 2               | Modern browsers                                |\n| 4    | 2               | IE 11+, RN w/o Proxy support                   |\n\n`mobx-react-lite` requires React 16.8 or higher.\n\n## User Guide 👉 https://mobx.js.org/react-integration.html\n\n---\n\n## API reference ⚒\n\n### **`observer\u003cP\u003e(baseComponent: FunctionComponent\u003cP\u003e): FunctionComponent\u003cP\u003e`**\n\nThe 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.\nCan only be used for function components. For class component support see the `mobx-react` package.\n\n### **`\u003cObserver\u003e{renderFn}\u003c/Observer\u003e`**\n\nIs a React component, which applies observer to an anonymous region in your component. `\u003cObserver\u003e` can be used both inside class and function components.\n\n### **`useLocalObservable\u003cT\u003e(initializer: () =\u003e T, annotations?: AnnotationsMap\u003cT\u003e): T`**\n\nCreates an observable object with the given properties, methods and computed values.\n\nNote 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`).\n\n`useLocalObservable` is a short-hand for:\n\n`const [state] = useState(() =\u003e observable(initializer(), annotations, { autoBind: true }))`\n\n### **`enableStaticRendering(enable: true)`**\n\nCall `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.\n\n---\n\n## Deprecated APIs\n\n### **`useObserver\u003cT\u003e(fn: () =\u003e T, baseComponentName = \"observed\", options?: IUseObserverOptions): T`** (deprecated)\n\n_This API is deprecated in 3.\\*. It is often used wrong (e.g. to select data rather than for rendering, and `\u003cObserver\u003e` better decouples the rendering from the component updates_\n\n```ts\ninterface IUseObserverOptions {\n    // optional custom hook that should make a component re-render (or not) upon changes\n    // Supported in 2.x only\n    useForceUpdate: () =\u003e () =\u003e void\n}\n```\n\nIt 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).\n\n### **`useLocalStore\u003cT, S\u003e(initializer: () =\u003e T, source?: S): T`** (deprecated)\n\n_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_\n\nLocal 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.\n\nThe annotations are similar to the annotations that are passed in to MobX's [`observable`](https://mobx.js.org/observable.html#available-annotations) API, and can be used to override the automatic member inference of specific fields.\n\n### **`useAsObservableSource\u003cT\u003e(source: T): T`** (deprecated)\n\nThe 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).\n\n_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:_\n\n```javascript\n// Before:\nfunction Measurement({ unit }) {\n    const observableProps = useAsObservableSource({ unit })\n    const state = useLocalStore(() =\u003e ({\n        length: 0,\n        get lengthWithUnit() {\n            // lengthWithUnit can only depend on observables, hence the above conversion with `useAsObservableSource`\n            return observableProps.unit === \"inch\"\n                ? `${this.length * 2.54} inch`\n                : `${this.length} cm`\n        }\n    }))\n\n    return \u003ch1\u003e{state.lengthWithUnit}\u003c/h1\u003e\n}\n\n// After:\nfunction Measurement({ unit }) {\n    const state = useLocalObservable(() =\u003e ({\n        unit, // the initial unit\n        length: 0,\n        get lengthWithUnit() {\n            // lengthWithUnit can only depend on observables, hence the above conversion with `useAsObservableSource`\n            return this.unit === \"inch\" ? `${this.length * 2.54} inch` : `${this.length} cm`\n        }\n    }))\n\n    useEffect(() =\u003e {\n        // sync the unit from 'props' into the observable 'state'\n        state.unit = unit\n    }, [unit])\n\n    return \u003ch1\u003e{state.lengthWithUnit}\u003c/h1\u003e\n}\n```\n\nNote that, at your own risk, it is also possible to not use `useEffect`, but do `state.unit = unit` instead in the rendering.\nThis is closer to the old behavior, but React will warn correctly about this if this would affect the rendering of other components.\n\n## Observer batching (deprecated)\n\n_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_\n\n[Check out the elaborate explanation](https://github.com/mobxjs/mobx-react/pull/787#issuecomment-573599793).\n\nIn 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.\n\nImport one of these before any React rendering is happening, typically `index.js/ts`. For Jest tests you can utilize [setupFilesAfterEnv](https://jestjs.io/docs/en/configuration#setupfilesafterenv-array).\n\n**React DOM:**\n\n\u003e import 'mobx-react-lite/batchingForReactDom'\n\n**React Native:**\n\n\u003e import 'mobx-react-lite/batchingForReactNative'\n\n### Opt-out\n\nTo opt-out from batching in some specific cases, simply import the following to silence the warning.\n\n\u003e import 'mobx-react-lite/batchingOptOut'\n\n### Custom batched updates\n\nAbove 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.\n\n```js\nimport { observerBatching } from \"mobx-react-lite\"\nobserverBatching(customBatchedUpdates)\n```\n\n## Testing\n\nRunning the full test suite now requires node 14+\nBut the library itself does not have this limitation\n\nIn order to avoid memory leaks due to aborted renders from React\nfiber handling or React `StrictMode`, on environments that does not support [FinalizationRegistry](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry), this library needs to\nrun timers to tidy up the remains of the aborted renders.\n\nThis can cause issues with test frameworks such as Jest\nwhich require that timers be cleaned up before the tests\ncan exit.\n\n### **`clearTimers()`**\n\nCall `clearTimers()` in the `afterEach` of your tests to ensure\nthat `mobx-react-lite` cleans up immediately and allows tests\nto exit.\n","funding_links":["https://opencollective.com/mobx"],"categories":["Packages","TypeScript","Awesome MobX","React"],"sub_categories":["Related projects and utilities"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmobxjs%2Fmobx-react-lite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmobxjs%2Fmobx-react-lite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmobxjs%2Fmobx-react-lite/lists"}