почему рендеринг задерживается

Question

Я свободен sh в ответных крючках, я пытаюсь сделать простую страницу корзины (как прикреплено https://i.stack.imgur.com/lgjcY.jpg), но, к сожалению, кнопка увеличения и удаления не влияет на рендер должным образом (usestate выполняется, но изменение рендера отстает, есть задержка), это что-то не так с моим кодом, особенно хуки usestate

import React, { useState,useEffect} from 'react';

import { render } from '@testing-library/react';

const Buttons = () => {

const [values,setValue]=useState([{value:0},{value:2},{value:4}]);

let getStyle=(value)=>{
    var styles="badge badge-";
    var color= (value===0)? "warning":"primary";
    styles+=color;
     return styles;
 }

const handleAdd=(e)=>{
    var i=(e.target.id);
     var count=values
     count[i].value+=1;
     setValue(count);

  }


 const handleMinus=(e)=>{
  }
  const handleDelete=(e)=>{
      var i=e.target.id
      values.splice(i,1);
      setValue(values);
   }
 const handleAddItem=()=>{
      setValue([...values,{value:0}]);
   }

return (
    <div>

      <ul>
        {values.map((value,i)=>
        <li key={i} style={{listStyle:"none"}}>
        <span className={getStyle(value.value)} >{value.value}</span>
        <button className="btn btn-primary m-2" id={i} onClick={handleAdd}>+</button><button 
         className="btn btn-success m-2" onClick={{handleAdd}}>-</button>
        <button className="btn btn-danger m-2" id={i} onClick={handleDelete}>Del</button>
        </li>)}
        </ul>
        <button className="btn-btn-primary"  onClick={handleAddItem}>Add Item</button>
      </div>
     );
}

 export default Buttons;

Answer 1

1. Всегда возвращайте новое значение и не изменяйте объекты | массив
2. попробуйте использовать useCallback, чтобы избежать ненужной компиляции.

import React, {useState, useEffect} from 'react';
import {render} from '@testing-library/react';

const Buttons = () => {
  const [values, setValue] = useState([{value: 0}, {value: 2}, {value: 4}]);

  const getStyle = useCallback((value) => `badge badge-${value === 0 ? 'warning' : 'primary'}`}, []);

  const handleAdd = useCallback((e) => {
    const i = (e.target.id);
    setValue((current) => current.map((c, index) => index === i ? {value: c.value + 1} : c));
  }, []);

  const handleDelete = useCallback((e) => {
    const i = e.target.id;
    setValue((current) => current.filter((c, index) => index !== i));
  }, []);

  const handleAddItem = useCallback(() => {
    setValue((current) => [...current, {value: 0}]);
  }, []);

  return (
    <div>
      <ul>
        {values.map((value, i) =>
          <li key={i} style={{listStyle: 'none'}}>
            <span className={getStyle(value.value)}>{value.value}</span>
            <button className="btn btn-primary m-2" id={i} onClick={handleAdd}>+</button>
            <button
              className="btn btn-success m-2" onClick={handleAdd}>-
            </button>
            <button className="btn btn-danger m-2" id={i} onClick={handleDelete}>Del</button>
          </li>)}
      </ul>
      <button className="btn-btn-primary" onClick={handleAddItem}>Add Item</button>
    </div>
  );
};

export default Buttons;

Answer 2

Компонент будет отображаться, только если предыдущее состояние не равно (поверхностное сравнение) с предыдущим.

const handleDelete = e => {
  const i = e.target.id;
  values.splice(i, 1);
  setValue([...values]);
}

От useState документов :

Если ваша функция обновления возвращает точно такое же значение, последующее повторное отображение будет полностью пропущено.

С #Array.splice():

values.splice(i, 1);
prevValues === values; // Always true