Comments (2)
When you send new props to the component, it does a shallow diff on the passed data -- by default -- as described in the readme. You can customise how the diff is performed to use other data formats, like Immutable.
When using the default diffing mechanism, you need to send a different object in order for the diff to have any effect. If you pass the same elements array twice, then there is zero diff between the initial state and the new state. A simple way to do this is to use the component like this:
<CytoscapeComponent elements={[ ...elements ]} />
That way, you're always passing a different array object. However, note that this pattern only works for element additions or removals, as the underlying element references are the same.
For element modification, you can use something like this:
// changes to element.data via myNewData with deleted field values as null
let myNewData = { thisFieldIsDeleted: null, thisFieldIsOverridded: 123 };
element.data = Object.assign({}, element.data, myNewData);
The Mocha tests have examples of creating new objects to trigger a diff.
For the notebooks or Dash usecase, you don't need to consider copying as the props would always be newly deserialised JSON -- from Python, for example.
For the pure JS usecase, I would expect Immutable to the most efficient option.
from react-cytoscapejs.
This makes sense and works well. Thank you!
from react-cytoscapejs.
Related Issues (20)
- ReferenceError: window is not defined when refresshing the page.
- Maximum call stack size exceeded HOT 1
- How to use ctxmenu in this component?
- Issues with React 18 StrictMode HOT 4
- Next.js uses cjs module loader resulting in SyntaxError: Cannot use import statement outside a module HOT 2
- TS: cannot find module error
- nodes selction is not working
- Canvas elements moved by 50% to the right of the CytoscapeComponent HOT 2
- v2.0 has demo target missing HOT 7
- resize CytoscapeComponent
- updates to component HOT 2
- Createportal / react-cytoscape HOT 1
- Microbundle Compile Error Next.js HOT 1
- Support automatically check/uncheck link between two nodes
- Question: Could the nodes be interactive? HOT 2
- Question: Update to React 18? HOT 2
- Question: Styling & Layout HOT 1
- Infinite render graph force-directed on parameter "randomize": false
- Module not found: Can't resolve 'react-cytoscapejs' in Nextjs
- TypeError: renderer is null HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-cytoscapejs.