How to store old array and compare it to the new updated array useRef and useEffect

Question

Currently I am building a Hanging man game, where I want to store the old array length and compare it to the new array length. I know that useRef is the stuff I need to get this done. Could someone help me with this.

useEffect(() => {
        
        const checkLetter = (event) => {
            let letter = String.fromCharCode(event.keyCode).toLowerCase();
            if(event.keyCode >= 65 && event.keyCode <= 90) {
                setCount(count + 1);
                setGuessed(prev => {
                    const next = [...prev, letter]
                    counter(next);
                    return next;
                });
            } 
        }
 
        document.addEventListener('keydown', checkLetter);

        return () => {
            document.removeEventListener('keydown', checkLetter);
        }
    }, [guessed, count]);

const counter = (letterArray) => {
 let oldArray = letterArray.filter((v, i) => letterArray.indexOf(v) === i);  
  // currently oldArray outputs for instance ['a', 'b', 'c'];
  // if someone clicks on a new letter for instance 'd', the new updated array becomes ['a', 'b', 'c', 'd']. And if I want to compare the old array with new updated array for instance like: oldArray !== newUpdatedArray, it returns true. 
    }

if current old array is ['a', 'b', 'c'] and you recently clicked on letter d, the new updated array becomes ['a', 'b', 'c', 'd']. And then i want to compare ['a', 'b', 'c'] !== ['a', 'b', 'c', 'd'];

It's not clear what you're asking. You want to avoid duplicated elements inside your array? — Dupocas, Oct 09 '19 at 14:14
no i updated the answer, the oldArray is the current array, and the new one is the one that has recently been updated. — frontend, Oct 09 '19 at 14:16
You want a function that returns if a given letter is already inside an array? — Dupocas, Oct 09 '19 at 14:17
No i want to compare the old array with the new updated array. — frontend, Oct 09 '19 at 14:18
if current array is ['a', 'b', 'c'] and you recently clicked on letter 'd', the array becomes ['a', 'b', 'c', 'd']. And then i want to compare ['a', 'b', 'c'] !== ['a', 'b', 'c', 'd']; — frontend, Oct 09 '19 at 14:21
`const compareByLength = (old, new) => old.length === new.length` — Dupocas, Oct 09 '19 at 14:27
Possible duplicate of [How to compare oldValues and newValues on React Hooks useEffect?](https://stackoverflow.com/questions/53446020/how-to-compare-oldvalues-and-newvalues-on-react-hooks-useeffect) — reisdev, Oct 09 '19 at 14:27
`const compareStringify = (old, new) => JSON.stringify(old) === JSON.stringify(new)` — Dupocas, Oct 09 '19 at 14:27
React docs, `usePrevious` hook: https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state — Drew Reese, Oct 09 '19 at 14:32

score 0 · Answer 1 · answered Oct 09 '19 at 15:43

Arrays will be compared by refs, so even [] === [] will always return false. You probably need to compare by values. If you always adds letters to the end of array, you probably can check by just:

const compare = (array1, array2) => {
  if (array1.length !== array2.length) {
    return false;
  }

  return array1.every(
    (item, index) => item === array2[index]
  );
}

If you want compare only values and you don't care about order:

const isIn = (array1, array2) => {
  return array1.every(
    return array2.includes(item);
  );
}

const compare = (array1, array2) => isIn(array1, array2) || isIn(array2, array1);

You can also use lodash.difference() for that.

score 0 · Answer 2 · answered Oct 09 '19 at 15:48

0

You can simply compare arrays length

const compareArr = (oldArr, newArr) => oldArr.length === newArr.length

It will return true if array has same length as before and false if length has changed

Hope it helps

answered Oct 09 '19 at 15:48

ibtsam

1,620
1
10
10

How to store old array and compare it to the new updated array useRef and useEffect

2 Answers2