Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-broadcast
Advanced tools
Readme
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
.
It was originally built to solve issues that arose from using react-router
together with react-redux
. The router needed a safe way to communicate state changes to <Link>
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
.
Please note: As with anything that uses context, 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.
$ npm install --save react-broadcast
Then, use as you would anything else:
// using ES6 modules
import { createContext } from "react-broadcast";
// using CommonJS modules
var createContext = require("react-broadcast").createContext;
The UMD build is also available on unpkg:
<script src="https://unpkg.com/react-broadcast/umd/react-broadcast.min.js"></script>
You can find the library on window.ReactBroadcast
.
The following is a contrived example, but illustrates the basic functionality we're after:
import React from "react";
import { createContext } from "react-broadcast";
const users = [{ name: "Michael Jackson" }, { name: "Ryan Florence" }];
const { Provider, Consumer } = createContext(users[0]);
class UpdateBlocker extends React.Component {
shouldComponentUpdate() {
// This is how you indicate to React's reconciler that you don't
// need to be updated. It's a great way to boost performance when
// you're sure (based on your props and state) that your render
// output will not change, but it makes it difficult for libraries
// to communicate changes down the hierarchy that you don't really
// know anything about.
return false;
}
render() {
return this.props.children;
}
}
class App extends React.Component {
state = {
currentUser: Provider.defaultValue
};
componentDidMount() {
// Randomly change the current user every 2 seconds.
setInterval(() => {
const index = Math.floor(Math.random() * users.length);
this.setState({ currentUser: users[index] });
}, 2000);
}
render() {
return (
<Provider value={this.state.currentUser}>
<UpdateBlocker>
<Consumer>
{currentUser => <p>The current user is {currentUser.name}</p>}
</Consumer>
</UpdateBlocker>
</Provider>
);
}
}
Enjoy!
react-broadcast is developed and maintained by React Training. If you're interested in learning more about what React can do for your company, please get in touch!
FAQs
Reliably communicate state changes to deeply nested React elements
The npm package react-broadcast receives a total of 4,848 weekly downloads. As such, react-broadcast popularity was classified as popular.
We found that react-broadcast demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.