{"id":15033353,"url":"https://github.com/reacttraining/react-broadcast","last_synced_at":"2025-05-15T01:08:52.519Z","repository":{"id":57281705,"uuid":"69530831","full_name":"ReactTraining/react-broadcast","owner":"ReactTraining","description":"Reliably communicate state changes to deeply nested React elements","archived":false,"fork":false,"pushed_at":"2022-11-20T03:30:26.000Z","size":228,"stargazers_count":1318,"open_issues_count":3,"forks_count":58,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-05-15T01:08:46.581Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ReactTraining.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":"2016-09-29T04:31:12.000Z","updated_at":"2024-09-23T10:33:35.000Z","dependencies_parsed_at":"2022-09-09T00:23:07.583Z","dependency_job_id":null,"html_url":"https://github.com/ReactTraining/react-broadcast","commit_stats":null,"previous_names":["reacttraining/react-context-emission"],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactTraining%2Freact-broadcast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactTraining%2Freact-broadcast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactTraining%2Freact-broadcast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactTraining%2Freact-broadcast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ReactTraining","download_url":"https://codeload.github.com/ReactTraining/react-broadcast/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254254042,"owners_count":22039792,"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-09-24T20:20:54.572Z","updated_at":"2025-05-15T01:08:47.510Z","avatar_url":"https://github.com/ReactTraining.png","language":"JavaScript","readme":"# react-broadcast [![Travis][build-badge]][build] [![npm package][npm-badge]][npm]\n\n[build-badge]: https://img.shields.io/travis/ReactTraining/react-broadcast/master.svg?style=flat-square\n[build]: https://travis-ci.org/ReactTraining/react-broadcast\n[npm-badge]: https://img.shields.io/npm/v/react-broadcast.svg?style=flat-square\n[npm]: https://www.npmjs.com/package/react-broadcast\n\n[`react-broadcast`](https://www.npmjs.com/package/react-broadcast) provides a reliable way for React components to propagate state changes to their descendants deep in the component hierarchy, bypassing intermediaries who `return false` from [`shouldComponentUpdate`](https://reactjs.org/docs/react-component.html#shouldcomponentupdate).\n\nIt was originally built to solve issues that arose from using [`react-router`](https://www.npmjs.com/package/react-router) together with [`react-redux`](https://www.npmjs.com/package/react-redux). The router needed a safe way to communicate state changes to `\u003cLink\u003e`s deep in the component hierarchy, but `react-redux` relies on `shouldComponentUpdate` for performance. `react-broadcast` allows the router to work seamlessly with Redux and any other component that uses `shouldComponentUpdate`.\n\n**Please note:** As with anything that uses [context](https://reactjs.org/docs/context.html), this library is experimental. It may cease working in some future version of React. For now, it's a practical workaround for the router. If we discover some better way to do things in the future, rest assured we'll do our best to share what we learn.\n\n## Installation\n\n    $ npm install --save react-broadcast\n\nThen, use as you would anything else:\n\n```js\n// using ES6 modules\nimport { createContext } from \"react-broadcast\";\n\n// using CommonJS modules\nvar createContext = require(\"react-broadcast\").createContext;\n```\n\nThe UMD build is also available on [unpkg](https://unpkg.com):\n\n```html\n\u003cscript src=\"https://unpkg.com/react-broadcast/umd/react-broadcast.min.js\"\u003e\u003c/script\u003e\n```\n\nYou can find the library on `window.ReactBroadcast`.\n\n## Usage\n\nThe following is a contrived example, but illustrates the basic functionality we're after:\n\n```js\nimport React from \"react\";\nimport { createContext } from \"react-broadcast\";\n\nconst users = [{ name: \"Michael Jackson\" }, { name: \"Ryan Florence\" }];\n\nconst { Provider, Consumer } = createContext(users[0]);\n\nclass UpdateBlocker extends React.Component {\n  shouldComponentUpdate() {\n    // This is how you indicate to React's reconciler that you don't\n    // need to be updated. It's a great way to boost performance when\n    // you're sure (based on your props and state) that your render\n    // output will not change, but it makes it difficult for libraries\n    // to communicate changes down the hierarchy that you don't really\n    // know anything about.\n    return false;\n  }\n\n  render() {\n    return this.props.children;\n  }\n}\n\nclass App extends React.Component {\n  state = {\n    currentUser: Provider.defaultValue\n  };\n\n  componentDidMount() {\n    // Randomly change the current user every 2 seconds.\n    setInterval(() =\u003e {\n      const index = Math.floor(Math.random() * users.length);\n      this.setState({ currentUser: users[index] });\n    }, 2000);\n  }\n\n  render() {\n    return (\n      \u003cProvider value={this.state.currentUser}\u003e\n        \u003cUpdateBlocker\u003e\n          \u003cConsumer\u003e\n            {currentUser =\u003e \u003cp\u003eThe current user is {currentUser.name}\u003c/p\u003e}\n          \u003c/Consumer\u003e\n        \u003c/UpdateBlocker\u003e\n      \u003c/Provider\u003e\n    );\n  }\n}\n```\n\nEnjoy!\n\n## About\n\nreact-broadcast is developed and maintained by [React Training](https://reacttraining.com). If you're interested in learning more about what React can do for your company, please [get in touch](mailto:hello@reacttraining.com)!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freacttraining%2Freact-broadcast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freacttraining%2Freact-broadcast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freacttraining%2Freact-broadcast/lists"}