{"id":20776815,"url":"https://github.com/avocode/react-listener-component","last_synced_at":"2025-04-30T18:11:00.296Z","repository":{"id":51708613,"uuid":"48171030","full_name":"avocode/react-listener-component","owner":"avocode","description":"Safe listener registration for React context-provided services.","archived":false,"fork":false,"pushed_at":"2022-12-06T20:25:34.000Z","size":353,"stargazers_count":3,"open_issues_count":9,"forks_count":2,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-30T18:43:48.839Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CoffeeScript","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/avocode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-17T11:39:10.000Z","updated_at":"2020-04-24T20:15:08.000Z","dependencies_parsed_at":"2023-01-23T15:01:13.441Z","dependency_job_id":null,"html_url":"https://github.com/avocode/react-listener-component","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avocode%2Freact-listener-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avocode%2Freact-listener-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avocode%2Freact-listener-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avocode%2Freact-listener-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avocode","download_url":"https://codeload.github.com/avocode/react-listener-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251758170,"owners_count":21638989,"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":[],"created_at":"2024-11-17T13:12:02.558Z","updated_at":"2025-04-30T18:11:00.256Z","avatar_url":"https://github.com/avocode.png","language":"CoffeeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Listener Component\n\n## Introduction\n\n### 1. The Problem\n\nWhen using React contexts, one has to be careful not to get out of sync. Context is not immutable, it can be changed during the components' lifetime (even though it is usually not the case).\n\nConsider the following component tree:\n\n```javascript\nclass ContextRoot extends React.Component {\n  static propTypes = {\n    myService: React.PropTypes.object\n  }\n  static childContextTypes = {\n    myService: React.PropTypes.object\n  }\n  getChildContext() {\n    return { myService: this.props.myService }\n  }\n  render() {\n    return React.DOM.div(null, this.props.children)\n  }\n})\n\nclass Content extends React.Component {\n  static contextTypes = {\n    myService: React.PropTypes.object\n  }\n  componentDidMount() {\n    this.context.myService.addListener(handleChange)\n  }\n  componentDidMount() {\n    this.context.myService.removeListener(handleChange)\n  }\n  render() {\n    return React.DOM.div(null)\n  }\n})\n\nvar myService = new MyService()\nvar tree = (\n  \u003cContextRoot myService={myService}\u003e\n    \u003cContent /\u003e\n  \u003c/ContextRoot\u003e\n)\nReactDOM.render(tree, node)\n```\n\nThe child context of `ContextRoot` is recalculated on each update to its props or state. If we were to swap the `myService` instance by passing in new props, the child context would reflect the change.\n\n```javascript\nvar myDifferentService = new MyService()\nvar tree (\n  \u003cContextRoot myService={myDifferentService}\u003e\n    \u003cContent /\u003e\n  \u003c/ContextRoot\u003e\n)\nReactDOM.render(tree, node)\n```\n\nThe issue here is that the child component `Content` is now out of sync as it is still listening to the previous service instance even though it is no longer relevant.\n\n### 2. The Solution\n\nThe component has to react to the context change by implementing `componentWillUpdate` or `componentDidUpdate` in which it compares the old and the new context.\n\nNOTE: It's a good idea to implement both of these methods to gracefully handle update/render failures.\n\n```javascript\nclass Content extends React.Component {\n  // ...\n  componentWillUpdate: function (nextProps, nextState, nextContext) {\n    if (this.context.myService !== nextContext.myService) {\n      this.context.myService.removeListener(handleChange)\n    }\n  }\n  componentDidUpdate: function (prevProps, prevState, prevContext) {\n    if (this.context.myService !== prevContext.myService) {\n      this.context.myService.addListener(handleChange)\n    }\n  }\n  // ...\n})\n```\n\nThis is quite a lot of boilerplate if we consider that there might be multiple services passed in.\n\n### 3. The Solution, Reworked\n\nThe important pieces in the four lifecycle methods are really only the **context keys** and the **listeners** which should be registered. The rest is boilerplate which we should not have to write every time.\n\nLet's request two services from the context and provide the listeners to register.\n\n```javascript\nclass Content extends ListenerComponent {\n  static contextTypes = {\n    serviceA: React.PropTypes.object\n    serviceB: React.PropTypes.object\n  }\n  getListeners() {\n    return {\n      serviceA: handleChangeA\n      serviceB: handleChangeB\n    }\n  }\n  render() {\n    return React.DOM.div(null)\n  }\n}\n```\n\nNow that's awesome. The only limitation it the interface forced on these services: They both have to implement the `addListener` and `removeListener` methods.\n\nThere should be a way to specify the listener registration API for each service.\n\n```javascript\nclass Content extends ListenerComponent {\n  static contextTypes = {\n    serviceA: React.PropTypes.object\n    serviceB: React.PropTypes.object\n  }\n  getListeners(context) {\n    return {\n      serviceA: {\n        listener: handleChangeA,\n        add: context.serviceA.addMyListener,\n        remove: context.serviceA.removeMyListener\n      },\n      serviceB: handleChangeB\n    }\n  }\n  render() {\n    return React.DOM.div(null)\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favocode%2Freact-listener-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favocode%2Freact-listener-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favocode%2Freact-listener-component/lists"}