React UseEffect function triggering in empty array change

Question

The react application that I'm working on triggers the userEffect function if the prop value changes from an empty array to another empty array.

I'm getting query params from the page and passing them down in a component that re-renders if any of the query param array changes. But the issue is that the useEffect function triggers and re-renders the component even if the query param array changed from [] to [].

I know that [] !== [], maybe that's what causing the issue. But is there a way that that the application can prevent triggering the useEffect function in the first place?

Heres a codesandbox demo: https://codesandbox.io/s/vibrant-greider-qgjgs?file=/src/App.js

It's unclear exactly what you're trying to do. When exactly do you want the useEffect to run? — jered
@jered , Just don't want to trigger it if the prop changes from [] to [] — Prottay Rudra
why not just use if-else inside useEffect? It will still trigger the function but the function can still decide what to do — Muhammed B. Aydemir
@MuhammedB.Aydemir, maybe I could use an if statement to check for length. what happens if the query param changes from ['some-data'] to []`. How do you handle that? — Prottay Rudra
Is it an issue (performance) if the component rerenders for this edge-case? What is the concern? — Drew Reese

deepak deepak · Accepted Answer · 2020-09-04T06:36:38

you are assigning a new reference to the test hence it is triggering an update.

you should reassign the same array and to manipulation in it.

   const handleClick = () => {
   const arr = test
    setTest(arr);
  };

React UseEffect function triggering in empty array change

3 Answers