Posts

Showing posts with the label immutability

Redux state update causing React component to render unnecessarily

Redux state update causing React component to render unnecessarily I’m experiencing a few performance issues in my react / redux app. I’m working with an object in one of my reducers which is quite deep. It contains an object named list which holds a collection of objects. list const state = { list: { one: { id: 'one', name: 'One', active: false }, two: { id: 'two', name: 'Two', active: false } } } Each item in the object is used to render a component. This component will access the properties of the item like so: const List = (props) => { const listItems = Object.keys(props.list).map((key) => { const item = props.list[key]; return ( <Item key={item.id} active={item.active}> {item.name} </Item> ); }); return <ul>{listItems}</ul>; }; However, every time I run through the following code, my component (which is a PureComponent) render...