Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
react-addons-update
Advanced tools
>**Note:** >This is a legacy React addon, and is no longer maintained. > >We don't encourage using it in new code, but it exists for backwards compatibility. >The recommended migration path is to use [`immutability-helper`](https://github.com/kolodny/im
Note: This is a legacy React addon, and is no longer maintained.
We don't encourage using it in new code, but it exists for backwards compatibility.
The recommended migration path is to useimmutability-helper
. Its version1.0.0
is a drop-in replacement.
Importing
import update from 'react-addons-update'; // ES6
var update = require('react-addons-update'); // ES5 with npm
If you prefer a <script>
tag, you can get it from React.addons.update
with:
<!-- development version -->
<script src="https://unpkg.com/react-addons-update/react-addons-update.js"></script>
<!-- production version -->
<script src="https://unpkg.com/react-addons-update/react-addons-update.min.js"></script>
In this case, make sure to put the <script>
tag after React.
React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it's easy to implement a fast shouldComponentUpdate()
method to significantly speed up your app.
Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like Clojure. However, we've provided a simple immutability helper, update()
, that makes dealing with this type of data much easier, without fundamentally changing how your data is represented. You can also take a look at Facebook's Immutable-js and the Optimizing Performance section for more detail on Immutable-js.
If you mutate data like this:
myData.x.y.z = 7;
// or...
myData.a.b.push(9);
You have no way of determining which data has changed since the previous copy has been overwritten. Instead, you need to create a new copy of myData
and change only the parts of it that need to be changed. Then you can compare the old copy of myData
with the new one in shouldComponentUpdate()
using triple-equals:
const newData = deepCopy(myData);
newData.x.y.z = 7;
newData.a.b.push(9);
Unfortunately, deep copies are expensive, and sometimes impossible. You can alleviate this by only copying objects that need to be changed and by reusing the objects that haven't changed. Unfortunately, in today's JavaScript this can be cumbersome:
const newData = extend(myData, {
x: extend(myData.x, {
y: extend(myData.x.y, {z: 7}),
}),
a: extend(myData.a, {b: myData.a.b.concat(9)})
});
While this is fairly performant (since it only makes a shallow copy of log n
objects and reuses the rest), it's a big pain to write. Look at all the repetition! This is not only annoying, but also provides a large surface area for bugs.
update()
update()
provides simple syntactic sugar around this pattern to make writing this code easier. This code becomes:
import update from 'react-addons-update';
const newData = update(myData, {
x: {y: {z: {$set: 7}}},
a: {b: {$push: [9]}}
});
While the syntax takes a little getting used to (though it's inspired by MongoDB's query language) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version.
The $
-prefixed keys are called commands. The data structure they are "mutating" is called the target.
{$push: array}
push()
all the items in array
on the target.{$unshift: array}
unshift()
all the items in array
on the target.{$splice: array of arrays}
for each item in arrays
call splice()
on the target with the parameters provided by the item.{$set: any}
replace the target entirely.{$merge: object}
merge the keys of object
with the target.{$apply: function}
passes in the current value to the function and updates it with the new returned value.const initialArray = [1, 2, 3];
const newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]
initialArray
is still [1, 2, 3]
.
const collection = [1, 2, {a: [12, 17, 15]}];
const newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});
// => [1, 2, {a: [12, 13, 14, 15]}]
This accesses collection
's index 2
, key a
, and does a splice of one item starting from index 1
(to remove 17
) while inserting 13
and 14
.
const obj = {a: 5, b: 3};
const newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}});
// => {a: 5, b: 6}
// This is equivalent, but gets verbose for deeply nested collections:
const newObj2 = update(obj, {b: {$set: obj.b * 2}});
const obj = {a: 5, b: 3};
const newObj = update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7}
15.6.2 (September 25, 2017)
document.documentMode
would trigger IE detection in other browsers, breaking change events. (@aweary in #10032)onChange
would not fire with defaultChecked
on radio inputs. (@jquense in #10156)controlList
attribute to allowed DOM properties (@nhunzaker in #9940)FAQs
>**Note:** >This is a legacy React addon, and is no longer maintained. > >We don't encourage using it in new code, but it exists for backwards compatibility. >The recommended migration path is to use [`immutability-helper`](https://github.com/kolodny/im
The npm package react-addons-update receives a total of 65,235 weekly downloads. As such, react-addons-update popularity was classified as popular.
We found that react-addons-update demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.