react-redux 防止在 state 更改时重新呈现列表项

Question

I have a list item callled Row. The Row has three sections, I have stored the width of each sections in a state

 rowWidth: [
     {
       id: 'name',       
       width: 200,
        
     },
     {
       id: 'size',       
       width: 70,
       
     },
     {
       id: 'status',      
       width: 150,
       
     },
     {
       id: 'progress',       
       width: 200,
       
     },
     {
       id: 'lasttry',       
       width: 200,
      
     },
     {
       id: 'eta',     
       width: 50,
       
     },
   ]

I change width of a single column by an external handle which updates the store.

switch (actions.type) {
     case consts.CHANGE_HEADER_WIDTH :  return {
       ...state,
       headerWidth: state.headerWidth.map((item) =>
         item.id === actions.payload.id ?  { ...item, width: actions.payload.neWidth }  : item
       ),
     } 
       
     break;
default : return state;
}

This is the row

  const headerWidth = useSelector((state) => state.ui.headerWidth)
  
  
  const getWidth = useCallback((id) => {
    const l = _.find(headerWidth, function (item) {
      return item.id === id
    })
    return l.width
  })

    return(
         <Row>
    <Section1 style={{ width: getRow('name') }}/>
    <Section2 style={{ width: getRow('size') }}/>
    <Section3 style={{ width: getRow('status') }}/>
    </Row>
    )

My question is - how do I change the width of these divs without rerendering row

Answer 1

Thank you all for the help. I understand that there has to be a rerender in order to view the state change.