React

by kairavthakar2016

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

import { useEffect, useRef } from 'react';

export const usePrevious = (value) => {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
};

export const ArticleQuantity = () => {
  const [quantity, setQuantity] = useState(1);
  const prevQuantity = usePrevious(quantity);

  useEffect(() => {
    console.log(prevQuantity + quantity); 
  }, [quantity]);
  
  <div>
  <input
  onChange={(e) => setQuantity(e.target.value)}
  defaultValue={quantity}/> 
<div>
}