{"library":"recompose","title":"recompose","description":"recompose is a JavaScript utility library for React, providing a collection of higher-order components (HOCs) and utility functions designed to enhance functional component patterns. It allows developers to compose multiple concerns into a single component, such as managing local state (`withState`), handling side effects (`lifecycle`), mapping props (`mapProps`), and creating event handlers (`withHandlers`). The current stable version is 0.30.0, released in late 2018. The author explicitly announced the discontinuation of active maintenance in October 2018, recommending React Hooks as a superior alternative that addresses the same problems and more. Its primary differentiator was enabling a purely functional approach to component logic before the native React Hooks API existed, offering a declarative way to abstract component logic and state management without relying on class components.","language":"javascript","status":"abandoned","last_verified":"Tue Apr 21","install":{"commands":["npm install recompose"],"cli":null},"imports":["import { compose } from 'recompose';","import { withState } from 'recompose';","import { withHandlers } from 'recompose';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { compose, withState, withHandlers, lifecycle } from 'recompose';\n\ninterface CounterProps {\n  count: number;\n  increment: () => void;\n  decrement: () => void;\n  message: string;\n}\n\nconst CounterDisplay: React.FC<CounterProps> = ({ count, increment, decrement, message }) => (\n  <div>\n    <h1>{message}</h1>\n    <p>Count: {count}</p>\n    <button onClick={increment}>Increment</button>\n    <button onClick={decrement}>Decrement</button>\n  </div>\n);\n\nconst enhance = compose<\n  CounterProps,\n  { initialCount?: number; initialMessage?: string }\n>(\n  withState('count', 'setCount', ({ initialCount = 0 }) => initialCount),\n  withState('message', 'setMessage', ({ initialMessage = 'Hello Recompose!' }) => initialMessage),\n  withHandlers({\n    increment: ({ setCount }) => () => setCount((prevCount: number) => prevCount + 1),\n    decrement: ({ setCount }) => () => setCount((prevCount: number) => prevCount - 1)\n  }),\n  lifecycle({\n    componentDidMount() {\n      console.log('Counter component mounted.');\n      this.props.setMessage('Welcome to the Recompose Counter!');\n    },\n    componentDidUpdate(prevProps: CounterProps) {\n      if (this.props.count !== prevProps.count) {\n        console.log(`Count changed from ${prevProps.count} to ${this.props.count}`);\n      }\n    }\n  })\n);\n\nconst EnhancedCounter = enhance(CounterDisplay);\n\n// Example usage in an application (e.g., App.tsx)\n// function App() {\n//   return (\n//     <div style={{ padding: '20px' }}>\n//       <EnhancedCounter initialCount={5} />\n//     </div>\n//   );\n// }\n// export default App;\n","lang":"typescript","description":"This quickstart demonstrates creating a stateful functional React component using `recompose` HOCs like `compose`, `withState`, `withHandlers`, and `lifecycle` for managing count, message, and reacting to mount/update events.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}