score:0

Accepted answer
const Item = React.memo(function Item({ id, value, isSaving, onSave }) {
  const dispatch = useContext(ItemListDispatch);

  console.log("render", id);

  if (isSaving) {
    return <li>Saving...</li>;
  }

  function onChange(event) {
    dispatch({ type: "SET_VALUE", id, value: event.target.value });
  }

  return (
    <li>
      <input value={value} onChange={onChange} />
      <button onClick={onSave}>Save</button>
    </li>
  );
});

score:0

const Item = React.memo(
  function Item({ id, value, onChange, onSave }) {
    console.log("render", id);

    return (
      <li>
        <input
          value={value}
          onChange={event => onChange(id, event.target.value)}
        />
        <button onClick={() => onSave(id)}>Save</button>
      </li>
    );
  },
  (prevProps, nextProps) => {
    // console.log("PrevProps", prevProps);
    // console.log("NextProps", nextProps);
    return prevProps.value === nextProps.value;
  }
);  

Related Query

More Query from same tag