score:2
will react update all 5 rows or just the row holding the object i modified?
it will only update the dom with what's been changed, however it will still iterate through all your items in your dataset
array. the iteration as well as the reconciliation process itself would take time if there are that many items in your array.
so the problem here isn't really the implementation per se - it's a very common approach for small to medium sized arrays. however, if you indeed have large entries in your array, you may notice performance hits, in which case you might want to find a different implementation.
that said, i did find a minor error in your code:
you correctly create a copy of your array with this.state.dataset.slice();
however you are not creating a copy of the object that you are mutating. so essenatially you are mutating the state directly. so instead do:
// copy current state
let new_dataset = this.state.dataset.slice();
// copy the object
let obj = object.assign({}, new_dataset[5]);
// modify the copy
obj.paid = !obj.paid;
// replace the array item with the new object
new_dataset[5] = obj;
score:0
will react update all 5 rows or just the row holding the object i modified?
no it doesn't react render all the 5 rows again. rather react optimises on a number of things to not render the same changes again. one such thing is a key
attribute. also react runs a diffing algorithm to render only the changes
score:2
Source: stackoverflow.com
Related Query
- Rendering optimization using nested state in React
- How to update the state of nested json object in react using hooks
- testing conditional rendering that relies on state using react testing library
- Using nested objects with Flow in React state
- React Hooks: using useState inside useEffect doesn't set the state immediately after first rendering
- React not rendering with correct state value after using this.setState
- React - using nested objects as state with hooks to fill form data
- React Nested Object State Using Memo
- React components not rendering from global state using context API
- Using React + Firebase, how to modify state inside a nested query?
- React Context updated state not reflecting in nested functions when using Hooks
- Using nested rendering in React
- State disappears after update using React setState hook when using nested fields/object
- How to set react state from local storage when rendering main component, using useEffect?
- How to update nested state properties in react using immutable way
- Using nested objects in React state
- Toggle class on button click in react js using state without re rendering component
- How to set and access values of nested array objects in React state using useState hook?
- How to update nested state properties in React
- State not updating when using React state hook within setInterval
- How to sync props to state using React hooks : setState()
- Does React batch state update functions when using hooks?
- Updating and merging state object using React useState() hook
- Using state in react with TypeScript
- React useState hook event handler using initial state
- How do I get an attribute of an element nested in a React component using Jest and/or Enzyme?
- Using Dynamic Var with `Set` State in React Hooks?
- What is the difference between using constructor vs state = {} to declare state in react component?
- Prevent react component from rendering twice when using redux with componentWillMount
- Incrementing state value by one using React
More Query from same tag
- How can I use an Openlayer 'overlay' inside React?
- How to open a specific popup on map load?
- Exporting Redux Store Fails Enzyme Tests
- React JS display all data in the textfield for particuler selected ID
- Replicate element in React
- instead of removing the item from array, it is set as undefined
- React Redux, rerendering after data was fetched and mapped into component?
- Graphql subscription not getting client-side variables
- Regex for hashtags tree takes too long to execute
- Stuck on adding image url and normal url in props
- Can't resolve 'chart.js/auto'
- Scroll when hover arrow - like amazon website
- React.js mapping how to change a single element
- What is the best way to store 'likes' in Firebase?
- Cookie cannot be read by script
- React Date Time Picker Date object not storing to Firebase real time database
- How to provide a history instance to a saga?
- Right way of using react-hook-form with typescript and material-ui for showing error message
- Best way to develop this function in react js instead of this current .map
- How to make just 1 row editable in material-table?
- Rendered more hooks than during the previous render when using hooks in subcomponent
- How to get mapDispatchToProps method to dispatch action
- Updated state not useful in the return statement of a method
- Acces objects contents while creating
- How to list items in props variable?
- Configuration for mobile-friendly Airbnb's react-dates library
- How to enable overflow for `react-bootstrap` NavDropdown
- Material-table: how to give custom style to EmptyDataSourceMessage
- Adding Jquery and React fb to html file
- Is passing the "this" context through props an anti-pattern?