0

I have a useState array that is being set with an array received from the backend. I am creating a new array equal to it and using _.remove to delete items from it. However, the original useState array is also having items deleted from it. I cannot figure out why this is the case

const [backendArray, setBackendArray] = useState([{some values}])

const newArray = backendArray;


useEffect(() => {
const arrayForPurpose1 = _.remove(newArray, function (n) {
      return n.value != null;
    }), [backendArray]};

Both arrayForPurpose1 and backendArray have item.values equalling null. Why is that the case? I created newArray thinking that would sever connection between the _.remove and backendArray but it didn't.

Joseph Walsh
  • 96
  • 1
  • 6
  • 1
    From the [docs](https://lodash.com/docs/4.17.15#remove): *'**Note:** Unlike `_.filter`, this method mutates array. Use `_.pull` to pull elements from an array by value.'* Also `const newArray = backendArray;` doesn't create a copy of the array it just assigns a reference to the same array to `newArray`. see: [Fastest way to duplicate an array in JavaScript - slice vs. 'for' loop](https://stackoverflow.com/questions/3978492/fastest-way-to-duplicate-an-array-in-javascript-slice-vs-for-loop) – pilchard Nov 04 '22 at 23:06
  • @pilchard I'm sorry. I've bothered you twice today -- I did read that, but I'm pretty new to coding in general and "mutate" has a different meaning to my mind. But still, I would have thought initializing a new constant and basing the _.remove on it would have prevented it? – Joseph Walsh Nov 04 '22 at 23:10
  • 1
    `const newArray = backendArray;` does not clone the array. Just makes another label to the same array. – VLAZ Nov 04 '22 at 23:10
  • Just saw your edit - OK, that's what I didn't grasp. That's a big learning point for me in general. – Joseph Walsh Nov 04 '22 at 23:11
  • 1
    Also: [What is the most efficient way to deep clone an object in JavaScript?](https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript) – pilchard Nov 04 '22 at 23:11
  • No, it's a fine question, and object referencing is one of the biggest pitfalls in learning the language and in dealing with state so the links to duplicates or relevant answers are useful going forward. (you would have been downvoted if it wasn't useful) – pilchard Nov 04 '22 at 23:18
  • My God, I would have saved so much time if the docs referenced using `_.clone.` In summary, `_.pull` doesn't work because it doesn't work with an array of objects. The only way, without a lot of vanilla code, is to initialize a new array as I did but to divorce it entirely from the array it equals. Luckily lodash provides `_.clone` and `_.cloneDeep` to do that – Joseph Walsh Nov 04 '22 at 23:41
  • 2
    Does this answer your question? [Why does changing an Array in JavaScript affect copies of the array?](https://stackoverflow.com/questions/6612385/why-does-changing-an-array-in-javascript-affect-copies-of-the-array) – jonrsharpe Nov 05 '22 at 22:13

0 Answers0