[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3335":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":14,"stars7d":14,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":17,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":21,"defaultBranch":22,"hasWiki":20,"hasPages":21,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":16,"starSnapshotCount":16,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},3335,"recompose","acdlite\u002Frecompose","acdlite","A React utility belt for function components and higher-order components.","",null,"JavaScript",14802,1222,1,64,0,3,72.06,"MIT License",true,false,"master",[],"2026-06-12 04:00:17","## A Note from the Author (acdlite, Oct 25 2018):\n\nHi! I created Recompose about three years ago. About a year after that, I joined the React team. Today, we announced a proposal for [*Hooks*](https:\u002F\u002Freactjs.org\u002Fhooks). Hooks solves all the problems I attempted to address with Recompose three years ago, and more on top of that. I will be discontinuing active maintenance of this package (excluding perhaps bugfixes or patches for compatibility with future React releases), and recommending that people use Hooks instead. **Your existing code with Recompose will still work**, just don't expect any new features. Thank you so, so much to [@wuct](https:\u002F\u002Fgithub.com\u002Fwuct) and [@istarkov](https:\u002F\u002Fgithub.com\u002Fistarkov) for their heroic work maintaining Recompose over the last few years.\n\nRead more discussion about this decision [here](https:\u002F\u002Fgithub.com\u002Facdlite\u002Frecompose\u002Fissues\u002F756#issuecomment-438674573).\n\n***\n\nRecompose\n-----\n\n[![build status](https:\u002F\u002Fimg.shields.io\u002Ftravis\u002Facdlite\u002Frecompose\u002Fmaster.svg?style=flat-square)](https:\u002F\u002Ftravis-ci.org\u002Facdlite\u002Frecompose)\n[![coverage](https:\u002F\u002Fimg.shields.io\u002Fcodecov\u002Fc\u002Fgithub\u002Facdlite\u002Frecompose.svg?style=flat-square)](https:\u002F\u002Fcodecov.io\u002Fgithub\u002Facdlite\u002Frecompose)\n[![code climate](https:\u002F\u002Fimg.shields.io\u002Fcodeclimate\u002Fgithub\u002Facdlite\u002Frecompose.svg?style=flat-square)](https:\u002F\u002Fcodeclimate.com\u002Fgithub\u002Facdlite\u002Frecompose)\n[![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Frecompose.svg?style=flat-square)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Frecompose)\n[![npm downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Frecompose.svg?style=flat-square)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Frecompose)\n\nRecompose is a React utility belt for function components and higher-order components. Think of it like lodash for React.\n\n[**Full API documentation**](docs\u002FAPI.md) - Learn about each helper\n\n[**Recompose Base Fiddle**](https:\u002F\u002Fjsfiddle.net\u002Fevenchange4\u002Fp3vsmrvo\u002F1599\u002F) - Easy way to dive in\n\n```\nnpm install recompose --save\n```\n\n**📺 Watch Andrew's [talk on Recompose at React Europe](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=zD_judE-bXk).**\n*(Note: Performance optimizations he speaks about have been removed, more info [here](https:\u002F\u002Fgithub.com\u002Facdlite\u002Frecompose\u002Freleases\u002Ftag\u002Fv0.26.0))*\n\n### Related modules\n\n[**recompose-relay**](src\u002Fpackages\u002Frecompose-relay) — Recompose helpers for Relay\n\n## You can use Recompose to...\n\n### ...lift state into functional wrappers\n\nHelpers like `withState()` and `withReducer()` provide a nicer way to express state updates:\n\n```js\nconst enhance = withState('counter', 'setCounter', 0)\nconst Counter = enhance(({ counter, setCounter }) =>\n  \u003Cdiv>\n    Count: {counter}\n    \u003Cbutton onClick={() => setCounter(n => n + 1)}>Increment\u003C\u002Fbutton>\n    \u003Cbutton onClick={() => setCounter(n => n - 1)}>Decrement\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n)\n```\n\nOr with a Redux-style reducer:\n\n```js\nconst counterReducer = (count, action) => {\n  switch (action.type) {\n  case INCREMENT:\n    return count + 1\n  case DECREMENT:\n    return count - 1\n  default:\n    return count\n  }\n}\n\nconst enhance = withReducer('counter', 'dispatch', counterReducer, 0)\nconst Counter = enhance(({ counter, dispatch }) =>\n  \u003Cdiv>\n    Count: {counter}\n    \u003Cbutton onClick={() => dispatch({ type: INCREMENT })}>Increment\u003C\u002Fbutton>\n    \u003Cbutton onClick={() => dispatch({ type: DECREMENT })}>Decrement\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n)\n```\n\n### ...perform the most common React patterns\n\nHelpers like `componentFromProp()` and `withContext()` encapsulate common React patterns into a simple functional interface:\n\n```js\nconst enhance = defaultProps({ component: 'button' })\nconst Button = enhance(componentFromProp('component'))\n\n\u003CButton \u002F> \u002F\u002F renders \u003Cbutton>\n\u003CButton component={Link} \u002F> \u002F\u002F renders \u003CLink \u002F>\n```\n\n```js\nconst provide = store => withContext(\n  { store: PropTypes.object },\n  () => ({ store })\n)\n\n\u002F\u002F Apply to base component\n\u002F\u002F Descendants of App have access to context.store\nconst AppWithContext = provide(store)(App)\n```\n\n### ...optimize rendering performance\n\nNo need to write a new class just to implement `shouldComponentUpdate()`. Recompose helpers like `pure()` and `onlyUpdateForKeys()` do this for you:\n\n```js\n\u002F\u002F A component that is expensive to render\nconst ExpensiveComponent = ({ propA, propB }) => {...}\n\n\u002F\u002F Optimized version of same component, using shallow comparison of props\n\u002F\u002F Same effect as extending React.PureComponent\nconst OptimizedComponent = pure(ExpensiveComponent)\n\n\u002F\u002F Even more optimized: only updates if specific prop keys have changed\nconst HyperOptimizedComponent = onlyUpdateForKeys(['propA', 'propB'])(ExpensiveComponent)\n```\n\n### ...interoperate with other libraries\n\nRecompose helpers integrate really nicely with external libraries like Relay, Redux, and RxJS\n\n```js\nconst enhance = compose(\n  \u002F\u002F This is a Recompose-friendly version of Relay.createContainer(), provided by recompose-relay\n  createContainer({\n    fragments: {\n      post: () => Relay.QL`\n        fragment on Post {\n          title,\n          content\n        }\n      `\n    }\n  }),\n  flattenProp('post')\n)\n\nconst Post = enhance(({ title, content }) =>\n  \u003Carticle>\n    \u003Ch1>{title}\u003C\u002Fh1>\n    \u003Cdiv>{content}\u003C\u002Fdiv>\n  \u003C\u002Farticle>\n)\n```\n\n### ...build your own libraries\n\nMany React libraries end up implementing the same utilities over and over again, like `shallowEqual()` and `getDisplayName()`. Recompose provides these utilities for you.\n\n```js\n\u002F\u002F Any Recompose module can be imported individually\nimport getDisplayName from 'recompose\u002FgetDisplayName'\nConnectedComponent.displayName = `connect(${getDisplayName(BaseComponent)})`\n\n\u002F\u002F Or, even better:\nimport wrapDisplayName from 'recompose\u002FwrapDisplayName'\nConnectedComponent.displayName = wrapDisplayName(BaseComponent, 'connect')\n\nimport toClass from 'recompose\u002FtoClass'\n\u002F\u002F Converts a function component to a class component, e.g. so it can be given\n\u002F\u002F a ref. Returns class components as is.\nconst ClassComponent = toClass(FunctionComponent)\n```\n\n### ...and more\n\n## API docs\n\n[Read them here](docs\u002FAPI.md)\n\n## Flow support\n\n[Read the docs](docs\u002Fflow.md)\n\n## Translation\n\n[Traditional Chinese](https:\u002F\u002Fgithub.com\u002Fneighborhood999\u002Frecompose)\n\n## Why\n\nForget ES6 classes vs. `createClass()`.\n\nAn idiomatic React application consists mostly of function components.\n\n```js\nconst Greeting = props =>\n  \u003Cp>\n    Hello, {props.name}!\n  \u003C\u002Fp>\n```\n\nFunction components have several key advantages:\n\n- They help prevent abuse of the `setState()` API, favoring props instead.\n- They encourage the [\"smart\" vs. \"dumb\" component pattern](https:\u002F\u002Fmedium.com\u002F@dan_abramov\u002Fsmart-and-dumb-components-7ca2f9a7c7d0).\n- They encourage code that is more reusable and modular.\n- They discourage giant, complicated components that do too many things.\n- They allow React to make performance optimizations by avoiding unnecessary checks and memory allocations.\n\n(Note that although Recompose encourages the use of function components whenever possible, it works with normal React components as well.)\n\n### Higher-order components made easy\n\nMost of the time when we talk about composition in React, we're talking about composition of components. For example, a `\u003CBlog>` component may be composed of many `\u003CPost>` components, which are composed of many `\u003CComment>` components.\n\nRecompose focuses on another unit of composition: **higher-order components** (HoCs). HoCs are functions that accept a base component and return a new component with additional functionality. They can be used to abstract common tasks into reusable pieces.\n\nRecompose provides a toolkit of helper functions for creating higher-order components.\n\n## [Should I use this? Performance and other concerns](docs\u002Fperformance.md)\n\n## Usage\n\nAll functions are available on the top-level export.\n\n```js\nimport { compose, mapProps, withState \u002F* ... *\u002F } from 'recompose'\n```\n\n**Note:** `react` is a _peer dependency_ of Recompose.  If you're using `preact`, add this to your `webpack.config.js`:\n\n```js\nresolve: {\n  alias: {\n    react: \"preact\"\n  }\n}\n```\n\n### Composition\n\nRecompose helpers are designed to be composable:\n\n```js\nconst BaseComponent = props => {...}\n\n\u002F\u002F This will work, but it's tedious\nlet EnhancedComponent = pure(BaseComponent)\nEnhancedComponent = mapProps(\u002F*...args*\u002F)(EnhancedComponent)\nEnhancedComponent = withState(\u002F*...args*\u002F)(EnhancedComponent)\n\n\u002F\u002F Do this instead\n\u002F\u002F Note that the order has reversed — props flow from top to bottom\nconst enhance = compose(\n  withState(\u002F*...args*\u002F),\n  mapProps(\u002F*...args*\u002F),\n  pure\n)\nconst EnhancedComponent = enhance(BaseComponent)\n```\n\nTechnically, this also means you can use them as decorators (if that's your thing):\n\n```js\n@withState(\u002F*...args*\u002F)\n@mapProps(\u002F*...args*\u002F)\n@pure\nclass Component extends React.Component {...}\n```\n\n### Optimizing bundle size\n\nSince `0.23.1` version recompose got support of ES2015 modules.\nTo reduce size all you need is to use bundler with tree shaking support\nlike [webpack 2](https:\u002F\u002Fgithub.com\u002Fwebpack\u002Fwebpack) or [Rollup](https:\u002F\u002Fgithub.com\u002Frollup\u002Frollup).\n\n#### Using babel-plugin-lodash\n\n[babel-plugin-lodash](https:\u002F\u002Fgithub.com\u002Flodash\u002Fbabel-plugin-lodash) is not only limited to [lodash](https:\u002F\u002Fgithub.com\u002Flodash\u002Flodash). It can be used with `recompose` as well.\n\nThis can be done by updating `lodash` config in `.babelrc`.\n\n```diff\n {\n-  \"plugins\": [\"lodash\"]\n+  \"plugins\": [\n+    [\"lodash\", { \"id\": [\"lodash\", \"recompose\"] }]\n+  ]\n }\n```\n\nAfter that, you can do imports like below without actually including the entire library content.\n\n```js\nimport { compose, mapProps, withState } from 'recompose'\n```\n\n### Debugging\n\nIt might be hard to trace how does `props` change between HOCs. A useful tip is you can create a debug HOC to print out the props it gets without modifying the base component. For example:\n\nmake\n\n```js\nconst debug = withProps(console.log)\n```\n\nthen use it between HOCs\n\n```js\nconst enhance = compose(\n  withState(\u002F*...args*\u002F),\n  debug, \u002F\u002F print out the props here\n  mapProps(\u002F*...args*\u002F),\n  pure\n)\n```\n\n\n## Who uses Recompose\nIf your company or project uses Recompose, feel free to add it to [the official list of users](https:\u002F\u002Fgithub.com\u002Facdlite\u002Frecompose\u002Fwiki\u002FSites-Using-Recompose) by [editing](https:\u002F\u002Fgithub.com\u002Facdlite\u002Frecompose\u002Fwiki\u002FSites-Using-Recompose\u002F_edit) the wiki page.\n\n## Recipes for Inspiration\nWe have a community-driven Recipes page. It's a place to share and see recompose patterns for inspiration. Please add to it! [Recipes](https:\u002F\u002Fgithub.com\u002Facdlite\u002Frecompose\u002Fwiki\u002FRecipes).\n\n## Feedback wanted\n\nProject is still in the early stages. Please file an issue or submit a PR if you have suggestions! Or ping me (Andrew Clark) on [Twitter](https:\u002F\u002Ftwitter.com\u002Facdlite).\n\n\n## Getting Help\n\n**For support or usage questions like “how do I do X with Recompose” and “my code doesn't work”, please search and ask on [StackOverflow with a Recompose tag](http:\u002F\u002Fstackoverflow.com\u002Fquestions\u002Ftagged\u002Frecompose?sort=votes&pageSize=50) first.**\n\nWe ask you to do this because StackOverflow has a much better job at keeping popular questions visible. Unfortunately good answers get lost and outdated on GitHub.\n\nSome questions take a long time to get an answer. **If your question gets closed or you don't get a reply on StackOverflow for longer than a few days,** we encourage you to post an issue linking to your question. We will close your issue but this will give people watching the repo an opportunity to see your question and reply to it on StackOverflow if they know the answer.\n\nPlease be considerate when doing this as this is not the primary purpose of the issue tracker.\n\n### Help Us Help You\n\nOn both websites, it is a good idea to structure your code and question in a way that is easy to read to entice people to answer it. For example, we encourage you to use syntax highlighting, indentation, and split text in paragraphs.\n\nPlease keep in mind that people spend their free time trying to help you. You can make it easier for them if you provide versions of the relevant libraries and a runnable small project reproducing your issue. You can put your code on [JSBin](http:\u002F\u002Fjsbin.com) or, for bigger projects, on GitHub. Make sure all the necessary dependencies are declared in `package.json` so anyone can run `npm install && npm start` and reproduce your issue.\n","Recompose 是一个用于React函数组件和高阶组件的实用工具库。它提供了一系列的辅助函数，如`withState`、`withReducer`等，帮助开发者更简洁地管理状态和逻辑复用，类似于lodash在JavaScript中的作用。这些功能使得在不使用类组件的情况下也能方便地进行状态提升和副作用处理。尽管随着React Hooks的引入，官方已不再积极维护该项目，但Recompose仍然适用于希望采用函数式编程模式构建React应用而不立即迁移至Hooks的场景中。",2,"2026-06-11 02:53:39","top_language"]